Marc Semper Lloret
← HTML: estructura y contenido de la Web

Sesión 13 · Semana 5

Formularios · recoger información

Hoy · Hoja de ruta

  1. 1. Aprende: Qué une un label con su campo, en qué se diferencian id y name, y por qué el botón importa.
  2. 2. Haz: Construye el formulario base de tu página de contacto.
  3. 3. Comprueba: Al hacer clic en el texto de cada etiqueta, el cursor entra en su campo.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué pregunta permite decidir si unos datos necesitan una tabla?
  2. ¿Qué elemento usarías para una acción y cuál para ir a otra página?
  3. Marca semánticamente: título, navegación, noticia independiente y lista de características.

El formulario mínimo

<form>
    <label for="nombre">Nombre</label>

    <input id="nombre" name="nombre" type="text">

    <button type="submit">Enviar</button>
</form>
Vista previaEtiqueta, campo y acción

Esta vista es ilustrativa. Al ejecutar el código real, pulsar «Nombre» lleva el foco al campo porque el for del label coincide con su id.

Tres piezas: el contenedor form, los controles, y el botón que lo envía. Lo que casi siempre se hace mal es la relación entre cada campo y su etiqueta.

label

<label for="nombre">Nombre</label>
<input id="nombre" name="nombre" type="text">

Pruébalo: haz clic sobre la palabra Nombre. El navegador coloca el foco en el campo.

Etiqueta asociada

Un <label for="x"> unido a un <input id="x">. El texto no queda simplemente situado junto al campo, sino que pertenece a él.

Qué se gana asociándola:

  1. Un lector de pantalla anuncia el campo con su nombre. Sin label, anuncia «campo de texto» y nada más.
  2. El área de clic crece: pulsar sobre el texto lleva el cursor al campo. Importa mucho en pantallas pequeñas y en casillas de verificación.
  3. El navegador puede autocompletar mejor.

id y name no son lo mismo

<input id="nombre" name="nombre">

Se escriben casi siempre iguales, y por eso se confunden.

Atributo Para quién es Qué hace
id Para el documento Identifica el campo dentro de la página; es a lo que apunta el for
name Para el servidor Es el nombre con el que el dato viaja al enviarse

Un campo sin name se rellena perfectamente y su dato no llega a ninguna parte. Cuando estudies servidores verás por qué.

button

<button type="submit">Enviar</button>

No conviertas un texto o una imagen en un falso botón. Si algo es una acción, empieza por el elemento diseñado para representar una acción. Ya lo viste en el Reto 3: un <div> no se alcanza con Tab, no se activa con Enter y no se anuncia como botón.

El placeholder no es una etiqueta

El texto gris dentro de un campo desaparece en cuanto empiezas a escribir. Quien interrumpe la cumplimentación de un formulario largo encuentra un campo relleno sin indicación de qué contenía. Quien emplea un lector de pantalla puede no oírlo nunca.

Sirve para dar un ejemplo de formato junto a una etiqueta —placeholder="nombre@example.com"—, nunca para sustituirla.

Tarea 12 · Fase A · El formulario base

En contacto.html, escribe un formulario con:

  • Nombre completo.
  • Correo electrónico.
  • Asunto.
  • Mensaje, con <textarea rows="6">.
  • Botón de envío.

Cada campo con su id y su name, y cada label con su for.

Comprobación inmediata: haz clic sobre el texto de cada etiqueta, no sobre el campo. Si el cursor se desplaza al campo correspondiente, la asociación es correcta. Si no se produce ningún efecto, ese for no coincide con ningún id.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué diferencia hay entre id y name?
  2. Da dos razones para asociar la etiqueta con for.
  3. ¿Por qué un placeholder no sustituye a un label?
Ver respuestas

1 · id identifica el campo dentro del documento y es a lo que apunta el for; name es el nombre con el que el dato se envía al servidor.

2 · El lector de pantalla anuncia el campo por su nombre, y pulsar el texto lleva el foco al campo. Vale también el autocompletado.

3 · Porque desaparece al escribir y deja el campo sin identificar.