Elementos de formulario HTML
Los atributos de formulario afinaron la etiqueta form. Los elementos de formulario son las piezas dentro — etiquetas, áreas de texto, listas, botones y agrupación. Esta lección mapea el kit. Los tipos de input vienen después.
Por qué importan los elementos
Un form vacío con solo atributos no recoge respuestas. Hacen falta controles. Elegir textarea en vez de input de una línea o select en vez de texto libre cambia usabilidad y datos.
Respuesta directa
1) Empareja cada control visible con label. 2) input para muchos controles de una línea. 3) textarea multilínea. 4) select+option lista fija. 5) button para acciones. 6) fieldset+legend para agrupar. action/method en el form exterior.
📊 Common form pieces
| Element | Role | Beginner tip |
|---|---|---|
| label | Names a control for humans and assistive tech | Match for= to the control id |
| input | Single-line text, email, checks, radios, … | Types catalog is the next lesson |
| textarea | Multi-line text | Prefer over input for bios and messages |
| select / option | Choose from a fixed list | Each option needs a value |
| button | submit, reset, or generic action | Default in a form is often submit — set type explicitly |
| fieldset / legend | Group related controls with a title | legend is the accessible group name — not a plain div |
fieldset de perfil con controles mixtos
Editor pequeño de perfil: un grupo, bio multilínea, nivel en lista, botón guardar.
<form action="/profile" method="post">
<fieldset>
<legend>Profile</legend>
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="4"></textarea>
<label for="level">Level</label>
<select id="level" name="level">
<option value="beginner">Beginner</option>
<option value="middle">Middle</option>
<option value="advanced">Advanced</option>
</select>
<button type="submit">Save</button>
</fieldset>
</form>
Leer el demo de perfil
- fieldset+legend nombran el grupo
- textarea encaja mejor para la bio
- select/option limitan el nivel
- cada control tiene id y name
- submit envía el formulario
- action/method de la lección anterior
Preferencias: radios y tipos de botón
A veces la respuesta es exclusiva. Los radios comparten name. Mantén label en cada opción. Contrasta submit con reset y button.
<form action="/prefs" method="post">
<fieldset>
<legend>Theme</legend>
<label>
<input type="radio" name="theme" value="light" checked>
Light
</label>
<label>
<input type="radio" name="theme" value="dark">
Dark
</label>
</fieldset>
<button type="submit">Save prefs</button>
<button type="reset">Clear</button>
</form>
Leer el demo de preferencias
- radios con el mismo name = un grupo
- envolver el radio en label hace clicable el texto
- legend titula Theme
- submit envía; reset limpia — no guarda
- más tipos de input después
Elegir el control correcto
- respuesta corta/email/contraseña: input
- texto largo: textarea
- lista fija: select o radios
- agrupar sección: fieldset+legend
- nombrar: label
- enviar: button type=submit
Práctica — ensamblar elementos
- Copia el perfil; cambia legend y añade option
- Sustituye textarea por input temporalmente
- Segundo fieldset para notas
- Radios de tema; clic en labels
- Clear luego Save
- Mueve un control fuera del form
- Frase: los elementos son controles etiquetados dentro; los atributos en form son otra capa
Errores fáciles
- Controles sin label
- título div en vez de legend
- submit o campos fuera del form
- input de una línea para mensajes largos
- olvidar name
- creer que reset guarda en el servidor
- pensar que esta lección reemplaza action/method
Resumen
- Los elementos de formulario son los controles dentro de form
- label, input, textarea, select, button, fieldset/legend cubren la mayoría de UIs principiantes
- Etiqueta siempre; agrupa con fieldset
- Elige el control según la pregunta
- Atributos del form y tipos de input son capas distintas
- siguiente: tipos de input
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior