Quais campos de formulário posso usar?
Para oferecer a melhor experiência possível ao usuário,
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 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 digitado pelo usuário, já que o elemento pode ser rolado e redimensionado.
Garantir que os usuários insiram 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 recebem um teclado na tela adaptado,
garantindo que possam digitar o número de telefone com mais rapidez e facilidade.
Para um endereço de e-mail, use type="email"
.
Novamente, um teclado na tela adaptado é 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 ele é válido. Nesse caso,
ele verifica se o endereço de e-mail está bem formatado.
Saiba mais sobre os diferentes tipos de entrada. Eles 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 de posição, como yyyy-mm-dd
,
demonstrando como inserir a data.
Todos os navegadores modernos oferecem interfaces personalizadas para selecionar datas na forma de um seletor de datas.
Ajudar os usuários a selecionar uma opção
Para garantir que os usuários possam selecionar ou desmarcar uma opção, use type="checkbox"
.
Você quer oferecer várias opções?
Dependendo do caso de uso, há várias alternativas.
Primeiro, vamos analisar as soluções possíveis se os usuários só puderem escolher uma única 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 rolar 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
.
Você também pode 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>
.
Garanta 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 nos navegadores compatíveis,
e há vários outros tipos também. Para garantir que os usuários possam inserir a senha, use <input>
com type="password"
. Cada caractere inserido é obscurecido por um asterisco ("*") ou um ponto ("•"),
para garantir que a senha não possa ser lida.
Você quer incluir um token de segurança exclusivo nos dados do formulário?
Use <input>
com type="hidden"
.
O valor de um <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 preencher seu formulário
Existem muitos elementos e tipos de formulários, mas qual deles você deve escolher?
Em alguns casos de uso, é fácil escolher o elemento e o tipo adequados,
como <input type="date">
. Para outras, 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 seleção 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 type="text"
e type="password"
?
type="password"
.type="password"
, todos os caracteres inseridos são obscurecidos por um asterisco (*
) ou um ponto (•
).type="password"
.