Tutorial: formularios HTML para pedirle datos al usuario

Toda página que "hace algo" con lo que escribes (un login, un buscador, un formulario de contacto) empieza con la misma etiqueta: <form>. Hoy vas a construir uno, y no, no necesitas saber backend todavía.

Paso 1: la estructura del formulario

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

  <label for="correo">Correo</label>
  <input type="email" id="correo" name="correo" required />

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

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

Cada <input> tiene un id que coincide con el for de su <label>. Esto no es decoración: así el navegador (y los lectores de pantalla) saben qué campo pertenece a qué etiqueta.

Paso 2: usa el tipo de input correcto

<input type="email" /> <!-- valida que tenga un @ -->
<input type="number" />
<input type="date" />
<input type="checkbox" />

Usar type="email" en vez de type="text" le da validación gratis al navegador. Cero líneas de JavaScript, cero esfuerzo, mucha elegancia.

Paso 3: marca campos obligatorios

El atributo required evita que el formulario se envíe si el campo está vacío. Pruébalo: deja el nombre en blanco y haz clic en "Enviar". El navegador te va a regañar amablemente, así que tú no tienes que hacerlo.

¿Qué acabas de aprender?

• Cómo estructurar un formulario con <form>, <label> e <input>.
• Por qué el tipo de input correcto te ahorra trabajo.
• Cómo marcar campos obligatorios sin escribir JavaScript.

Por ahora este formulario no envía datos a ningún lado (para eso hace falta un servidor), pero más adelante lo vamos a validar y mejorar con JavaScript.