Nivel: Introductorio · HTML · Después de tablas · 12–14 minutos
Respuesta corta: un formulario HTML es un bloque
<form>con controles (input,textarea,button…) para que la persona envíe datos. En este nivel armarás el esqueleto visible; el envío real a un servidor se verá más adelante. Hoy: etiquetas, tipos de campo y un botón enviar.
Si ya sabes estructurar páginas, el formulario es el puente hacia la interacción. Analogía: una hoja de inscripción en papel — campos con etiqueta y un espacio para escribir.
Analogía: la ficha de inscripción
En papel: «Nombre: ______». En HTML: un <label> ligado a un <input>. El botón «Enviar» es el <button type="submit"> (o un input submit). Sin servidor aún, al enviar la página puede recargar o mostrar la query en la URL — sirve para probar que el formulario «responde».
Partes de un formulario simple
| Pieza | Qué hace | Ejemplo |
|---|---|---|
<form> |
Agrupa los campos | action / method (luego) |
<label> |
Nombre visible del campo | ligado con for = id del input |
<input type="text"> |
Texto de una línea | Nombre |
<input type="email"> |
Correo (validación básica del navegador) | |
<textarea> |
Texto multilínea | Mensaje |
<button type="submit"> |
Envía el formulario | Enviar |
<form action="#" method="get">
<label for="nombre">Nombre</label>
<input id="nombre" name="nombre" type="text" required>
<label for="correo">Correo</label>
<input id="correo" name="correo" type="email" required>
<label for="msg">Mensaje</label>
<textarea id="msg" name="mensaje" rows="4"></textarea>
<button type="submit">Enviar</button>
</form>
Ejemplos en la vida diaria del estudiante
- Login del colegio: usuario + contraseña (
type="password"). - Buscador: un solo input de texto + botón.
- Inscripción a un taller: nombre, email, mensaje.
Mitos frecuentes
- «Sin PHP/JS el form no sirve de nada.» Sirve para aprender estructura y UX; el backend se añade después.
- «El placeholder reemplaza al label.» No: el placeholder desaparece al escribir; el label debe quedar visible.
- «required lo arregla todo.» Ayuda en el navegador, pero la validación seria también va en el servidor.
Mini-glosario
- name: clave del dato al enviar.
- id + for: accesibilidad: clic en el label enfoca el campo.
- method get/post: cómo viajan los datos (get visible en la URL).
Para seguir: cuando el calendario lo traiga, CSS empezará a ordenar la apariencia de estos mismos formularios.
