Curso de HTML / Elegir input para correo, números, fechas y opciones

El atributo type de input indica qué clase de dato o elección representa el campo. Un correo, una cantidad numérica, una fecha y una opción independiente requieren comportamientos distintos. Elige el tipo por el significado del dato y la decisión del usuario, no solo por el aspecto del control.

Distinguir un dato de una cantidad

Coloca el siguiente fragmento en el cuerpo de un documento HTML y prueba los tres campos:

<form method="get">
  <p><label for="email">Email</label>
     <input id="email" name="email" type="email"></p>
  <p><label for="quantity">Quantity</label>
     <input id="quantity" name="quantity" type="number" min="1"></p>
  <p><label for="visit-date">Visit date</label>
     <input id="visit-date" name="date" type="date"></p>
  <button type="submit">Check</button>
</form>

email permite comprobar un formato básico de dirección y puede ofrecer un teclado adecuado en algunos dispositivos. No demuestra que el buzón exista. number sirve para cantidades sobre las que tiene sentido calcular y puede aplicar un mínimo. El calendario visible de date depende del navegador, del sistema y de su configuración regional.

Un código postal puede empezar por ceros y un teléfono puede contener prefijos o signos. Aunque contengan dígitos, no son cantidades para calcular: considera text o tel. El tipo por sí solo tampoco establece todas las reglas que necesita la aplicación.

Elegir entre casillas y botones de opción

Una casilla checkbox representa una decisión independiente, como aceptar recibir noticias. Los botones radio con el mismo name forman una elección excluyente:

<fieldset>
  <legend>Updates</legend>
  <label><input type="checkbox" name="news" value="yes"> Receive news</label>
</fieldset>
<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

Pon estos grupos dentro de un formulario con botón de envío. Al elegir Email, se desmarca Phone porque ambos utilizan name="contact". value determina el valor enviado, que no tiene por qué ser idéntico a la etiqueta visible. Una casilla sin marcar no aporta una entrada con un “no” automático.

Si la aplicación debe diferenciar “no” de “sin respuesta”, diseña esa elección de forma explícita y trátala en el servidor. El fieldset identifica una pregunta, pero no sustituye el nombre común de los radios; fieldset, legend y autocomplete desarrolla esa separación.

Probar varios tipos en un documento completo

Guarda este código como visit.html. Utiliza una dirección ficticia como name@example.com y evita datos personales reales.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visit input-types practice</title>
</head>
<body>
  <h1>Practice a visit request</h1>
  <form id="visit-form" method="get">
    <p><label for="visit-email">Email</label>
      <input id="visit-email" name="email" type="email" required></p>
    <p><label for="visit-day">Visit date</label>
      <input id="visit-day" name="date" type="date" required></p>
    <p><label for="visit-quantity">Quantity</label>
      <input id="visit-quantity" name="quantity" type="number" min="1" step="1" value="1"></p>
    <fieldset>
      <legend>Contact method</legend>
      <label><input type="radio" name="contact" value="email" required> Email</label>
      <label><input type="radio" name="contact" value="phone"> Phone</label>
    </fieldset>
    <p><label><input type="checkbox" name="news" value="yes"> News</label></p>
    <button type="submit">Inspect entered values</button>
  </form>
</body>
</html>

El correo y la fecha son obligatorios. El grupo de contacto también necesita una selección; la casilla News es opcional. Comprueba un intento con el grupo sin responder y otro con Email seleccionado. Para la cantidad, prueba el valor inicial 1 y un valor fuera del mínimo.

Selecciona 20 de mayo de 2030 y observa el valor del input de fecha en las herramientas de desarrollo: utiliza la forma 2030-05-20, aunque el calendario visible presente el día y el mes de otra manera. La referencia del input de fecha de MDN distingue presentación y valor.

Comparar lo que se muestra con lo que se envía

En Console puedes construir la lista de datos del formulario sin enviarlos:

Array.from(new FormData(document.getElementById("visit-form")).entries())

Activa y desactiva News y compara las entradas. Si está sin marcar, no aparece su clave; si eliges Email, el grupo aporta contact=email. El valor de fecha conserva el formato normalizado. La creación de esa lista no ejecuta por sí misma todas las comprobaciones del envío interactivo.

Para examinar la petición y distinguir un formulario de un manejador del servidor, utiliza la práctica de GET, POST y FormData. Un resultado con formato correcto no demuestra que exista una reserva ni que un servidor haya aceptado los datos.

Añadir solo las restricciones necesarias

Cada campo sigue necesitando un nombre comprensible y, cuando deba enviarse, un name. Un input de correo puede quedar vacío si no tiene required. El rango de una cantidad, su incremento y la obligación de completarla también son condiciones separadas.

Prueba límites y valores vacíos según la validación con required, min, max y step. Repite las comprobaciones importantes en el servidor: los tipos de HTML ayudan a introducir datos, pero no garantizan su validez para el negocio. La referencia general de input describe las condiciones aplicables a cada tipo.