Campos do formulário em detalhes

Para oferecer a melhor experiência possível ao usuário, use o elemento e o elemento type mais adequados aos dados que o usuário está inserindo.

Ajudar os usuários a preencher textos

Use o elemento <input> para fornecer um campo de formulário. Um <input> é a melhor opção para palavras, frases e entradas curtas. Para textos mais longos, use o elemento <textarea>. Isso permite várias linhas de texto e facilita para o usuário ver o texto inserido, já que o elemento pode ser rolado e redimensionado.

Verifique se os usuários inserem 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 recebem um teclado na tela adaptado, garantindo que eles possam inserir o número de telefone mais rapidamente.

Para um endereço de e-mail, use type="email". De novo, um teclado na tela adaptado é mostrado. Use o atributo required para tornar o campo obrigatório. Quando o formulário é enviado, o navegador verifica se a entrada tem um valor e se ele é válido. Nesse caso, se é um endereço de e-mail 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 possível, use type="checkbox". Você quer oferecer várias opções? Dependendo do seu caso de uso, há várias alternativas. Primeiro, confira possíveis soluções se os usuários só puderem escolher 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 rolar uma lista de opções disponíveis e escolher uma delas.

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 capacidade 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 oferece 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 oferecer aos usuários um seletor de cores em navegadores compatíveis, além de vários outros tipos. Para garantir que os usuários possam inserir a senha, use <input> com type="password". Cada caractere inserido é ocultado 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.

Ajudar os usuários a preencher seu formulário

Existem muitos elementos e tipos de formulário, mas qual deles você deve escolher?

Em alguns casos de uso, é fácil escolher o elemento e o tipo apropriados, 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 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

Recursos

• O elemento <input>
• O elemento <textarea>
• O elemento <select>
• Tipos de <input>
• Elementos de formulário personalizados