#09 Formularios#09 Formularios

Para qué sirven los formularios

Cada vez que inicias sesión, buscas en Google, compras algo o te apuntas a un boletín, estás usando un formulario. Es la forma en que una web te pide datos.

Con HTML construyes el formulario: los campos, las etiquetas y el botón. Lo que pasa con los datos al enviarlos (guardarlos, mandar un correo…) lo hace un programa en el servidor, que no es parte de este curso. Aun así, verás que HTML ya hace mucho trabajo por su cuenta.

Las piezas básicas

1
2
3
4
5
6

• <form> envuelve todo el formulario.
• <label> es la etiqueta del campo: el texto que dice qué hay que escribir.
• <input> es el campo donde se escribe. Es un elemento vacío.
• <button type="submit"> es el botón que envía el formulario.

for e id: etiqueta y campo, conectados

El for del <label> debe coincidir con el id del <input>. Así quedan conectados:

• Al hacer clic en la etiqueta, el cursor salta al campo (pruébalo en el ejemplo: es muy útil en el móvil, donde los campos son pequeños).
• Los lectores de pantalla leen «Tu nombre, campo de texto» al llegar al campo.

name: el nombre del dato

El atributo name es el nombre con el que se envía el dato. Si un campo no tiene name, su valor no se envía. Suele coincidir con el id, pero cada uno tiene su función: id conecta con la etiqueta y name identifica el dato al enviarlo.

Tipos de campo

El atributo type de <input> cambia por completo el campo. Elegir bien el tipo ayuda muchísimo: el móvil muestra el teclado adecuado y el navegador comprueba que el dato tenga sentido.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Elegir opciones

Casillas: checkbox

Para marcar varias opciones (o ninguna). Aquí el <input> va dentro del <label>, otra forma válida de conectarlos sin for ni id:

1
2
3
4
5
6

• value es lo que se envía si la casilla está marcada.
• checked la deja marcada desde el principio.

Botones de opción: radio

Para elegir solo una. Todos los radio de un grupo deben tener el mismo name: así el navegador sabe que van juntos y, al marcar uno, desmarca el resto. Se agrupan con <fieldset> y el título del grupo va en <legend>:

1
2
3
4
5
6
7
8

Listas desplegables: <select>

Para elegir una opción de una lista larga, sin ocupar mucho sitio:

1
2
3
4
5
6
7
8
9

Texto largo: <textarea>

Para mensajes de varias líneas. A diferencia de <input>, sí lleva etiqueta de cierre:

<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="5"></textarea>

Validación sin programar

HTML puede comprobar los datos antes de enviarlos, sin una sola línea de programación:

Prueba a pulsar «Crear cuenta» con los campos vacíos o mal rellenados:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

A dónde van los datos

<form> tiene dos atributos para decir qué hacer al enviar:

<form action="https://ejemplo.com/contacto" method="post">

• action: la dirección del programa que recibirá los datos.
• method: cómo se envían. get los pone en la dirección (lo que hace un buscador); post los envía «por dentro» (lo normal para datos personales).

Mientras aprendes, puedes dejarlos sin poner. Cuando hagas webs reales, hay servicios como Formspree o Netlify Forms que te dan una dirección de action y te reenvían los mensajes por correo, sin necesidad de programar el servidor.

Errores típicos

• Campos sin <label>, o con la etiqueta sin conectar (for e id distintos).
• Usar placeholder como única etiqueta.
• Olvidar name: el dato no se envía.
• Botones de opción con name distintos: dejan marcar varios.
• Escribir <textarea/> o <textarea> sin cierre: el resto de la página acaba dentro del campo.
• Usar type="text" para todo, perdiendo la ayuda del teclado móvil y la validación.

Ejercicios

Ejercicio 1: etiqueta cada campo (fácil)

Este formulario no tiene etiquetas. Añade un <label> conectado a cada campo y pon el tipo correcto en el del correo.

1
2
3
4
5

<form>
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre">
  <label for="correo">Correo</label>
  <input type="email" id="correo" name="correo">
  <button type="submit">Suscribirme</button>
</form>

Ejercicio 2: formulario de contacto (medio)

Crea un formulario de contacto con: nombre (obligatorio), correo (obligatorio y con el tipo adecuado), un desplegable «Motivo» con tres opciones, un mensaje de varias líneas (obligatorio, mínimo 10 caracteres) y un botón «Enviar».

1

<form>
  <p>
    <label for="nombre">Nombre</label><br>
    <input type="text" id="nombre" name="nombre" required>
  </p>
  <p>
    <label for="correo">Correo</label><br>
    <input type="email" id="correo" name="correo" required>
  </p>
  <p>
    <label for="motivo">Motivo</label><br>
    <select id="motivo" name="motivo">
      <option value="duda">Tengo una duda</option>
      <option value="presupuesto">Quiero un presupuesto</option>
      <option value="otro">Otro</option>
    </select>
  </p>
  <p>
    <label for="mensaje">Mensaje</label><br>
    <textarea id="mensaje" name="mensaje" rows="5" required minlength="10"></textarea>
  </p>
  <button type="submit">Enviar</button>
</form>

Ejercicio 3: la encuesta (reto)

Haz una encuesta de una pizzería: tamaño (pequeña, mediana o familiar, solo una), ingredientes extra (queso, champiñones, aceitunas; se pueden elegir varios), fecha de entrega y un botón «Pedir». Agrupa cada pregunta con <fieldset> y <legend>.

1

<form>
  <fieldset>
    <legend>Tamaño</legend>
    <label><input type="radio" name="tamano" value="pequena" required> Pequeña</label>
    <label><input type="radio" name="tamano" value="mediana"> Mediana</label>
    <label><input type="radio" name="tamano" value="familiar"> Familiar</label>
  </fieldset>
  <fieldset>
    <legend>Ingredientes extra</legend>
    <label><input type="checkbox" name="extra" value="queso"> Queso</label>
    <label><input type="checkbox" name="extra" value="champinones"> Champiñones</label>
    <label><input type="checkbox" name="extra" value="aceitunas"> Aceitunas</label>
  </fieldset>
  <p>
    <label for="entrega">Fecha de entrega</label>
    <input type="date" id="entrega" name="entrega" required>
  </p>
  <button type="submit">Pedir</button>
</form>

Ficha resumen

• <form> envuelve el formulario; <button type="submit"> lo envía.
• Cada campo lleva su <label>, conectado con for = id (o con el campo dentro de la etiqueta).
• name es el nombre con el que se envía el dato.
• Elige el type adecuado: email, password, number, tel, date, checkbox, radio…
• checkbox = varias opciones; radio con el mismo name = una sola. <select> = desplegable. <textarea> = texto largo.
• Validación: required, minlength, maxlength, min, max. Es una ayuda, no seguridad.

Glosario