Formularios (introducción)
Un formulario es cualquier grupo de campos donde alguien escribe información: un buscador, un formulario de contacto, un "suscríbete al boletín"... Seguro que has rellenado cientos en tu vida sin saber que por dentro son HTML. Aquí veremos solo lo básico para reconocerlo y crear uno sencillo.
<label> es la etiqueta que
dice qué escribir, e <input> es el espacio en
blanco.
En este módulo vas a...
- Entender para qué sirve la etiqueta
<form>. - Crear campos de texto y botones.
- Asociar correctamente una etiqueta
<label>a su campo.
La etiqueta <form>
Todo formulario empieza envolviendo sus campos en una etiqueta <form>. Por ahora, para nuestras actividades, no necesitamos que el formulario "funcione" de verdad (eso requeriría un servidor); nos basta con que esté bien construido en HTML.
<form>
...campos aquí dentro...
</form>Campos de texto: <input>
<input> crea un campo donde
escribir. El atributo type decide qué tipo de dato
se espera.
| type | ¿Para qué? |
|---|---|
text | Texto normal (nombre, asunto...) |
email | Correo electrónico (avisa si falta la @) |
password | Contraseña (oculta los caracteres) |
submit | Botón que envía el formulario |
La etiqueta <label>: no es opcional
Un <label> es el texto que explica qué debe
escribirse en un campo (por ejemplo, "Nombre"). Debe estar
asociado al campo mediante for e
id, que deben coincidir exactamente.
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre">
Fíjate: el valor de for en la etiqueta
<label> ("nombre") es exactamente igual que el
valor de id en la etiqueta <input>
("nombre"). Es ese "apretón de manos" el que los conecta.
Cuando for e id coinciden, al pulsar
sobre el texto "Nombre" el cursor salta directamente al campo
(pruébalo en el ejercicio de abajo). Además, los lectores de
pantalla anuncian ese texto al llegar al campo. Sin
<label>, alguien que no ve la pantalla no
sabría qué escribir.
Un formulario sencillo completo
<form>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre">
<label for="correo">Correo electrónico</label>
<input type="email" id="correo" name="correo">
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje"></textarea>
<input type="submit" value="Enviar">
</form><textarea> es como un <input type="text"> pero para textos largos, de varias líneas.
Practica: formulario de suscripción
Añade el <label> que falta para el campo de correo (fíjate en que for e id coincidan) y un botón para enviar.