Formularios en HTML y CSS: lo imprescindible

Los formularios son la vía principal de interacción entre el usuario y una aplicación web. Aunque existen librerías y frameworks que los abstraen, si no entiendes cómo funcionan los formularios en HTML y CSS a nivel esencial, más tarde o más temprano lo acabarás pagando.

Estructura básica de un formulario

<form action="/send" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <button type="submit">Send</button>
</form>

Puntos clave:

• action: URL a la que se enviarán los datos.
• method: suele ser get o post.
• name: es la clave que recibe el backend. Sin name, ese dato no se envía.
• required: valida en el navegador (naive).

Tipos comunes de inputs

<input type="text" />      <!-- Free text -->
<input type="email" />     <!-- Email -->
<input type="password" />  <!-- Password (hidden) -->
<input type="number" />    <!-- Numbers -->
<input type="checkbox" />  <!-- True/False -->
<input type="radio" />     <!-- Only onw option -->
<input type="file" />      <!-- Native file upload -->
<input type="hidden" />    <!-- Hidden, ideal for internal metadata -->

Y también

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<textarea></textarea>

Asociar label e input

<label for="name">Your name</label>
<input id="name" type="text" name="name" />

Esto mejora la accesibilidad y permite hacer clic sobre el texto del label.

Validación básica en HTML

<input type="email" required minlength="5" />

• required: campo obligatorio.
• minlength / maxlength: longitud permitida.
• pattern: expresión regular.
• type="email" valida formato.

No necesitas JavaScript para una primera capa de validación básica.

Aplicar estilos CSS a formularios

input, select, textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}

input:focus {
  outline: 2px solid blue;
}

input:invalid {
  border-color: red;
}

Puedes usar pseudoclases como :has, :focus, :valid, :invalid para mejorar la experiencia sin JavaScript.

Agrupar inputs con fieldset

<fieldset>
  <legend>Personal information</legend>
  <!-- inputs here -->
</fieldset>

Agrupa visual y semánticamente los campos relacionados.

Enviar formularios (y prevenirlo)

Cuando haces submit, el navegador recarga la página. Para manejarlo desde JS:

document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault();
  // do something with form data
});

En resumen

• Los formularios nativos de HTML siguen siendo esenciales.
• Aprende los atributos clave: name, type, required, for.
• Usa validación nativa cuando puedas, como primera medida.

Enlaces útiles

• MDN: Form basics
• Form field validation
• HTML input types