Campos do formulário em detalhes

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?

Sim, usando <input type="files">.
Tente novamente.
Sim, usando <input type="file" multiple>.
🎉
Não.
Tente novamente.
Sim, usando <input type="multiple-files">.
Tente novamente.

Qual é a diferença entre type="text" e type="password"?

Não há diferença.
Tente novamente.
Um teclado na tela adaptado para a entrada de senhas é mostrado para type="password".
Tente novamente.
Ao usar type="password", todos os caracteres inseridos são obscurecidos por um asterisco (*) ou um ponto ().
🎉
Uma interface personalizada para inserir senhas é mostrada para type="password".
Tente novamente.

Recursos