Formularios: input, label, select, textarea, button

Construye formularios completos, accesibles y listos para producción.

10 min · 3 preguntas

Un formulario es la puerta de entrada a casi toda interacción en la web: registros, búsquedas, pagos, contacto. Ya sabes cómo se estructura una página; ahora es momento de ponerse manos a la obra. Empieza memorizando la regla de oro: cada campo tiene un atributo name, porque eso es lo que se envía al servidor, no el id.

<form action="/subscribe" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Sign up</button>
</form>

Fíjate en la pareja label / input: el atributo for de la etiqueta apunta al id del campo. Este vínculo es esencial para los lectores de pantalla. Observa también el type="email": el navegador valida el formato gratis y muestra el teclado adecuado en el móvil. Otros tipos resultan útiles a diario: number, date, password, checkbox, radio.

<label for="country">Country</label>
<select id="country" name="country" required>
  <option value="">-- Choose a country --</option>
  <option value="fr">France</option>
  <option value="ca">Canada</option>
</select>

<label for="message">Your message</label>
<textarea id="message" name="message" rows="5"></textarea>

El último protagonista: button. Acepta tres tipos: submit (envía el formulario), reset (borra los campos) y button (no hace nada por sí solo: conéctalo con JavaScript). Ejercicio mental: en un formulario de artículo de blog, añades un botón "Vista previa" que no debe enviar los datos. ¿Qué tipo le das? Respuesta: type="button".

<form action="/contact" method="post">
  <label for="topic">Subject</label>
  <select id="topic" name="topic">
    <option value="support">Technical support</option>
    <option value="billing">Billing</option>
  </select>

  <button type="submit">Send</button>
  <button type="button" id="preview-btn">
    Preview
  </button>
</form>

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué atributo vincula una label a su campo de formulario?
   • El atributo for de la label, que apunta al id del campo
   • El atributo name, idéntico en la label y en el campo
   • El atributo value de la label
   • El atributo placeholder del campo
2. Dentro de un formulario, ¿cuál es el tipo por defecto de un button sin atributo type?
   • submit
   • button
   • reset
3. ¿Qué elemento usas para introducir texto largo y de varias líneas?
   • input con type="text"
   • textarea
   • select
   • output