Carregando...

Elementos de formulário HTML

Os atributos de formulário afinaram a etiqueta form. Os elementos de formulário são as peças dentro — rótulos, áreas de texto, listas, botões e agrupamento. Esta lição mapeia o kit. Tipos de input a seguir.

Porque os elementos importam

Um form nu só com atributos não recolhe respostas. É preciso controlos. Escolher textarea em vez de input de uma linha ou select em vez de texto livre muda usabilidade e dados.

Resposta direta

1) Associe cada controlo visível a um label. 2) input para muitos campos de uma linha. 3) textarea multilinha. 4) select+option lista fixa. 5) button para ações. 6) fieldset+legend para agrupar. action/method no 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 com controlos mistos

Pequeno editor de perfil: um grupo, bio multilinha, nível em lista, botão guardar.

Profile fieldset with controls

html
HTML Code 
<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>

Ler o demo de perfil

  • fieldset+legend nomeiam o grupo
  • textarea serve melhor a bio
  • select/option limitam o nível
  • cada controlo tem id e name
  • submit envia o formulário
  • action/method da lição anterior

Preferências: rádios e tipos de botão

Por vezes a resposta é exclusiva. Rádios partilham name. Mantenha label em cada opção. Contraste submit com reset e button.

Preferences radios and buttons

html
HTML Code 
<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>

Ler o demo de preferências

  • rádios com o mesmo name = um grupo
  • rádio dentro de label torna o texto clicável
  • legend titula Theme
  • submit envia; reset limpa — não guarda
  • outros tipos de input depois

Escolher o controlo certo

  • resposta curta/email/palavra-passe: input
  • texto longo: textarea
  • lista fixa: select ou rádios
  • agrupar secção: fieldset+legend
  • nomear: label
  • enviar: button type=submit

Prática — montar elementos

  1. Copie o perfil; mude legend e acrescente option
  2. Substitua temporariamente textarea por input
  3. Segundo fieldset para notas
  4. Rádios de tema; clique nos labels
  5. Clear depois Save
  6. Mova um controlo para fora do form
  7. Frase: elementos são controlos etiquetados dentro; atributos no form são outra camada

Erros fáceis

  • Controlos sem label
  • título div em vez de legend
  • submit ou campos fora do form
  • input de uma linha para mensagens longas
  • esquecer name
  • achar que reset guarda no servidor
  • pensar que esta lição substitui action/method

Resumo

  • Elementos de formulário são os controlos dentro de form
  • label, input, textarea, select, button, fieldset/legend cobrem a maioria das UI iniciantes
  • Etiquete sempre; agrupe com fieldset
  • Combine o controlo à pergunta
  • Atributos do form e tipos de input são camadas distintas
  • a seguir: tipos de input

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
5
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 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
Tópico 1 de 1
Html Tutorial