Elementos de Formulário em HTML: entenda as tags essenciais | Alura Cursos Online
Elementos de Formulário em HTML: entenda as tags essenciais
5 min5 minutos de leitura
5 min5 minutos de leitura
Autor(a)
Rafaela Petelin Silvério
Sou Bacharela em Sistemas de Informação, Técnica em Desenvolvimento de Sistemas pela ETEC e atuo como Analista de Suporte Educacional na Alura, onde respondo as dúvidas que surgem no fórum, principalmente na área de Front-end.
Sou apaixonada por tecnologia e busco sempre aprender coisas novas. Meus hobbies favoritos são ler, estudar novos idiomas e assistir séries de comédia.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
No artigo anterior, vimos o que são os elementos block-level e como eles se comportam na estrutura da página. Agora, vamos avançar para outro grupo importante do HTML: os elementos de formulário, entendendo o que são, para que servem e quais tags fazem parte da criação de campos de interação com o usuário.
Formulário:
<form> - Para que serve a tag form no HTML?
A tag <form> é usada para criar formulários em uma página HTML. Ela delimita a área que reúne campos interativos, como caixas de texto, botões, listas de seleção, caixas de marcação e outros elementos que permitem ao usuário inserir dados e enviá-los para processamento.
Além de organizar os campos do formulário, a tag <form> também define como essas informações serão enviadas e tratadas. Para isso, ela conta com alguns atributos importantes:
action: especifica para onde os dados do formulário devem ser enviados quando o formulário é submetido.
method: define o método HTTP a ser usado ao enviar os dados do formulário. Os métodos mais comuns são “GET” e “POST”.
enctype: informa como os dados do formulário devem ser codificados antes de serem enviados ao servidor.
Um exemplo simples de uso é:
<formaction="/cadastro"method="post"></form>
<input> - Para que serve a tag input no HTML?
A tag <input> é usada para criar campos de entrada em formulários HTML. Por meio dela, a pessoa usuária pode inserir ou selecionar diferentes tipos de dados, como texto, senha, números, datas, arquivos, e-mails e muito mais.
Esse é um dos elementos mais versáteis de um formulário, justamente porque seu comportamento muda de acordo com o valor definido no atributo type. É esse atributo que informa qual tipo de campo será exibido na interface.
Entre os tipos mais comuns de <input>, podemos destacar:
text: cria um campo de texto simples, onde é possível inserir texto livremente.
password: cria um campo de senha, onde os caracteres digitados são ocultos.
checkbox: cria uma caixa de seleção que permite selecionar uma ou mais opções.
radio: cria botões de rádio, onde é possível selecionar apenas uma opção de um grupo de opções.
submit: cria um botão de envio que permite que as pessoas usuárias enviem o formulário.
file: cria um campo de seleção de arquivo, que permite enviar arquivos para o servidor.
email, number, date, entre outros: tipos específicos de campos de entrada que fornecem validação e funcionalidades específicas para tipos de dados comuns.
Um exemplo simples de uso é:
<inputtype="text">
<textarea> - Para que serve a tag textarea no HTML?
A tag <textarea> representa uma área de texto em formulários HTML. Ela é usada quando queremos permitir que a pessoa usuária digite um conteúdo mais longo e em formato livre, como comentários, mensagens, descrições ou respostas mais extensas.
Diferentemente do <input>, que costuma ser utilizado para entradas curtas, o <textarea> oferece um campo maior e mais adequado para textos com várias linhas.
Um exemplo simples de uso é:
<textarea></textarea>
<button> - Para que serve a tag button no HTML?
A tag <button> representa um botão clicável e pode ser usada para diferentes ações dentro de uma página, como enviar um formulário, limpar campos ou executar interações com JavaScript.
Um de seus principais atributos é type, que define o comportamento do botão. Quando o valor informado é submit e o botão está dentro de um formulário, ele envia os dados preenchidos pela pessoa usuária.
Um exemplo simples de uso é:
<button type="submit">Enviar</button>
<label> - Para que serve a tag label no HTML?
A tag <label> é usada para definir o rótulo de um campo de formulário, indicando à pessoa usuária qual informação deve ser preenchida naquele espaço. Ela é muito importante para a clareza do formulário, pois ajuda a identificar o propósito de cada campo, como em textos do tipo “Nome completo”, “E-mail” ou “Senha”.
Além de melhorar a compreensão durante o preenchimento, a tag <label> também contribui para a acessibilidade e para a experiência de uso, especialmente quando é associada corretamente a um campo de formulário, como um <input> ou <textarea>.
Um exemplo simples de uso é:
<label>Nome completo</label>
Veja um exemplo de formulário criado utilizando as tags que aprendemos:
Continua...
Ao longo deste artigo, vimos quais são os principais elementos usados na construção de formulários em HTML e entendemos como cada tag contribui para a criação de campos de interação com a pessoa usuária.
No próximo capítulo, vamos avançar para outro conceito essencial da linguagem: os atributos dos elementos HTML
