Curso de HTML / Escolher tipos de campos: e-mail, número, data e opções
O type de um input indica ao navegador qual tipo de valor ou seleção o campo representa. Emails, quantidades numéricas, datas, caixas de seleção e botões de rádio têm comportamentos diferentes. Escolha o tipo com base nos dados e nas decisões que os usuários devem tomar, e não apenas em sua aparência visual.
Associe o tipo ao valor
<form method="get">
<p><label for="email">Endereço de e-mail</label>
<input id="email" name="email" type="email"></p>
<p><label for="quantity">Quantidade</label>
<input id="quantity" name="quantity" type="number" min="1"></p>
<p><label for="visit-date">Data da visita</label>
<input id="visit-date" name="date" type="date"></p>
<button type="submit">Verificar</button>
</form>Salve o exemplo em um arquivo HTML e teste cada campo. email pode fornecer uma validação básica do formato de endereço e uma interface de entrada apropriada em alguns dispositivos. number pode impor um valor mínimo numérico; o controle visível para date depende do navegador e do sistema operacional. O servidor deve sempre verificar se a data enviada é válida para o objetivo da aplicação.
Uma quantidade é um número com o qual você pode calcular, mas um código postal pode ter zeros à esquerda e um número de telefone pode incluir um código de país ou pontuação. Use text ou tel para tais valores em vez de number. Pergunte se o valor é uma quantidade numérica, e não apenas se ele contém dígitos.
Caixas de seleção ou botões de opção?
Escolha uma caixa de seleção para uma decisão independente sim/não ou várias seleções independentes. Escolha botões de opção com o mesmo name quando apenas uma opção de um grupo puder ser selecionada. Compare a nomeação dos grupos com o exemplo fieldset e legend em Explique os formulários com fieldset, legend e preenchimento automático.
<fieldset>
<legend>Atualizações</legend>
<label><input type="checkbox" name="news" value="yes"> Receber as novidades</label>
</fieldset>
<fieldset>
<legend>Meio de contato preferido</legend>
<label><input type="radio" name="contact" value="email"> Endereço de e-mail</label>
<label><input type="radio" name="contact" value="phone"> Telefone</label>
</fieldset>As entradas de rádio compartilham name="contact", portanto selecionar uma apaga a outra. value é o valor enviado, que não precisa corresponder ao rótulo visível. Coloque esses grupos dentro de um form com um botão de envio para testá-los: uma caixa de seleção news não marcada não contribui para nenhuma entrada, enquanto a seleção de Endereço de e-mail envia contact=email. Se seu aplicativo precisar distinguir um “Não” explícito de nenhuma resposta, projete essa opção e seu processamento no lado do servidor de forma deliberada.
Comparar a interface com os valores enviados
| Tipo | Objetivo | Cuidado |
|---|---|---|
| Uma cadeia no formato de email | Não verifica a existência de uma caixa de correio | |
number |
Uma quantidade numérica | O intervalo, o passo e a possibilidade de estar vazio são separados |
date |
Uma data | A interface varia de acordo com a localidade; o valor usa aaaa-mm-dd |
checkbox |
Uma escolha independente | Um controle não marcado não contribui para nenhuma entrada |
| radio | Uma escolha entre um grupo com o mesmo nome | Um fieldset compartilhado não substitui um nome compartilhado |
Salve o exemplo completo como visit.html e use o endereço de teste nome@example.com. Deixar o grupo de rádios obrigatório sem resposta bloqueia o envio, enquanto a opção opcional Notícias altera a lista de dados.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercício sobre tipos de campos</title>
</head>
<body>
<h1>Praticar com uma solicitação de visita</h1>
<form id="visit-form" method="get">
<p><label for="visit-email">Endereço de e-mail</label>
<input id="visit-email" name="email" type="email" required></p>
<p><label for="visit-day">Data da visita</label>
<input id="visit-day" name="date" type="date" required></p>
<p><label for="visit-quantity">Quantidade</label>
<input id="visit-quantity" name="quantity" type="number" min="1" step="1" value="1"></p>
<fieldset>
<legend>Meio de contato</legend>
<label><input type="radio" name="contact" value="email" required> Endereço de e-mail</label>
<label><input type="radio" name="contact" value="phone"> Telefone</label>
</fieldset>
<p><label><input type="checkbox" name="news" value="yes"> Notícias</label></p>
<button type="submit">Verificar os valores inseridos</button>
</form>
</body>
</html>Escolha uma data e inspecione document.getElementById("visit-day").value no console. Selecionar 20 de maio de 2030 gera um valor no formato 2030-05-20, independentemente da exibição do calendário localizado. Marque e depois desmarque Notícias e compare a lista de entradas com o comando abaixo.
Array.from(new FormData(document.getElementById("visit-form")).entries())Formato do valor de um campo de data no MDN
Verifique mais do que o tipo
Cada campo sempre precisa de um rótulo compreensível e, quando seu valor precisa ser enviado, de um name. Um campo de type="email" pode ser deixado em branco, a menos que você também exija um valor; formato e obrigatoriedade são regras separadas. Você pode adicionar required a um grupo de botões de opção quando a escolha de uma resposta for realmente obrigatória. Teste o que o navegador envia e valide os valores importantes no servidor. A referência do elemento input na MDN lista os tipos e restrições suportados. Tipo e obrigatoriedade, comprimento e intervalo são separados; teste seus limites nos Testes de validação de formulário com obrigatoriedade, limites de comprimento e intervalo.
