Campos do formulário em detalhes

Quais campos do 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 opção para palavras soltas 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 pode ser rolável e redimensionável.

Garantir que os usuários insiram os dados no formato correto

Você quer ajudar os usuários a preencherem um número de telefone? Mude o atributo type para type="tel" na <input>. Os usuários de dispositivos móveis recebem um teclado na tela adaptado, garantindo que eles possam inserir o número de telefone com mais rapidez e facilidade.

Para um endereço de e-mail, use type="email". Mais uma vez, 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 é válido: neste caso, de que é 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 modernos oferecem interfaces personalizadas para a seleção de datas na forma de um seletor de datas.

Ajude 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". Você quer oferecer várias opções? Dependendo do caso de uso, há várias alternativas. Primeiro, vamos conferir as possíveis soluções caso os usuários possam escolher apenas uma opção.

Você pode usar vários elementos <input> com type="radio" e o mesmo valor de 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 resulta em 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.

Existe um <input> do tipo color para fornecer aos usuários um seletor de cores em navegadores compatíveis. e também há vários outros tipos. Para garantir que os usuários possam inserir a senha, use <input>. com type="password". Todos os caracteres inseridos são obscurecidos 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 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 é adequado.

Ajudar os usuários a preencher seu formulário

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

Para 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 <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 <input>
• Elementos de formulário personalizados