Select en HTML
Antes, textarea recogía párrafos libres. Select es otro trabajo: elegir una respuesta de una lista fija, no escribir libremente.
Por qué existe select
Envíos, menús y ajustes necesitan un conjunto cerrado. Escribir a mano ensucia datos; elegir teh de una lista no. select es el control; cada option una opción. Siguen haciendo falta label y name en el select.
Respuesta directa
1) select con option. 2) Conecta label. 3) name en select; value en option. 4) Opcional: prompt vacío, selected, disabled, optgroup. 5) Elección de lista — no párrafos de textarea.
📊 Select pieces beginners use
| Piece | Role | Beginner tip |
|---|---|---|
| select | Choice container | Owns name= for the submitted field key |
| option | One choice | value= is what posts; text is what users see |
| optgroup | Section header | Groups options; not itself submitted |
| name (on select) | Submit key | Required if the choice should post |
| id (on select) | Label hook | Match label for= |
| value (on option) | Submitted token | Prefer short stable codes (teh, salad) |
| selected | Default pick | At most one in a single-select list |
| disabled (option) | Unavailable | Shown but not choosable |
Envío: select de ciudad
Nota de entrega como input de una línea; ciudad como select. Primero Choose con value vacío. Códigos teh/isf se envían.
<form action="/ship" method="post">
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Choose…</option>
<option value="teh">Tehran</option>
<option value="isf">Isfahan</option>
<option value="shir">Shiraz</option>
</select>
<label for="note">Delivery note</label>
<input id="note" name="note" type="text" placeholder="Gate code, floor…">
<button type="submit">Continue</button>
</form>
Leer el demo de ciudad
- El control de lista es select, no textarea
- id empareja con label for
- name es la clave enviada
- Cada option tiene value corto
- value vacío evita default accidental
- required hasta una ciudad real
- La nota es input de una línea
Comidas con optgroup
Segundo demo con Veg y Other. selected por defecto; disabled si no hay stock.
<label for="meal">Meal</label>
<select id="meal" name="meal">
<optgroup label="Veg">
<option value="salad">Salad</option>
<option value="soup" selected>Soup</option>
</optgroup>
<optgroup label="Other">
<option value="stew">Stew</option>
<option value="grill" disabled>Grill (sold out)</option>
</optgroup>
</select>
Leer el demo de comida
- optgroup titula una sección; no se envía
- value viene de la option elegida
- selected en Soup
- disabled en Grill
- Siempre label y name
- Siguiente: datalist para sugerencias con escritura
Elegir select vs textarea vs input
- Una opción conocida: select
- Párrafos libres: textarea
- Una línea tipada: input
- name en select; value en option
- Siempre label
- No pegues la lista en un textarea
Práctica — construir y agrupar
- Cuarta ciudad con value corto
- Cambia Choose; deja value=""
- Prueba sin required y restaura
- Mueve Soup entre grupos
- Prueba disabled en Grill
- Frase: select envía value; textarea texto libre
- Sugerencias tipadas van en datalist después
Errores fáciles
- Sin value cuando querías un código
- Olvidar name en el select
- Sin label
- Opciones en un textarea
- Lista larga sin optgroup
- name en cada option
- Confundir con datalist
Resumen
- select + option = elegir de una lista
- label y name en el select
- El value de la option se envía
- Opcional prompt, selected, disabled, optgroup
- No es texto multilínea libre
- Siguiente: datalist
🧠 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