Formulários em HTML são uma das principais ferramentas para coletar informações dos usuários em websites. Através deles, podemos enviar dados para o servidor, registrar informações de login, realizar pesquisas, fazer cadastros, entre outros. A tag “<form>” é a estrutura básica para criar um formulário, e dentro dela podemos usar diversos tipos de inputs para coletar diferentes tipos de dados.
Neste artigo, vamos explorar os diferentes tipos de input que podem ser usados dentro de um formulário, como utilizá-los corretamente, e discutir boas práticas para garantir que os formulários sejam acessíveis e funcionais.
Estrutura básica de um formulário
A estrutura básica de um formulário em HTML envolve a tag “<form>”, que envolve todos os elementos do formulário, incluindo os inputs. O formulário também deve conter o atributo “action”, que define para onde os dados serão enviados, e o atributo “method”, que define o método HTTP utilizado para o envio (geralmente GET ou POST). Além disso, um “<input type=”submit”>” é responsável por enviar as informações preenchidas no formulário para o destino especificado no “action”. Este botão desencadeia o envio dos dados e a execução do método definido.
<form action="/enviar-dados" method="POST">
<!-- Campos do formulário -->
<input type="submit" value="Enviar">
</form>
Agora, vamos examinar os diferentes tipos de inputs que podem ser usados dentro de um formulário.
Campo de texto
O campo de texto é um dos tipos de input mais comuns, usado para capturar informações simples, como nomes e endereços.
<form action="/submit" method="POST">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>
<input type="submit" value="Enviar">
</form>
Como fica no navegador:
No exemplo acima, utilizamos um campo de texto para capturar o nome do usuário. Uma “
Podemos adicionar configurações como o atributo “id”, que identifica de forma única o elemento na página e permite que ele seja vinculado à “
O atributo “name” define a chave para enviar os dados ao submeter o formulário. No exemplo, “name=”nome”” faz com que o valor inserido seja enviado como parte dos dados com a chave “nome”, para que o servidor o processe.
O atributo “required” indica que o campo é obrigatório. Se o formulário for enviado sem preencher esse campo, o navegador mostra uma mensagem de validação, garantindo que o usuário insira as informações necessárias antes de prosseguir.
Campo de senha
O campo de senha é usado quando queremos esconder a entrada do usuário, como em formulários de login ou cadastros onde o usuário precisa informar uma senha e não queremos que ela fique visível.
<form action="/login" method="POST">
<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha" required>
<input type="submit" value="Entrar">
</form>
Como fica no navegador:
Campo de email
Este campo é utilizado para coletar um endereço de e-mail e já realiza validação automática para verificar se o formato do e-mail está correto (por exemplo, nwe@dominio.com).
<form action="/cadastro" method="POST">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Cadastrar">
</form>
Como fica no navegador:
Campo de número
O campo de número permite que o usuário insira apenas números, e você pode definir atributos como “min” e “max” para restringir os valores permitidos.
<form action="/submit" method="POST">
<label for="idade">Idade:</label>
<input type="number" id="idade" name="idade" min="18" max="100" required>
<input type="submit" value="Enviar">
</form>
Como fica no navegador:
Se o usuário inserir um valor fora do intervalo especificado, o navegador exibirá uma mensagem de erro. Por exemplo, ao informar um número menor que 18 ou maior que 100, será mostrada uma mensagem de validação para que o usuário corrija o valor.
Campo de data
Esse tipo de input permite que o usuário selecione uma data no formato adequado, com o calendário sendo exibido automaticamente na maioria dos navegadores.
<form action="/evento" method="POST">
<label for="data">Data do Evento:</label>
<input type="date" id="data" name="data" required>
<input type="submit" value="Registrar Evento">
</form>
Como fica no navegador:
Você também pode utilizar os atributos “min” e “max” para restringir as datas selecionáveis no campo de data. No exemplo abaixo, as datas anteriores a 9 de novembro de 2024 e as datas posteriores a 31 de dezembro de 2024 não são permitidas:
<input type="date" id="data" name="data" min="2024-11-09" max="2024-12-31" required>
Assim, o usuário será obrigado a escolher uma data dentro do intervalo especificado, garantindo maior controle sobre as entradas:
Caixa de Seleção
As caixas de seleção permitem que o usuário selecione uma ou mais opções. Pode ser útil em formulários de consentimento ou preferências.
<form action="/preferencias" method="POST">
<label for="newsletter">Receber Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter" checked>
<input type="submit" value="Salvar Preferências">
</form>
Como fica no navegador:
Botões de Opção
Os botões de opção (radio buttons) são usados quando o usuário deve escolher apenas uma opção entre várias. Todos os botões de opção dentro de um grupo devem ter o mesmo valor para o atributo name.
<form action="/sexo" method="POST">
<label>Sexo:</label>
<input type="radio" id="masculino" name="sexo" value="masculino" required>
<label for="masculino">Masculino</label>
<input type="radio" id="feminino" name="sexo" value="feminino">
<label for="feminino">Feminino</label>
<input type="submit" value="Enviar">
</form>
Como fica no navegador:
Campo de Arquivo
Este campo permite que o usuário selecione arquivos de seu dispositivo para enviar junto com o formulário. É comumente usado, por exemplo, quando um usuário precisa adicionar uma foto de perfil ou enviar documentos.
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="arquivo">Escolha um Arquivo:</label>
<input type="file" id="arquivo" name="arquivo" required>
<input type="submit" value="Enviar">
</form>
Como fica no navegador:
Após selecionar o arquivo, o nome e a extensão aparecem para que o usuário tenha certeza do arquivo escolhido antes de enviá-lo.
Este tipo de input também permite a adição de atributos como accept para definir quais tipos de arquivos são permitidos (ex: imagens, PDFs), proporcionando maior controle sobre as entradas aceitas.
<input type="file" id="fotoPerfil" name="fotoPerfil" accept=".jpg, .jpeg, .png" required>
Neste exemplo, o campo de upload aceitará apenas arquivos com as extensões .jpg, .jpeg ou .png. Isso restringe o tipo de arquivo que o usuário pode selecionar, proporcionando maior controle sobre os uploads e melhorando a experiência do usuário ao evitar arquivos não desejados.
Campo Textarea
Enquanto o input do tipo “text” representa um campo de texto de apenas uma linha, às vezes é necessário incluir um texto maior, com múltiplas linhas. Para esses casos usamos a tag “<textarea>”. Diferente dos anteriores, ela não é uma variação da tag “<input>”, mas sim um elemento diferente.
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="descricao">Descrição:</label>
<textarea id="descricao" name="descricao" required rows="10" cols="50"></textarea>
<input type="submit" value="Enviar">
</form>
Os atributos “rows” e “cols” definem, respectivamente, a quantidade de linhas e colunas padrão do campo. Consequentemente, definem seu tamanho inicial.
O resultado no browser é o seguinte:
Campo Dropdown
Também é possível criar campos de seleção do tipo “dropdown” no HTML. Para isso usamos a tag “<select>” e cada opção é representada pela tag “<option>”:
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="horario">Horário:</label>
<select id="horario" name="horario" required>
<option value="M">Manhã</option>
<option value="T">Tarde</option>
<option value="N">Noite</option>
</select>
<input type="submit" value="Enviar">
</form>
Observe que assim como nas tags “<input>” e “<textarea>”, também usamos os atributos “id” e “name” para identificar o campo. Já na tag “<option>”, o atributo “value” define o valor que será enviado no campo caso esta opção esteja selecionada.
No browser, o resultado é o seguinte:
Conclusão
Formulários HTML são essenciais quando precisamos coletar dados em websites e, ao usar os diferentes tipos de input corretamente, você pode criar uma experiência de usuário eficiente e acessível. Além disso, a validação de dados é fundamental para garantir que os dados enviados sejam válidos e úteis. Ao aplicar boas práticas e seguir as diretrizes recomendadas, você cria formulários mais fáceis de usar para todos os seus usuários.