Contenido del Artículo
Estructura básica de un formulario
Todo formulario HTML comienza con la etiqueta <form> que actúa como contenedor principal. Dentro van los elementos de entrada (inputs), etiquetas (labels) y botones (buttons).
action
URL donde se enviarán los datos del formulario
method
GET (visible en URL) o POST (oculto en cuerpo)
autocomplete
on/off para autocompletado del navegador
<form action="/procesar" method="POST">
<!-- Elementos del formulario irán aquí -->
</form>Siempre incluye el atributo action incluso si es #, para evitar comportamientos inesperados.
Etiquetas (label) - Accesibilidad esencial
Las etiquetas asocian texto descriptivo con elementos de formulario, crucial para accesibilidad y usabilidad.
<label for="nombre">Nombre completo:</label>
<input type="text" id="nombre" name="nombre">
| Atributo | Descripción |
|---|---|
| for | Debe coincidir con el id del input asociado |
| [aria-label] | Alternativa cuando no se puede usar etiqueta visible |
| [aria-labelledby] | Referencia a elemento que describe el input |
Elementos input - Tipos principales
El elemento <input> es el más versátil en formularios, cambiando su comportamiento según el tipo:
text
Campo para texto simple (nombre, apellidos)
Valida formato de correo electrónico
password
Oculta caracteres ingresados
date
Selector de fecha nativo
checkbox
Selección múltiple
radio
Selección única de opciones
Los tipos específicos (email, number, tel) activan teclados especiales en dispositivos móviles.
Atributos esenciales de input
Los atributos controlan el comportamiento y validación de los campos:
<input
type="text"
id="usuario"
name="usuario"
placeholder="Ej: usuario123"
required
minlength="4"
maxlength="20"
>| Atributo | Descripción | Ejemplo |
|---|---|---|
| name | Identificador para procesamiento | name="email" |
| placeholder | Texto de ejemplo temporal | placeholder="ejemplo@mail.com" |
| required | Campo obligatorio | required |
| pattern | Expresión regular para validación | pattern="[A-Za-z]{3}" |
| disabled | Desactiva el campo | disabled |
| readonly | Solo lectura (se envía con formulario) | readonly |
Botones (button) - Acciones del formulario
Los botones permiten enviar el formulario o realizar otras acciones:
submit
Envía el formulario (valor por defecto)
reset
Borra todos los campos
button
Acción personalizada con JavaScript
<button type="submit">Enviar</button>
<button type="reset">Limpiar</button>
<button type="button">Acción personalizada</button>
Ejemplo de formulario completo
Combinando todos los elementos para crear un formulario de registro funcional:
<form action="/registro" method="POST">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required>
<label for="clave">Contraseña:</label>
<input type="password" id="clave" name="clave" minlength="8" required>
<label>
<input type="checkbox" name="terminos"> Acepto los términos y condiciones
</label>
<button type="submit">Registrarse</button>
</form>Nota cómo el checkbox tiene la etiqueta envolviendo el input - otra forma válida de asociarlos.
Buenas prácticas de accesibilidad
Consejos para hacer formularios accesibles:
Asociar labels
Siempre usar <code>for</code> o envolver input con label
Orden lógico
Secuencia de tabulación intuitiva (puedes usar tabindex)
Mensajes de error
Descriptivos y asociados al campo correspondiente
Diseño responsive
Tamaños de touch mínimo 48x48px
Los lectores de pantalla dependen de la estructura semántica para navegar formularios - ¡no uses divs para simular inputs!
Validación con HTML5
HTML5 introdujo validación nativa sin JavaScript:
<input type="email" required>
<input type="number" min="1" max="100">
<input type="text" pattern="[A-Za-z]{3}">| Tipo | Validación automática |
|---|---|
| Formato correo válido (user@domain) | |
| url | Formato URL válida |
| number | Solo números (min/max) |
| date | Fecha válida |
| pattern | Expresión regular personalizada |
Recursos para el aula
Ideas para implementar en proyectos educativos:
Cuestionarios interactivos
Formularios de autoevaluación
Sistemas de contacto
Formularios para preguntas estudiantiles
Registro de usuarios
Práctica de validación de campos
Buscadores simples
Formularios con método GET
Los formularios son ideales para enseñar conceptos de interacción usuario-sistema y validación de datos.
