En uno de los ejercicios de formularios que hicimos en clase, el enunciado pedía usar varios tipos de input distintos a propósito — no solo el típico campo de texto. Fue la primera vez que vi que el navegador validaba solo, sin ninguna línea de JavaScript, si escribías algo que no parecía un email de verdad. Ahí se nota la diferencia entre saber que existe type="text" y conocer de verdad todo lo que ofrece la etiqueta <input>.

Los atributos que acompañan a cualquier input

Antes de la lista de tipos, conviene tener claro qué atributos se repiten en casi todos ellos:

  • name: el atributo más importante — es el nombre que se envía al servidor junto al valor que ha introducido el usuario. Sin name, ese campo no se manda.
  • id: identifica el control de forma única en la página. Se recomienda ponerlo siempre porque tanto JavaScript como la etiqueta <label> lo usan para referenciar el campo.
  • value: da un valor inicial al campo, antes de que el usuario escriba nada.
  • placeholder: un texto de ayuda dentro del campo que desaparece en cuanto el usuario hace clic.
  • required: hace obligatorio ese campo antes de poder enviar el formulario.
  • maxlength: límite máximo de caracteres.

La lista completa de tipos

El atributo type de <input> admite bastantes más valores de los que se suelen usar en la práctica:

button · checkbox · color · date · datetime-local · email · file
hidden · image · month · number · password · radio · range · reset
search · submit · tel · text · time · url · week

Algunos merecen explicación aparte porque hacen algo más que “recoger texto”:

  • email: valida automáticamente que lo escrito tenga forma de dirección de correo. Si no la tiene, el navegador muestra un aviso de error sin que hayas escrito ni una línea de JavaScript.
  • radio: para elegir una opción entre varias. Todas las opciones del mismo grupo deben compartir el mismo name — es precisamente ese name común lo que le dice al navegador que son mutuamente excluyentes, y solo cambia el value (y el id) de cada una.
  • checkbox: al contrario que radio, permite elegir varias opciones a la vez, y cada casilla suele tener un name distinto porque son independientes entre sí.
  • date, time, month, week: el navegador muestra un selector nativo (calendario, reloj) en vez de dejar que el usuario escriba el formato a mano y se equivoque.
  • range: un control deslizante para elegir un número dentro de un rango, en vez de escribirlo.
  • color: abre el selector de color del sistema operativo.
  • file: permite elegir un archivo del equipo. Es el que obliga a que el formulario use enctype="multipart/form-data" si quieres que el archivo llegue de verdad al servidor.

Los tres tipos que HTML5 desaconseja

Aquí está el dato que más me sorprendió del ejercicio: no todos los tipos de input están recomendados hoy, aunque sigan funcionando perfectamente. HTML5 recomienda sustituir estos tres por la etiqueta <button>:

En vez de…Usa…
<input type="submit"><button type="submit">Enviar</button>
<input type="reset"><button type="reset">Limpiar datos</button>
<input type="button"><button type="button">...</button>
<input type="image"><button type="submit"> con una imagen dentro

El motivo es sencillo: <button> tiene apertura y cierre, así que puede contener cualquier cosa dentro — texto con formato, un icono, incluso una imagen — mientras que <input> solo puede mostrar el texto plano de su atributo value. Si quieres un botón “Enviar” con un icono al lado, con <input> no puedes; con <button>Enviar <strong>ahora</strong></button> sí.

Atributos que solo tienen sentido en ciertos tipos

Algunos atributos van más allá de los básicos (name, id, value…) y solo aplican a tipos concretos de input. Con type="number" o type="range", por ejemplo, puedes acotar el rango de valores válidos directamente en HTML, sin JavaScript:

<input type="number" name="cantidad" min="1" max="10" step="1">
<input type="range" name="volumen" min="0" max="100" value="50">
  • min / max: límites inferior y superior permitidos.
  • step: de cuánto en cuánto puede subir o bajar el valor (por ejemplo, step="0.5" para permitir decimales de medio en medio).

Con type="text", en cambio, estos atributos no tienen ningún efecto — tiene sentido, porque un campo de texto libre no tiene “valor máximo” en el sentido numérico. Es un ejemplo más de por qué elegir bien el type no es solo estético: cambia qué atributos puedes aprovechar y qué validación te regala el navegador sin escribir una sola línea de JavaScript.

Agrupar controles con fieldset

Cuando un formulario tiene varios campos relacionados entre sí (por ejemplo, varios radio para elegir sexo, o los campos de una misma dirección), la etiqueta <fieldset> los agrupa visualmente con un marco, y <legend> le pone un título a ese grupo:

<fieldset>
  <legend>Indique su sexo:</legend>
  <input type="radio" id="hombre" name="sexo" value="H">
  <label for="hombre">Hombre</label><br/>
  <input type="radio" id="mujer" name="sexo" value="M">
  <label for="mujer">Mujer</label><br/>
</fieldset>

Pon a prueba lo que has entendido

¿Por qué HTML5 recomienda usar <button type="submit"> en vez de <input type="submit">?

Resumen rápido

HTML5 ofrece más de veinte tipos de input, varios con validación o controles nativos del navegador (email, date, range, color) sin necesitar JavaScript. Los tipos submit, reset, button e image de <input> siguen funcionando, pero HTML5 recomienda sustituirlos por <button>, que admite contenido más rico dentro. Una vez tienes claros los controles, lo siguiente es cómo viajan esos datos cuando el usuario envía el formulario — que es justo lo que ves en GET vs POST en formularios HTML.