Formularios

Una página puede recibir información

Hasta ahora nuestras páginas mostraban información. Un formulario permite que el visitante escriba datos — su nombre, un mensaje, lo que sea — y los envíe. Todo formulario se envuelve en <form>:

<form>
    ...
</form>

Un campo de texto, bien asociado

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

No alcanza con escribir <input> solo — el texto que identifica un campo (<label>) tiene que estar asociado al control correspondiente. Esa asociación se hace con dos atributos que tienen que coincidir exactamente: el for del label y el id del input.

¿Por qué importa? Sin esa asociación, hacer clic en el texto "Nombre:" no hace nada. Con ella, hacer clic en el label pone el foco directo en el campo — y un lector de pantalla puede anunciar correctamente qué es cada campo.

Tipos de campo

El atributo type de <input> cambia tanto el comportamiento como la validación:

<input type="text" id="nombre">
<input type="email" id="correo">

type="email" hace que el navegador avise automáticamente si lo que se escribió no tiene forma de correo (falta el @, por ejemplo) — sin que haga falta escribir ningún código extra para eso.

Para un mensaje más largo, en vez de <input> se usa <textarea></textarea>, que sí tiene etiqueta de cierre y permite varias líneas.

El botón de envío

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

type="submit" es lo que convierte al botón en "el botón que envía este formulario" — al hacer clic, el navegador junta todos los campos y los manda.