Formularios básicos

Haz clic en la palabra Email junto a un campo de formulario bien hecho y el cursor salta dentro del cuadro. Ese pequeño detalle es el elemento label haciendo su trabajo.

Qué hace un formulario

Los cuadros de búsqueda, las páginas de registro y las pantallas de pago son formularios. Un elemento <form> agrupa los controles, y cuando quien visita lo envía, el navegador manda el name de cada control junto con su valor a la dirección que está en el atributo action del formulario. El atributo method dice cómo: get pone los datos en la dirección, lo que sirve para búsquedas que quizá guardes en marcadores, mientras que post los manda en el cuerpo de la solicitud, lo que sirve para todo lo que cambia datos, como un pedido. HTML construye el formulario; un programa en el servidor decide qué hacer con lo que llega.

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

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

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

Todo control necesita una etiqueta

El elemento <label> le pone nombre a un control. Conecta los dos dándole al input un id y al label un atributo for que coincida, o poniendo el input dentro del label. La conexión hace dos cosas. Los lectores de pantalla leen la etiqueta cuando el campo recibe el foco, así que el usuario oye Email, edit text en lugar de solo edit text. Y hacer clic en la etiqueta pone el foco en el campo o marca la casilla, lo que les da a todos, sobre todo a quienes usan un teléfono, un objetivo más grande. Un placeholder (texto gris de ayuda dentro del cuadro) no es una etiqueta: desaparece en cuanto escribes, suele tener poco contraste y algunas tecnologías de asistencia lo ignoran.

Tipos de input

El atributo type de <input> cambia el control. text es el cuadro de una línea por defecto. email, tel y url se ven parecidos, pero muestran el teclado adecuado en los teléfonos, y el navegador comprueba que una dirección de correo tenga la forma correcta. number acepta dígitos y puede tener min y max. password oculta lo que escribes, date ofrece un calendario, y checkbox y radio son casillas para marcar. Para textos más largos, usa <textarea>, y para elegir de una lista, <select> con elementos <option> dentro.

Agrupar opciones

Los botones de opción que pertenecen a una misma pregunta comparten el mismo name, y solo se puede elegir uno a la vez. Envuelve el grupo en <fieldset> y pon la pregunta en <legend>. Así un lector de pantalla lee la pregunta junto con cada opción: Loaf size, Small, radio button, 1 of 2. Cada botón de opción sigue teniendo su propia etiqueta.

Botones y comprobaciones integradas

Un <button> dentro de un formulario lo envía por defecto; escribir type="submit" lo deja claro, y type="button" crea un botón que no hace nada hasta que JavaScript le da una tarea. Antes de enviar, el navegador puede comprobar los campos por ti. required detiene el formulario si el campo está vacío, type="email" rechaza un texto sin @, y minlength, min y max fijan límites. Estas comprobaciones ayudan a quien visita a corregir errores pronto, pero se ejecutan en su navegador y se pueden saltar, así que el servidor debe volver a comprobar los datos. El atributo autocomplete, con valores como email o name, permite que el navegador complete datos guardados, lo que ahorra escribir a todos y ayuda especialmente a las personas con dificultades motrices o de memoria.