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".