Formularios HTML5: Lección Técnica Definitiva

<!-- Un formulario define una zona interactiva para capturar datos -->
<form>
  <!-- Aquí dentro vivirán todos los campos -->
</form>

<!-- action indica la URL que recibirá los datos -->
<form action="/api/save"
  <!-- Inputs y botones van aquí -->
</form>

<!-- GET envía los datos visibles en la URL -->
<form method="GET">
</form>

<!-- POST envía los datos de forma segura en el body -->
<form method="POST">
</form>

<!-- Este input SÍ se envía porque tiene name -->
<input type="text" name="usuario">

<!-- Este input NO se envía porque no tiene name -->
<input type="text" placeholder="Nombre">

<!-- Este valor NO se envía -->
<input type="text" name="codigo" value="ABC" disabled>

<!-- Este valor SÍ se envía -->
<input type="text" name="id" value="user_123" readonly>

<!-- Checkbox solo se envía si está marcado -->
<input type="checkbox" name="terminos" checked>

<!-- Campo de texto libre -->
<input type="text" name="user">

<!-- Campo de contraseña: oculta los caracteres -->
<input type="password" name="pass">

<!-- Campo email: valida formato y mejora UX móvil -->
<input type="email" name="mail">

<!-- Teclado numérico para teléfonos -->
<input type="tel" name="telefono">

<!-- Selector de fecha nativo del sistema -->
<input type="date" name="fecha_nacimiento">

<!-- rows define la cantidad de líneas visibles -->
<textarea name="bio" rows="5" placeholder="Cuéntanos sobre ti...">
</textarea>

<!-- Radios con mismo name forman un grupo excluyente -->
<input type="radio" name="envio" value="express"> Rápido
<input type="radio" name="envio" value="normal"> Normal

<!-- Checkbox permite selección múltiple -->
<input type="checkbox" name="newsletter" value="si"> Suscribirme

<!-- select agrupa opciones -->
<select name="pais">
  <!-- option representa cada ítem -->
  <option value="arg">Argentina</option>
  <option value="col" selected>Colombia</option>
  <option value="mex">México</option>
</select>

<!-- Valor inicial de un input -->
<input type="text" value="Texto por defecto">

<!-- Texto visible en un botón -->
<input type="submit" value="Enviar">

<!-- Valor técnico enviado al backend -->
<input type="checkbox" value="acepta">

<!-- Label: descripción real del campo -->
<label for="email">Correo electrónico</label>

<!-- Placeholder: ayuda visual dentro del input -->
<input type="email" id="email" name="email" placeholder="usuario@email.com">

<!-- Agrupa campos relacionados -->
<fieldset>
  <legend>Datos de Facturación</legend>
  <input type="text" placeholder="Dirección">
  <input type="text" placeholder="Ciudad">
</fieldset>

<!-- Campo obligatorio con mínimo -->
<input type="number" min="18" required>

<!-- pattern valida formato con RegEx -->
<input type="text" pattern="[A-Z]+" title="Solo mayúsculas">

<!-- Envía el formulario -->
<button type="submit">Enviar</button>

<!-- Limpia todos los campos -->
<button type="reset">Borrar</button>

<!-- Botón genérico para JavaScript -->
<button type="button">Acción</button>

<form>

  <!-- Botón que envía el formulario -->
  <input type="submit" value="Enviar formulario">

  <!-- Botón que limpia todos los campos -->
  <input type="reset" value="Limpiar">

  <!-- Botón sin acción por defecto -->
  <input type="button" value="Sin acción">

</form>

<!-- multipart/form-data permite enviar archivos -->
<form method="POST" enctype="multipart/form-data">
  <!-- Input para seleccionar un archivo -->
  <input type="file" name="avatar">
</form>