Formulários: input, label e button
Crie formulários HTML acessíveis com campos identificados, diferentes tipos de input, áreas de texto, seleções e botões de envio.
Formulários: input, label e button é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Por que usar formulários HTML?
Os formulários são a principal maneira de os usuários enviarem dados para um servidor: acesso, pesquisa, finalização da compra e comentários. Os navegadores fornecem uma enorme quantidade de comportamento integrado — validação, entrada pelo teclado e teclados móveis — que você obtém gratuitamente ao usar elementos nativos de formulário.
O elemento <form>
O elemento <form> envolve todos os controles relacionados. O atributo action define a URL que recebe os dados; method define GET ou POST. Em aplicativos de página única, muitas vezes você impede o envio padrão e o trata com JavaScript.
<form action="/submit" method="POST">
<!-- inputs go here -->
</form>Campos de texto e e-mail
O elemento <input> é o principal elemento dos formulários. O atributo type altera seu comportamento. Use type="text" para texto livre e type="email" para endereços de e-mail (ele valida o formato e exibe o teclado móvel adequado).
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">Senha, número e outros tipos
Outros tipos úteis de entrada: password (oculta os caracteres), number (valida valores numéricos e exibe controles de incremento), date (exibe um seletor de data), range (controle deslizante), checkbox (alternância booleana) e radio (escolha de uma entre várias).
<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">O elemento <label> — essencial para a acessibilidade
Toda entrada deve ter um <label> associado. O rótulo informa aos usuários (e aos leitores de tela) para que serve o campo. Clicar no rótulo coloca o foco na entrada. Use o atributo for correspondente ao id da entrada.
<label for="username">Username</label>
<input type="text" id="username" name="username">Textarea e Select
Use <textarea> para texto com várias linhas (por exemplo, comentários). Use <select> com elementos <option> filhos para opções suspensas. Inclua sempre uma opção vazia padrão com uma instrução como "Escolha uma categoria".
<textarea name="message" rows="4" placeholder="Write your message..."></textarea>
<select name="level">
<option value="">Select level...</option>
<option value="a1">A1 Beginner</option>
<option value="b1">B1 Intermediate</option>
</select>Caixas de seleção e botões de opção
Agrupe caixas de seleção relacionadas com <fieldset> e <legend>. Botões de opção que compartilham o mesmo name permitem apenas uma seleção. Cada um precisa de seu próprio rótulo.
<fieldset>
<legend>Preferred languages</legend>
<label><input type="checkbox" name="lang" value="js"> JavaScript</label>
<label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>Botões: envio, redefinição e botão
<button type="submit"> envia o formulário. type="reset" limpa todos os campos. type="button" não faz nada por padrão e é usado com ouvintes de eventos do JavaScript. Sempre defina o tipo — o padrão é o envio.
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>Agrupando entradas com <fieldset>
<fieldset> agrupa controles relacionados visual e semanticamente. O <legend> obrigatório fornece uma legenda. Leitores de tela anunciam a legenda antes de cada controle do grupo, fornecendo contexto.
O atributo name — o que é enviado
Quando um formulário é enviado, os navegadores enviam o par name=value para cada controle. Somente controles com o atributo name são incluídos. Para caixas de seleção, somente as marcadas são enviadas.
<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->Preenchimento automático e preenchimento de formulários
Defina valores do atributo autocomplete, como email, given-name, new-password ou current-password, para ajudar os gerenciadores de senhas e o preenchimento automático do navegador a preencher formulários corretamente.
<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">Verificação rápida
Qual é a finalidade do atributo for em um elemento <label>?
Recapitulação: formulários HTML acessíveis
Toda entrada precisa de um rótulo. Escolha o tipo de entrada adequado para os dados. Agrupe controles relacionados com um agrupamento de campos. Use button type=submit para enviar o formulário. Aproveite os recursos nativos dos formulários — validação, navegação pelo teclado e preenchimento automático — antes de adicionar JavaScript.
Perguntas Frequentes
A aula “Formulários: input, label e button” é grátis?
Sim — o texto completo de “Formulários: input, label e button” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Formulários: input, label e button”?
Crie formulários HTML acessíveis com campos identificados, diferentes tipos de input, áreas de texto, seleções e botões de envio. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Formulários: input, label e button”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Estrutura do documento: DOCTYPE, html, head e body
- Tags semânticas: header, nav, main, article e footer
- Texto, imagens, links e listas
- Formulários: input, label e button