Textarea e Select

Liberdade e controle no mesmo formulário

Formulários profissionais precisam de dois poderes: permitir que o usuário explique algo com profundidade e impedir que ele envie dados fora do padrão quando a escolha precisa ser controlada.

Textarea explicado em profundidade

O textarea é usado para textos longos, mensagens, comentários, feedbacks, biografias, observações e qualquer conteúdo que precise de múltiplas linhas.

<label for="mensagem">Mensagem principal</label>
<textarea id="mensagem"
          name="mensagem"
          rows="6"
          cols="50"
          maxlength="1000"
          placeholder="Descreva sua solicitação com detalhes..."
          required></textarea>

• input text: linha única, dado curto e objetivo.
• textarea: múltiplas linhas, texto narrativo e detalhado.
• rows: altura inicial em linhas visíveis.
• cols: largura aproximada em caracteres.
• maxlength: limite máximo de caracteres.

Select, option, value, selected e disabled

O select cria uma lista de escolhas fechadas. Cada option representa uma possibilidade. O texto visível é para humanos; o value é para o sistema.

<label for="estado">Estado</label>
<select id="estado" name="estado" required>
  <option value="" disabled selected>Selecione uma opção</option>
  <option value="sp">São Paulo</option>
  <option value="rj">Rio de Janeiro</option>
  <option value="mg">Minas Gerais</option>
</select>

• name no select: chave enviada ao servidor.
• value na option: valor técnico enviado.
• selected: opção marcada ao carregar.
• disabled: opção visível, mas não selecionável.

Multiple e optgroup

O atributo multiple permite selecionar mais de uma opção. A tag optgroup organiza listas longas em categorias.

<label for="tecnologias">Tecnologias dominadas</label>
<select id="tecnologias" name="tecnologias[]" multiple>
  <option value="html">HTML5</option>
  <option value="css">CSS3</option>
  <option value="js">JavaScript</option>
</select>

<label for="curso">Curso de interesse</label>
<select id="curso" name="curso">
  <option value="">Selecione um curso</option>
  <optgroup label="Desenvolvimento">
    <option value="front-end">Front-End Mestre</option>
    <option value="back-end">Back-End Pro</option>
  </optgroup>
  <optgroup label="Design">
    <option value="ux">UX Research</option>
    <option value="ui">UI Design</option>
  </optgroup>
</select>

• select: escolha única entre muitas opções.
• radio: escolha única entre poucas opções visíveis.
• checkbox: escolhas múltiplas independentes.
• select multiple: múltiplas escolhas em lista compacta.

Textarea e select sem amadorismo

• Use textarea para textos longos e narrativos.
• Use input text para dados curtos de linha única.
• Use select quando as opções forem finitas e conhecidas.
• Conecte todo label ao campo usando for e id.
• Use name em todo textarea e select.
• Use option inicial neutra para evitar envio acidental.
• Use value padronizado nas options.
• Use optgroup para listas longas categorizadas.
• Use instrução clara em select multiple.
• Indique campos obrigatórios e use required quando necessário.

15 perguntas para provar domínio

1. Qual tag permite múltiplas linhas? <textarea>.
2. Como definir altura inicial? rows.
3. Qual tag cria lista suspensa? <select>.
4. Qual tag define item da lista? <option>.
5. Para que serve selected? Define opção padrão.
6. Onde fica name no select? Na tag select.
7. Textarea tem fechamento? Sim.
8. Como impedir escolha de option? disabled.
9. Como permitir várias escolhas? multiple.
10. Como agrupar opções? optgroup.
11. Qual atributo limita texto? maxlength.
12. Texto entre option é o quê? Texto visível.
13. Value na option é o quê? Dado enviado.
14. Textarea pode redimensionar? Sim, por padrão.
15. Como conectar label ao select? for no label e id no select.

Registre seu formulário com textarea e select

git status
git add .
git commit -m "aula-25: cria formulario com textarea e select"
git push

• git status: verifica as alterações.
• git add .: prepara o arquivo.
• git commit: documenta o domínio da aula.
• git push: envia para o portfólio global.