Cómo crear formularios con HTML y CSS

Angela Sofía Osorio

En este artículo vamos a aprender cómo crear formularios con HTML y CSS. Si estás comenzando en el mundo del desarrollo web, este es un tema súper importante porque los formularios son una de las principales formas de interactuar con los usuarios en un sitio Web.

¿Qué es un formulario en HTML?

Un formulario en HTML es una sección de una página web que permite a los usuarios enviar datos al servidor. Por ejemplo, puede ser el formulario de inicio de sesión, el registro de usuarios o el campo de búsqueda de Google.

Etiquetas principales de un formulario

Los formularios se construyen utilizando varias etiquetas de HTML. Aquí te explico las principales:

<form>: Es la etiqueta contenedora del formulario. Incluye atributos como:
- action: Especifica la URL donde se enviarán los datos.
- method: Determina cómo se envían los datos. Puede ser:
  - GET: Los datos se envían en la URL (menos seguro).
  - POST: Los datos se envían en el cuerpo de la solicitud (más seguro).
<input>: Permite a los usuarios ingresar datos. Tiene varios tipos:
- text: Para texto.
- email: Para correos electrónicos.
- password: Para contraseñas.
- radio: Botones de selección única.
- checkbox: Casillas de verificación.
- submit: Botón para enviar el formulario.
<label>: Conecta un texto con un campo del formulario, mejorando la accesibilidad.
<textarea>: Para áreas de texto más grandes.
<select> y <option>: Para listas desplegables.
<button>: Para crear botones personalizados.

Estructura básica de un formulario

<form action="/submit" method="POST">
  <label for="name">Nombre:</label>
  <input type="text" id="name" name="user_name" required>
  
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="user_email" required>
  
  <label for="message">Mensaje:</label>
  <textarea id="message" name="user_message" rows="4" cols="50"></textarea>
  
  <button type="submit">Enviar</button>
</form>

Validaciones en HTML

Tipos de validaciones nativas

required: Hace que un campo sea obligatorio.
pattern: Valida el contenido según una expresión regular.
min y max: Para números, define los valores mínimo y máximo permitidos.
maxlength y minlength: Limita la longitud del texto.
type: Asegura que el campo tenga un formato específico (email, número, etc.).
step: Define incrementos válidos para números.
placeholder: Proporciona una pista visual del formato esperado (no es una validación, pero ayuda).
title: Proporciona un mensaje adicional cuando falla la validación.

¿Qué es un pattern en HTML?

El atributo pattern permite definir una expresión regular (regex) que los datos ingresados en un campo deben cumplir. Si los datos no coinciden con el patrón, el formulario no se enviará, y el navegador mostrará un mensaje de error.

Ejemplo básico

<input type="text" pattern="[A-Za-z]+" title="Solo se permiten letras.">

En este ejemplo:

pattern="[A-Za-z]+" significa que el campo solo aceptará letras mayúsculas o minúsculas.
El atributo title especifica el mensaje que verá el usuario si no cumple el patrón.

Sintaxis de las expresiones regulares

Las expresiones regulares son conjuntos de caracteres y símbolos que describen un patrón de búsqueda. Aquí tienes los más comunes:

Metacaracteres básicos

Símbolo	Descripción	Ejemplo
`.`	Cualquier carácter excepto salto de línea	`a.b` coincide con «aab», «acb».
`^`	Inicio de una cadena	`^abc` coincide con «abc» al inicio.
`$`	Final de una cadena	`abc$` coincide con «abc» al final.
`\d`	Cualquier dígito (0-9)	`\d{3}` coincide con «123».
`\w`	Cualquier carácter alfanumérico	`\w+` coincide con «abc123».
`\s`	Cualquier espacio en blanco	`\s` coincide con » » o tabulación.

Cuantificadores

Cuantificador	Descripción	Ejemplo
`*`	Cero o más repeticiones	`a*` coincide con «», «a», «aaa».
`+`	Una o más repeticiones	`a+` coincide con «a», «aaa».
`?`	Cero o una repetición	`a?` coincide con «», «a».
`{n}`	Exactamente `n` repeticiones	`\d{4}` coincide con «1234».
`{n,}`	Al menos `n` repeticiones	`\d{2,}` coincide con «12», «123».
`{n,m}`	Entre `n` y `m` repeticiones	`\d{2,4}` coincide con «12», «1234».

Grupos y opciones

Símbolo	Descripción	Ejemplo
`(abc)`	Agrupa caracteres como una unidad	`(ab)+` coincide con «ab», «abab».
`[abc]`	Cualquiera de los caracteres en el grupo	`[abc]` coincide con «a», «b», «c».
`	`	Alternativa (o lógico)
`[^]`	Niega caracteres dentro del grupo	`[^a]` no coincide con «a».

Ejemplos prácticos de patrones comunes

1. Validar un correo electrónico

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}" title="Introduce un correo válido.">

[a-z0-9._%+-]+: Cualquier combinación de letras minúsculas, números y ciertos caracteres especiales antes del @
.@[a-z0-9.-]+: Dominios permitidos después del @.
\.[a-z]{2,}: Extensiones de dominio de al menos 2 caracteres (e.g., «.com», «.org»).

Validar un número de teléfono

<input type="tel" pattern="\+?[0-9]{1,4}?[-. ]?\(?\d{1,3}?\)?[-. ]?\d{1,4}[-. ]?\d{1,9}" title="Introduce un número de teléfono válido.">

\+?: El signo «+» es opcional.[0-9]{1,4}?: De 1 a 4 dígitos del código de país.
[-. ]?: Separador opcional entre partes.
$?\d{1,3}?$?: Un código de área opcional entre paréntesis.
\d{1,4}: Primer grupo de números.
\d{1,9}: Segundo grupo de números (hasta 9 dígitos).

Validar una contraseña segura

<input type="password" pattern="(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}" title="Debe incluir una mayúscula, una minúscula, un número, un carácter especial y tener al menos 8 caracteres.">

(?=.*[A-Z]): Al menos una letra mayúscula.
(?=.*[a-z]): Al menos una letra minúscula.
(?=.*\d): Al menos un dígito.
(?=.*[@$!%*?&]): Al menos un carácter especial.
[A-Za-z\d@$!%*?&]{8,}: Longitud mínima de 8 caracteres.

Estilizando un formulario con CSS

Para que un formulario no solo sea funcional sino también atractivo, podemos usar CSS. Aquí tienes un ejemplo de cómo aplicar estilos básicos:

<body>
  <form action="/submit" method="POST" class="form">
    <div class="form__group">
      <label for="name" class="form__label">Nombre:</label>
      <input type="text" id="name" name="user_name" class="form__input" placeholder="Escribe tu nombre" required>
    </div>
    
    <div class="form__group">
      <label for="email" class="form__label">Correo electrónico:</label>
      <input type="email" id="email" name="user_email" class="form__input" placeholder="Escribe tu correo" required>
    </div>
    
    <div class="form__group">
      <label for="message" class="form__label">Mensaje:</label>
      <textarea id="message" name="user_message" class="form__textarea" placeholder="Tu mensaje..." rows="4" required></textarea>
    </div>
    
    <button type="submit" class="form__button">Enviar</button>
  </form>
</body>
</html>

/* Estilos generales */
body {
  font-family: Arial, sans-serif;
  background-color: #f1f1f1;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Bloque principal: form */
.form {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
}

/* Elementos del formulario */
.form__group {
  margin-bottom: 15px;
  width: 100%;
}

.form__label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 14px;
}

.form__input,
.form__textarea {
  width: calc(100% - 26px);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.form__input:focus,
.form__textarea:focus {
  border-color: #00a1e0;
  outline: none;
}

/* Botón del formulario */
.form__button {
  background-color: #000000;
  color: #d5a45c;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}

.form__button:hover {
  background-color: #191919;
}