Formularios HTML

Los formularios son la principal forma en que los usuarios interactúan con una aplicación web: registros, inicios de sesión, búsquedas, compras, comentarios. La etiqueta form agrupa los campos y define a dónde se envían los datos (action) y con qué método HTTP (method: GET o POST).

El tipo de input define cómo se muestra y valida el campo: text, email, password, number, date, checkbox, radio, file. Elegir el tipo correcto activa la validación automática del navegador y en móviles muestra el teclado adecuado (numérico para number, arroba para email). El atributo label asociado mejora la accesibilidad.

<form action="/enviar" method="POST">
  <!-- Texto -->
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" placeholder="Tu nombre" required>
  
  <!-- Email -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <!-- Contraseña -->
  <input type="password" name="clave" minlength="8">
  
  <!-- Número -->
  <input type="number" name="edad" min="18" max="100">
  
  <!-- Selector -->
  <select name="pais">
    <option value="mx">México</option>
    <option value="co">Colombia</option>
    <option value="es">España</option>
  </select>
  
  <!-- Área de texto -->
  <textarea name="mensaje" rows="4" cols="50"></textarea>
  
  <!-- Checkbox -->
  <input type="checkbox" name="terminos" id="terminos">
  <label for="terminos">Acepto los términos</label>
  
  <!-- Botón de envío -->
  <button type="submit">Enviar formulario</button>
</form>