Select em HTML
Antes, textarea recolhia texto livre multilinha. Select é outro trabalho: escolher uma resposta de uma lista fixa, não escrever livremente.
Porque o select existe
Envios, refeições e definições precisam de um conjunto fechado. Escrever à mão suja dados; escolher teh numa lista não. select é o controlo; cada option uma escolha. Continuam a ser precisos label e name no select.
Resposta direta
1) select com option. 2) Ligue um label. 3) name no select; value na option. 4) Opcional: prompt vazio, selected, disabled, optgroup. 5) Escolha de lista — não parágrafos 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 |
Envio: select de cidade
Nota de entrega como input de uma linha; cidade como select. Primeiro Choose com value vazio. Códigos teh/isf são enviados.
<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>
Ler o demo da cidade
- O controlo de lista é select, não textarea
- id combina com label for
- name é a chave submetida
- Cada option tem value curto
- value vazio evita default acidental
- required até uma cidade real
- A nota é input de uma linha
Refeições com optgroup
Segundo demo com Veg e Other. selected por omissão; disabled se esgotado.
<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>
Ler o demo da refeição
- optgroup titula uma secção; não é submetido
- value vem da option escolhida
- selected em Soup
- disabled em Grill
- Sempre label e name
- Seguinte: datalist para sugestões com escrita
Escolher select vs textarea vs input
- Escolha conhecida: select
- Parágrafos livres: textarea
- Linha tipada: input
- name no select; value na option
- Sempre label
- Não cole a lista num textarea
Prática — construir e agrupar
- Quarta cidade com value curto
- Mude Choose; mantenha value=""
- Teste sem required e restaure
- Mova Soup entre grupos
- Teste disabled em Grill
- Frase: select envia value; textarea texto livre
- Sugestões tipadas → datalist a seguir
Erros fáceis
- Sem value quando queria um código
- Esquecer name no select
- Sem label
- Opções num textarea
- Lista longa sem optgroup
- name em cada option
- Confundir com datalist
Resumo
- select + option = escolher de uma lista
- label e name no select
- O value da option é enviado
- Opcional prompt, selected, disabled, optgroup
- Não é texto multilinha livre
- Seguinte: datalist
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo