Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Crie formulários incríveis

Preencher formulários em celulares não é fácil. Os melhores formulários são aqueles com menos entradas. Bons formulários fornecem tipos de entrada semântica. As teclas de acesso devem ser adaptadas aos tipo de entrada do usuário; o usuário escolhe uma data em um calendário. Mantenha seu usuário informado. O usuário deve ser notificado pelas ferramentas de validação sobre o que fazer antes de enviar o formulário.

Crie formulários eficientes

Crie formulários eficientes evitando ações repetidas, perguntando apenas o necessário e oriente o usuário mostrando o ponto em que ele se encontra em formulários de várias partes.

TL;DR

  • Use dados existentes para oferecer sugestões ao preencher campos e ative o preenchimento automático.
  • Use barras de progresso claramente indicadas para ajudar o usuário a finalizar formulários de várias partes.
  • Forneça um calendário visual para que os usuários não precisem sair do seu site e ir para o aplicativo de calendário em seus smartphones.

Minimize ações e campos repetidos

Mostre o progresso em formulários de várias partes
No site Progressive.com, a primeira informação solicitada ao usuário é o CEP e essa informação é preenchida automaticamente na próxima parte do formulário.

Certifique-se de que seus formulários não tenham ações repetidas e apenas a quantidade necessária de campos e tire proveito do preenchimento automático, para que o usuário possa facilmente preencher os formulários com dados sugeridos.

Busque oportunidades de sugerir informações já conhecidas ou que podem ser antecipadas para evitar que o usuário precise fornecê-las. Por exemplo, pré-preencha o endereço de envio com o último endereço de envio fornecido pelo usuário.

Mostre ao usuário seu progresso

Mostre o progresso em formulários de várias partes
Use barras de progresso claramente rotuladas para ajudar os usuários a preencher formulários de várias partes.

As barras de progresso e menus devem transmitir precisamente o progresso geral em formulários e processos de várias etapas.

Se você inserir um formulário complexo demais em uma etapa inicial, o usuário provavelmente sairá de seu site antes de terminar o processo.

Forneça calendários visuais ao selecionar datas

Site do hotel com facilidade de uso do calendário
Site do hotel com widget de calendário de fácil uso para selecionar datas.

O usuário frequentemente precisa de mais contexto ao agendar compromissos e datas de viagem. Para facilitar o processo e evitar que o usuário saia do seu site para consultar o aplicativo de calendário, forneça um calendário visual com indicação clara para selecionar datas de início e término.

Escolha o melhor tipo de entrada

Agilize a entrada de informações usando o tipo de entrada correto. Os usuários gostam de sites que apresentem automaticamente teclados numéricos para inserir números de telefone ou quando os campos avançam automaticamente conforme são preenchidos. Procure oportunidades de eliminar toques desnecessários em seus formulários.

TL;DR

  • Selecione o tipo de entrada mais adequado para seus dados para simplificar a entrada.
  • Ofereça sugestões conforme o usuário digita com o elemento datalist.

Tipos de entrada HTML5

O HTML5 introduziu vários tipos de entrada novos. Esses novos tipos de entrada dão dicas para o navegador sobre qual tipo de layout de teclado exibir para teclados na tela. Os usuários podem inserir as informações necessárias com mais facilidade, sem precisar alterar seu teclado e vendo apenas as teclas adequadas para esse tipo de entrada.

Entrada type
url
Para inserir um URL. Deve começar com um esquema de URI válido, como http://, ftp:// ou mailto:.
tel
Para inserir números de telefone. Esse elemento não força uma determinada sintaxe para validação, portanto, se você deseja garantir um determinado formato, é possível usar um padrão.
email
Para inserir endereços de email e dicas de que a @ deve ser mostrada no teclado por padrão. Você pode adicionar o atributo multiple se mais de um endereço de email será fornecido.
search
Um campo de entrada de texto formatado de forma que seja consistente com o campo de pesquisa da plataforma.
number
Para entrada numérica, pode ser qualquer valor racional inteiro ou flutuante.
range
Para entrada numérica, mas diferente do tipo de entrada de número, o valor é menos importante. É exibido para o usuário como um controle deslizante.
datetime-local
Para inserir um valor de data e hora onde o fuso horário fornecido é o fuso horário local.
date
Para inserir uma data (apenas) sem fuso horário.
time
Para inserir uma hora (apenas) sem fuso horário.
week
Para inserir uma semana (apenas) sem fuso horário.
month
Para inserir um mês (apenas) sem fuso horário.
color
para selecionar uma cor.

Ofereça sugestões durante a entrada com o datalist

O elemento datalist não é um tipo de entrada, mas uma lista de valores de entrada sugeridos para associar com um campo de formulário. Permite que o navegador sugira opções de preenchimento automático conforme o usuário digita. Diferente de elementos select onde os usuários devem verificar longas listas para encontrar o valor que estão procurando e os limita apenas a essas listas, o elemento datalist fornece dicas conforme o usuário digita.

<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
  <option value="white">
  <option value="milk">
  <option value="dark">
</datalist>

Experimente

Observação: Os valores datalist são fornecidos como sugestões e o usuário não fica restrito às sugestões fornecidas.

Rotule e nomeie as entradas corretamente

Preencher formulários em celulares não é fácil. Os melhores formulários são aqueles com menos entradas. Bons formulários fornecem tipos de entrada semântica. As teclas de acesso devem ser adaptadas aos tipo de entrada do usuário; o usuário escolhe uma data em um calendário. Mantenha seu usuário informado. O usuário deve ser notificado pelas ferramentas de validação sobre o que fazer antes de enviar o formulário.

TL;DR

  • Sempre use label em entradas de formulário e certifique-se de que elas estejam visíveis quando o campo estiver em foco.
  • Use placeholder para fornecer orientações sobre o que é esperado.
  • Para ajudar o navegador a preencher automaticamente o formulário, use o name estabelecido para elementos e inclua o atributo autocomplete.

A importância dos rótulos

O elemento label fornece orientações para o usuário, dizendo qual informação é necessária em um elemento do formulário. Cada label é associado a um elemento de entrada colocando-o dentro do elemento label ou usando o atributo "for" . Aplicar rótulos em elementos de formulário também ajuda a melhorar o tamanho de destino do toque: o usuário pode tocar no rótulo ou na entrada para colocar o foco no elemento de entrada.

<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required id="frmAddressS"
  placeholder="123 Any Street" autocomplete="shipping street-address">

Experimente

Posicionamento e dimensionamento do rótulo

Rótulos e entradas devem ser grandes o suficiente para facilitar a seleção. Em portas de visualização verticais, os rótulos de campo devem estar acima dos elementos de entrada e ao lado deles na horizontal. Certifique-se de que os rótulos de campo e as caixas de entrada correspondentes estejam visíveis ao mesmo tempo. Tenha cuidado com gerenciadores de rolagem personalizados que podem rolar elementos de entrada no topo da página ocultando o rótulo ou o teclado virtual pode ocultar rótulos que estiverem abaixo dos elementos de entrada.

Use marcadores

O atributo placeholder fornece uma dica para o usuário sobre o que é esperado na entrada, geralmente exibindo o valor como texto claro até que o usuário comece a digitar no elemento.

<input type="text" placeholder="MM-YYYY" ...>

Use metadados para ativar o preenchimento automático

O usuário gosta quando os sites economizam tempo preenchendo automaticamente campos comuns como nomes, endereços de email e outros campos usados com frequência. Além disso, isso ajuda a reduzir possíveis erros de entrada, especialmente em teclados virtuais e pequenos dispositivos.

Os navegadores podem usar heurística para determinar quais campos podem preencher automaticamente com base nos dados especificados anteriormente pelo usuário e você pode dar dicas para o navegador com os atributos name e autocomplete em cada elemento de entrada.

Observação: O Chrome exige que elementos input sejam inseridos em uma tag <form> para ativar o preenchimento automático. Se eles não estiverem inseridos em uma tag form, o Chrome oferecerá sugestões, mas não preencherá o formulário.

Por exemplo, para avisar o navegador que ele deve preencher automaticamente o formulário com o nome do usuário, endereço de email e telefone, você deve usar:

<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
  placeholder="name@example.com" required autocomplete="email">

<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">

Experimente

Valores de atributo name e autocomplete de entrada recomendados

Os valores de atributo autocomplete fazem parte do Padrão HTML WHATWG atual. Abaixo estão os atributos autocomplete usados com frequência.

Os atributos autocomplete podem vir acompanhados de um nome de seção, como shippinggiven-name ou billingstreet-address. O navegador preencherá automaticamente diferentes seções de forma individual, não como um formulário contínuo.

Tipo de conteúdo Atributo name Atributo autocomplete
Nome name fname mname lname
  • name (nome completo)
  • given-name (primeiro nome)
  • additional-name (nome do meio)
  • family-name (sobrenome)
E-mail email email
Endereço address city region province state zip zip2 postal country
  • Para uma entrada de endereço:
    • street-address
  • Para duas entradas de endereço:
    • address-line1
    • address-line2
  • address-level1 (estado ou província)
  • address-level2 (cidade)
  • postal-code (código postal)
  • country
Telefone phone mobile country-code area-code exchange suffix ext tel
Cartão de crédito ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • cc-name
  • cc-number
  • cc-csc
  • cc-exp-month
  • cc-exp-year
  • cc-exp
  • cc-type
Nomes de usuário username
  • username
Senhas password
  • current-password (para formulários de login)
  • new-password (para formulários de inscrição e de alteração de senha)

Observação: Use somente street-address ou address-line1 e address-line2. address-level1 e address-level2 são necessários apenas se forem exigidos pelo seu formato de endereço.

O atributo autofocus

Em alguns formulários, como a página inicial do Google, onde a única coisa que o usuário deve fazer é preencher um determinado campo, é possível adicionar o atributo autofocus . Quando ativado, o navegador desktop move o foco imediatamente para o campo de entrada, tornando mais fácil para o usuário começar usar o formulário com mais rapidez. Navegadores móveis ignoram o atributo autofocus, para evitar que o teclado apareça aleatoriamente.

Tenha cuidado ao usar o atributo autofocus porque ele roubará o foco do teclado e possivelmente evitará que o caractere backspace seja usado para navegação.

<input type="text" autofocus ...>

Forneça validação em tempo real

A validação de dados em tempo real não apenas ajuda a manter seus dados limpos, mas também ajuda a melhorar a experiência do usuário. Os navegadores modernos têm várias ferramentas integradas para ajudar a fornecer validação de dados em tempo real e podem evitar que o usuário envie um formulário inválido. Use dicas visuais para indicar se um formulário foi preenchido corretamente.

TL;DR

  • Utilize os atributos de validação integrados do navegador, como pattern, required, min, max etc.
  • Use JavaScript e Constraints Validation API para requisitos de validação mais complexos.
  • Mostre erros de validação em tempo real e, se o usuário tentar enviar um formulário inválido, mostre todos os campos que precisam ser corrigidos.

Use esses atributos para validar a entrada

O atributo pattern

O atributo pattern especifica uma expressão regular usada para validar um campo de entrada. Por exemplo, para validar um código postal dos EUA (5 dígitos, algumas vezes seguido por um traço e mais 4 dígitos), precisaríamos definir o pattern da seguinte forma:

<input type="text" pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>
Padrões de expressão regular comuns
Expressão regular
Endereço de correspondência [a-zA-Z\d\s\-\,\#\.\+]+
Código postal (EUA) ^\d{5,6}(?:[-\s]\d{4})?$
Endereço IP (IPv4) ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$
Endereço IP (IPv6) ^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
Endereço IP (ambos) ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
Número do cartão de crédito ^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|6(?:011|5[0-9]{2})[0-9]{12}|(?:2131|1800|35\d{3})\d{11})$
Número do Seguro Social ^\d{3}-\d{2}-\d{4}$
Número de telefone da América do Norte ^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$

O atributo required

Se o atributo required estiver presente, o campo deve conter um valor para que o formulário possa ser enviado. Por exemplo, para criar o código postal necessário, apenas adicionamos o atributo necessário:

<input type="text" required pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>

Os atributos min, max e step

Para tipos de entrada numérica como um número ou intervalo, assim como entradas de data/hora, pode-se especificar os valores mínimo e máximo, assim como quanto cada um deve aumentar/diminuir quando ajustado pelo controle deslizante ou giratório. Por exemplo, uma entrada de tamanho de sapato define um tamanho mínimo de 1 e um tamanho máximo de 13, com incrementos de 0,5

<input type="number" min="1" max="13" step="0.5" ...>

O atributo maxlength

O atributo maxlength pode ser usado para especificar o comprimento máximo de uma entrada ou caixa de texto e é útil para limitar o tamanho da informação que o usuário pode fornecer. Por exemplo, se deseja limitar um nome de arquivo a 12 caracteres, é possível usar o seguinte.

<input type="text" id="83filename" maxlength="12" ...>

O atributo minlength

O atributo minlength pode ser usado para especificar o tamanho mínimo de uma entrada ou caixa de texto e é útil para se especificar o tamanho mínimo que o usuário deve fornecer. Por exemplo, se deseja especificar que um nome de arquivo deve ter pelo menos 8 caracteres, é possível usar o seguinte.

<input type="text" id="83filename" minlength="8" ...>

O atributo novalidate

Em alguns casos, você pode permitir que o usuário envie o formulário mesmo que ele contenha entradas inválidas. Para isso, adicione o atributo novalidate ao elemento de formulário ou campos de entrada individuais. Nesse caso, todas as pseudoclasses e JavaScript APIs ainda permitirão que você verifique se o formulário é válido.

<form role="form" novalidate>
  <label for="inpEmail">Email address</label>
  <input type="email" ...>
</form>

Use JavaScript para validações em tempo real mais complexas

Quando a validação integrada e as expressões regulares não são suficientes, você pode usar a Constraint Validation API, uma excelente ferramenta para lidar com validação personalizada. A API permite que você faça coisas como definir um erro personalizado, verificar se um elemento é válido e determinar o motivo pelo qual um elemento é inválido:

Validação de limitação
setCustomValidity() Define uma mensagem de validação personalizada e a propriedade customError do objeto ValidityState para true.
validationMessage Retorna uma cadeia de caracteres com o motivo da falha da entrada no teste de validação.
checkValidity() Retorna true se o elemento atender a todas as exigências, caso contrário, false. Decidir como a página responde quando a verificação retorna false é responsabilidade do desenvolvedor.
reportValidity() Retorna true se o elemento atender a todas as exigências, caso contrário, false. Quando a página responde false, problemas de restrição são relatados ao usuário.
validity Retorna um objeto ValidityState que representa os estados de validação do elemento.

Defina mensagens de validação personalizadas

Se a validação de um campo falhar, use setCustomValidity() para marcar o campo inválido e explique porque o campo não foi validado. Por exemplo, um formulário de inscrição pode pedir que o usuário confirme seu endereço de email inserindo-o duas vezes. Use o evento blur na segunda entrada para validar as duas entradas e defina a resposta adequada. Por exemplo:

if (input.value != primaryEmail) {
  // the provided value doesn't match the primary email address
  input.setCustomValidity('The two email addresses must match.');
  console.log("E-mail addresses do not match", primaryEmail, input.value);
} else {
  // input is valid -- reset the error message
  input.setCustomValidity('');
}

Experimente

Impeça o envio de formulários inválidos

Como nem todos os navegadores impedem que o usuário envie o formulário se ele contiver dados inválidos, você deve interceptar o evento submit e usar checkValidity() no elemento form para determinar se o formulário é válido. Por exemplo:

form.addEventListener("submit", function(evt) {
  if (form.checkValidity() === false) {
    evt.preventDefault();
    alert("Form is invalid - submission prevented!");
    return false;
  } else {
    // To prevent data from being sent, we've prevented submission
    // here, but normally this code block would not exist.
    evt.preventDefault();
    alert("Form is valid - submission prevented to protect privacy.");
    return false;
  }
});

Experimente

Mostre feedback em tempo real

É útil fornecer uma indicação visual em cada campo para informar se o usuário preencheu o formulário corretamente antes do envio. O HTML5 também introduz diversas novas pseudoclasses que podem ser usadas para estilizar as entradas com base em seus valores ou atributos.

Feedback em tempo real
:valid Define explicitamente o estilo de uma entrada a ser usado quando o valor atende todos os requisitos de validação.
:invalid Define explicitamente o estilo de uma entrada a ser usado quando o valor não atende todos os requisitos de validação.
:required Define explicitamente o estilo de um elemento de entrada que tem o atributo required definido.
:optional Define explicitamente o estilo de um elemento de entrada que não tem o atributo required definido.
:in-range Define explicitamente o estilo de um elemento de entrada numérica quando o valor está no intervalo.
:out-of-range Define explicitamente o estilo de um elemento de entrada numérica quando o valor não estiver dentro do intervalo.

A validação ocorre imediatamente, o que significa que quando a página é carregada, os campos podem ser marcados como inválidos, mesmo se o usuário ainda não tiver terminado o preenchimento . Também significa que conforme o usuário digita, é possível que ele veja o estilo inválido ao digitar. Para evitar esse problema, combine o CSS com JavaScript para mostrar o estilo inválido apenas quando o usuário já tiver visitado o campo.

input.dirty:not(:focus):invalid {
  background-color: #FFD9D9;
}
input.dirty:not(:focus):valid {
  background-color: #D9FFD9;
}
var inputs = document.getElementsByTagName("input");
var inputs_len = inputs.length;
var addDirtyClass = function(evt) {
  sampleCompleted("Forms-order-dirty");
  evt.srcElement.classList.toggle("dirty", true);
};
for (var i = 0; i < inputs_len; i++) {
  var input = inputs[i];
  input.addEventListener("blur", addDirtyClass);
  input.addEventListener("invalid", addDirtyClass);
  input.addEventListener("valid", addDirtyClass);
}

Experimente