Quais campos de formulário posso usar?
Para oferecer a melhor experiência do usuário possível,
use o elemento e o elemento type
mais adequados para os dados que o usuário está inserindo.
Ajudar os usuários a preencher texto
Para fornecer aos usuários um campo de formulário para inserir texto, use o elemento <input>
.
É a melhor escolha para palavras únicas e textos curtos.
Para textos mais longos, use o elemento <textarea>
.
Isso permite várias linhas de texto
e facilita a visualização do texto inserido pelo usuário, já que o elemento é rolável e redimensionável.
Garantir que os usuários insiram os dados no formato correto
Você quer ajudar os usuários a preencher um número de telefone?
Mude o atributo type
para type="tel"
no <input>
.
Os usuários em dispositivos móveis têm um teclado na tela adaptado,
garantindo que possam inserir o número de telefone com mais rapidez e facilidade.
Para um endereço de e-mail, use type="email"
.
Novamente, um teclado adaptado na tela é mostrado.
Use o atributo required
para tornar o campo do formulário obrigatório.
Quando o formulário é enviado, o navegador verifica se a entrada tem um valor e se é válida: neste caso, se é um endereço de e-mail bem formatado.
Saiba mais sobre os diferentes tipos de entrada. Elas também oferecem recursos de validação integrados.
Ajudar os usuários a preencher datas
Quando você quer começar sua próxima viagem?
Para ajudar os usuários a preencher datas, use type="date"
.
Alguns navegadores mostram o formato como um marcador, como yyyy-mm-dd
,
demonstrando como inserir a data.
Todos os navegadores mais recentes oferecem interfaces personalizadas para escolher datas na forma de um seletor de datas.
Ajudar os usuários a selecionar uma opção
Para garantir que os usuários possam marcar ou desmarcar uma opção possível, use type="checkbox"
.
Quer oferecer várias opções?
Há várias alternativas dependendo do seu caso de uso.
Primeiro, vamos conferir as possíveis soluções caso os usuários possam escolher apenas uma opção.
É possível usar vários elementos <input>
com type="radio"
e o mesmo valor name
. Os usuários veem todas as opções de uma vez, mas só podem escolher uma.
Outra opção é usar o elemento <select>
.
Os usuários podem percorrer uma lista de opções disponíveis e escolher uma.
Para alguns casos de uso, como escolher um intervalo de números,
<input>
do tipo range
pode ser uma boa opção.
Você precisa oferecer a possibilidade de selecionar várias opções?
Use um elemento <select>
com o atributo multiple
ou vários elementos <input>
do tipo checkbox
.
Também é possível usar um <input>
em combinação com o elemento <datalist>
.
Isso fornece uma combinação de um campo de texto e uma lista de elementos <option>
.
Garantir que os usuários possam preencher diferentes tipos de dados
Há mais tipos de entrada para casos de uso específicos.
Há um <input>
do tipo color
para fornecer aos usuários um seletor de cores em navegadores compatíveis,
assim como vários outros tipos. Para garantir que os usuários possam inserir a senha, use <input>
com type="password"
. Cada caractere inserido é coberto por um asterisco ("*") ou um ponto ("•")
para garantir que a senha não possa ser lida.
Quer incluir um token de segurança exclusivo nos dados do formulário?
Use <input>
com type="hidden"
.
O valor de uma <input>
do tipo hidden
não pode ser visto nem modificado pelos usuários.
Para permitir que os usuários façam upload e enviem arquivos, use <input>
com type="file"
.
Também é possível definir elementos personalizados se você tiver um caso de uso especial, em que nenhum elemento ou tipo integrado seja adequado.
Ajude os usuários a preencherem seu formulário
Há muitos elementos e tipos de formulário, mas qual você escolheria?
Em alguns casos de uso, é simples escolher o elemento e o tipo apropriados,
como <input type="date">
. Para outros, depende.
Por exemplo, é possível usar vários elementos <input>
com type="checkbox"
ou um elemento <select>
.
Saiba mais sobre como escolher entre caixas de listagem e listas suspensas.
Em geral, teste seu formulário com usuários reais para encontrar o melhor elemento e tipo de formulário.
Teste seu conhecimento
Teste seus conhecimentos sobre campos de formulário
É possível fazer upload de vários arquivos com um controle de formulário?
<input type="files">
.<input type="file" multiple>
.<input type="multiple-files">
.Qual é a diferença entre o type="text"
e o type="password"
?
type="password"
.type="password"
, todos os caracteres inseridos são obscurecidos por um asterisco (*
) ou um ponto (•
).type="password"
.