Passo 1 de 6
Separar a finalidade do campo do nome de envio
Identifique o que autocomplete informa ao navegador e por que seu valor não precisa coincidir com o de name.
Trilha de aprendizado · Nível 6 · Tutorial 7
Ao concluir, você poderá informar ao navegador a finalidade dos campos e sugerir teclados virtuais adequados, reduzindo o esforço de preenchimento sem confundir essas dicas com validação.
Separar a finalidade do campo do nome de envio
Identifique o que autocomplete informa ao navegador e por que seu valor não precisa coincidir com o de name. 2 min
Escolher tokens para dados pessoais e endereço
Escolha o token de autocomplete pela informação solicitada: nome, contato, endereço de rua ou CEP. 2 min
Configurar o formulário sem prometer o preenchimento
Combine a configuração geral de autocomplete com indicações nos campos e reconheça os limites dessas dicas. 2 min
Diferenciar senha atual de nova senha
Escolha o token de autocomplete para senhas existentes e senhas que serão criadas, mantendo type="password". 1 min
Sugerir o teclado com inputmode
Escolha entre numeric e decimal para facilitar a digitação, mantendo o tipo do campo e sem confundir teclado sugerido com validação. 2 min
Aplicar as dicas em um formulário completo
Aprimore um cadastro com autocomplete e inputmode, preserve sua estrutura e explique os limites dessas indicações. 3 min
Passo 1 de 6
Identifique o que autocomplete informa ao navegador e por que seu valor não precisa coincidir com o de name.
O atributo autocomplete indica ao navegador a finalidade do campo para apoiar o preenchimento automático. Neste campo já estruturado, acrescentamos autocomplete="email" para indicar que a informação solicitada é um endereço de e-mail.
<label for="email-contato">E-mail</label>
<input
type="email"
id="email-contato"
name="contato"
autocomplete="email"
>Aqui, autocomplete="email" comunica a finalidade; name="contato" mantém a chave esperada no envio. Os valores não precisam ser iguais: cada atributo tem uma função.
Um campo usa name="contato" e autocomplete="email". Qual é a interpretação correta?
Os valores de autocomplete que identificam finalidades são chamados de tokens. Eles são padronizados e não devem ser traduzidos.
Para e-mail, use email, sem hífen, mesmo em uma interface em português. Não substitua por e-mail nem por correio_eletronico.
Dica
Já o valor de name segue o nome esperado no envio. Por isso, name="correio_eletronico" pode coexistir com autocomplete="email".
<label for="email-principal">E-mail principal</label>
<input
type="email"
id="email-principal"
name="email_principal"
autocomplete="____"
>O sistema espera a chave email_principal no envio. Preencha a lacuna de autocomplete com o token adequado, sem alterar name. Digite apenas o token.
Passo 2 de 6
Escolha o token de autocomplete pela informação solicitada: nome, contato, endereço de rua ou CEP.
Escolha o valor de autocomplete conforme o que o campo pede:
name: nome completo.given-name: nome, em um formulário que separa nome e sobrenome.family-name: sobrenome, nessa mesma organização.Não é preciso dividir um campo de nome completo só para usar os tokens separados.
Para telefone, use tel; para e-mail, use email.
<label for="telefone">Telefone</label>
<input type="tel" id="telefone" name="fone" autocomplete="tel">
<label for="email">E-mail</label>
<input type="email" id="email" name="contato" autocomplete="email">Relacione a informação solicitada ao valor de autocomplete.
Toque em um item e depois no par correspondente.
street-address: endereço de rua, incluindo logradouro, número e complemento quando reunidos no campo.postal-code: código postal, como o CEP brasileiro.Um campo de CEP não pede o endereço de rua: ele tem seu próprio token.
<label for="endereco">Endereço (logradouro, número e complemento)</label>
<textarea id="endereco" name="local_entrega"
autocomplete="street-address"></textarea>Dica
Esse endereço também poderia ser solicitado em um input de uma linha. Escolha o token pelo dado pedido, não pela aparência do controle nem pelo valor de name.
Complete apenas o token de autocomplete para este campo que reúne logradouro, número e complemento:
<label for="local">Endereço (logradouro, número e complemento)</label>
<input type="text" id="local" name="local_entrega"
autocomplete="____">Complete apenas o token de autocomplete, mantendo o nome de envio fornecido:
<label for="cep">CEP</label>
<input type="text" id="cep" name="codigo_entrega"
autocomplete="____">
Passo 3 de 6
Combine a configuração geral de autocomplete com indicações nos campos e reconheça os limites dessas dicas.
No form, use autocomplete="on" ou autocomplete="off" como configuração geral para os controles associados que não tenham uma configuração própria.
on: permite o preenchimento automático, sem indicar uma finalidade específica.off: solicita que o preenchimento automático não seja realizado.Se o controle declarar seu próprio autocomplete, essa configuração prevalece sobre a do formulário.
O campo de nome segue o off do formulário. Já o campo de e-mail usa sua própria indicação: email.
<form autocomplete="off">
<label for="nome">Nome completo</label>
<input type="text" id="nome" name="nome_completo">
<label for="email">E-mail</label>
<input type="email" id="email" name="contato"
autocomplete="email">
</form>Associe cada combinação à configuração resultante. Considere o que o HTML declara, não o que o navegador necessariamente fará.
Toque em um item e depois no par correspondente.
Mesmo com on ou um token específico, o campo pode continuar vazio. O preenchimento depende do navegador, das preferências do usuário e dos dados disponíveis.
Atenção
Navegadores e gerenciadores de senhas podem desconsiderar off, especialmente em campos de acesso. Não conte com esse valor para impedir todo preenchimento automático ou proteger dados.
Ao revisar um formulário, como você deve descrever on e off?
Passo 4 de 6
Escolha o token de autocomplete para senhas existentes e senhas que serão criadas, mantendo type="password".
Os campos continuam usando type="password". O que muda é a finalidade informada por autocomplete:
autocomplete="current-password": senha já existente, como no acesso a uma conta.autocomplete="new-password": senha que será criada, como no cadastro ou na alteração de senha.Digite somente o token de autocomplete, sem aspas. Não digite senhas reais.
O campo pede a senha que o usuário já cadastrou. Complete:
<label>
Senha
<input type="password" name="senha"
autocomplete="_____">
</label>O campo pede que o usuário crie uma senha. Complete:
<label>
Crie sua senha
<input type="password" name="senha"
autocomplete="_____">
</label>Uma tela de alteração de senha pode pedir a senha atual e a nova senha. Não escolha um único token para toda a tela: configure cada campo conforme a senha que ele solicita.
Dica
Esses tokens ajudam o navegador e o gerenciador de senhas a interpretar os campos. Eles não implementam autenticação, não criam uma conta e não definem regras de senha.
Escolha a combinação para estes campos:
<label>
Senha atual
<input type="password" name="senha_atual"
autocomplete="A">
</label>
<label>
Nova senha
<input type="password" name="senha_nova"
autocomplete="B">
</label>
Passo 5 de 6
Escolha entre numeric e decimal para facilitar a digitação, mantendo o tipo do campo e sem confundir teclado sugerido com validação.
Enquanto autocomplete informa a finalidade do campo, inputmode sugere um teclado virtual para facilitar a digitação no celular. Um atributo não substitui o outro.
Exemplo
inputmode="numeric": favorece a digitação de dígitos, como os de um CEP.inputmode="decimal": sugere um teclado com dígitos e separador decimal, útil quando a digitação inclui uma parte decimal.Dica
O navegador e o dispositivo decidem qual teclado oferecer. Em decimal, o separador pode aparecer como vírgula ou ponto, conforme a localidade e o dispositivo. Não há garantia de uma disposição específica de teclas.
Associe cada intenção ao atributo e ao valor adequados.
Toque em um item e depois no par correspondente.
O CEP continua sendo um identificador textual, não uma quantidade. Mantenha type="text" e acrescente inputmode="numeric": não é necessário mudar para type="number" para sugerir um teclado numérico.
<label for="cep">CEP</label>
<input
type="text"
id="cep"
name="cep_entrega"
autocomplete="postal-code"
inputmode="numeric"
>Atenção
inputmode não bloqueia caracteres nem valida o conteúdo. Colagem, teclado físico e outras formas de entrada continuam possíveis. A dica facilita a digitação, mas não garante que o valor seja um CEP válido.
No campo de CEP mostrado, o atributo inputmode="numeric", por si só, impede que o usuário cole ABC.
Passo 6 de 6
Aprimore um cadastro com autocomplete e inputmode, preserve sua estrutura e explique os limites dessas indicações.
Configure autocomplete="on" no form, acrescente um token específico a cada campo e sugira um teclado para digitar os dígitos do CEP. Preserve os nomes de envio, os tipos e os rótulos. O destino deste formulário é ilustrativo: não envie dados.
<form action="/cadastro" method="post">
<label for="nome">Nome completo</label>
<input type="text" id="nome" name="nome_cliente">
<label for="email">E-mail</label>
<input type="email" id="email" name="email_contato">
<label for="telefone">Telefone</label>
<input type="tel" id="telefone" name="telefone_contato">
<label for="endereco">Endereço (logradouro, número e complemento)</label>
<textarea id="endereco" name="endereco_entrega"></textarea>
<label for="cep">CEP</label>
<input type="text" id="cep" name="cep_entrega">
<label for="senha">Crie uma senha</label>
<input type="password" id="senha" name="senha_cadastro">
<button type="submit">Cadastrar</button>
</form>Liste as adições ao form e aos seis controles, identificando cada controle pelo seu name. Não precisa reescrever todo o HTML. Depois, justifique suas escolhas para o CEP e a criação de senha.
No campo de CEP:
No form, on é a configuração geral; as configurações explícitas nos controles prevalecem.
Dica
Se tiver um celular disponível, abra sua versão ajustada no ambiente de prática e observe as sugestões e o teclado do CEP, sem enviar o formulário. O acerto não depende de aparecerem sugestões nem de uma disposição específica das teclas.
Após os ajustes, o navegador não oferece preenchimento automático. No CEP, o usuário consegue colar letras, mesmo com inputmode="numeric". Qual conclusão é correta?
Resumo
Parabéns! Você concluiu: Facilitar o preenchimento com autocomplete e inputmode
Tutorial concluído! Você praticou como comunicar finalidades e sugerir teclados. No próximo tutorial, verá como aplicar restrições de preenchimento com instruções claras.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
