Formularios en HTML

Los formularios permiten que las personas envíen información: registrarse, buscar, comprar, escribir un mensaje.

La estructura

<form action="/suscribirse" method="post">
  <label for="email">Tu email</label>
  <input id="email" name="email" type="email">
  <button type="submit">Suscribirme</button>
</form>

• <form> envuelve todos los campos.
• action es la dirección a la que se envían los datos.
• method suele ser get (los datos van en la URL, como en un buscador) o post (van ocultos, para datos privados).
• name es el nombre con el que el servidor recibe cada dato. Sin name, el campo no se envía.

Etiquetas: <label>

Cada campo necesita su <label>. El for del label debe coincidir con el id del campo:

<label for="telefono">Teléfono</label>
<input id="telefono" name="telefono" type="tel">

Así, al pulsar el texto se activa el campo, y los lectores de pantalla saben qué se pide en él. No sustituyas el label por un placeholder: el placeholder desaparece al escribir.

Tipos de <input>

type	Para qué sirve
text	Texto corto (es el valor por defecto)
email	Emails. Comprueba que haya una @
password	Contraseñas. Oculta lo que escribes
number	Números. En el móvil abre el teclado numérico
tel	Teléfonos
date	Fechas, con calendario
checkbox	Casillas que se marcan o desmarcan
radio	Elegir una opción de varias (mismo name)
file	Subir archivos

Otros campos

<!-- Texto largo -->
<textarea id="mensaje" name="mensaje" rows="4"></textarea>

<!-- Desplegable -->
<select id="ciudad" name="ciudad">
  <option value="">Elige una ciudad</option>
  <option value="santander">Santander</option>
  <option value="bilbao">Bilbao</option>
</select>

<!-- Opciones excluyentes: comparten name -->
<label><input type="radio" name="nivel" value="basico"> Básico</label>
<label><input type="radio" name="nivel" value="avanzado"> Avanzado</label>

name e id no son lo mismo

Es una confusión muy habitual, porque casi siempre se les da el mismo valor:

• id lo usa el navegador: para conectar el <label>, para CSS y para JavaScript. Debe ser único en la página.
• name lo usa el servidor: es el nombre con el que recibe el dato al enviar el formulario.

Como name acabará siendo el nombre de una variable en el código del servidor, escríbelo sin espacios, sin tildes y sin eñes: anio_nacimiento, no año de nacimiento. El texto que ve el usuario (el label o el value de una opción) sí puede llevar cualquier carácter.

Agrupar campos: <fieldset> y <legend>

En formularios largos, agrupa los campos relacionados. <legend> es el título del grupo:

<fieldset>
  <legend>Datos de envío</legend>
  <label for="calle">Calle</label>
  <input id="calle" name="calle">
  <label for="cp">Código postal</label>
  <input id="cp" name="cp">
</fieldset>

Es especialmente importante en grupos de radio buttons: el <legend> es la pregunta, y cada opción lleva su propio <label>:

<fieldset>
  <legend>¿Cómo prefieres que te contactemos?</legend>
  <input type="radio" id="c-email" name="contacto" value="email" checked>
  <label for="c-email">Email</label>
  <input type="radio" id="c-tel" name="contacto" value="telefono">
  <label for="c-tel">Teléfono</label>
</fieldset>

Con checked marcas la opción por defecto. Otra forma válida de asociar el texto es meter el input dentro del label, sin for ni id: <label><input type="checkbox" name="acepto"> Acepto las condiciones</label>.

Sugerencias al escribir: <datalist>

Es como un <select>, pero el usuario puede escribir un valor distinto a los propuestos:

<label for="lenguaje">Lenguaje favorito</label>
<input id="lenguaje" name="lenguaje" list="lenguajes">
<datalist id="lenguajes">
  <option value="JavaScript">
  <option value="Python">
  <option value="Java">
</datalist>

Botones

<button type="submit">Enviar</button>   <!-- envía el formulario (por defecto) -->
<button type="reset">Borrar todo</button> <!-- vacía los campos: úsalo con cuidado -->
<button type="button">Ver ayuda</button>  <!-- no hace nada por sí solo: para JavaScript -->

Un <button> dentro de un formulario envía el formulario por defecto. Si es un botón para otra cosa (abrir una ayuda, mostrar la contraseña…), pon type="button" o el formulario se enviará sin querer.

Verás también <input type="submit" value="Enviar">: hace lo mismo, pero <button> es más flexible porque puede contener iconos y otros elementos.

Otros atributos útiles

• placeholder="ej. ana@correo.com": texto de ejemplo dentro del campo. Complementa al label, no lo sustituye.
• value="España": valor inicial.
• autocomplete="email": ayuda al navegador a rellenar el campo automáticamente (name, email, tel, street-address, postal-code, current-password, new-password…).
• disabled: el campo no se puede usar y no se envía.
• readonly: el campo no se puede editar, pero sí se envía.
• multiple: permite elegir varios archivos en type="file" o varias opciones en un <select>.

Validación sin JavaScript

HTML puede comprobar los datos antes de enviarlos:

• required: el campo es obligatorio.
• minlength="8" / maxlength="20": longitud mínima y máxima del texto.
• min="18" / max="99": valor mínimo y máximo en números y fechas.
• pattern="[0-9]{5}": el texto debe cumplir un patrón (aquí, un código postal de 5 cifras).

<input id="cp" name="cp" required pattern="[0-9]{5}">

La validación del navegador ayuda a quien rellena el formulario, pero no es seguridad: cualquiera puede saltársela. El servidor siempre tiene que volver a comprobar los datos.

<label ___="email">Email</label>
<input id="email" type="email">