HTML: Como ativar o autocomplete no input
Neste artigo veremos como ativar o autocomplete no input, e assim deixar que a página faça sugestões para o usuário do que pode ser automaticamente preenchido.
Fala programador(a), beleza? Bora aprender coisa nova!
Com a vinda do HTML5 em 2014, vários recursos foram adicionados e vem sendo
Um deles foi a opção de autocomplete nos inputs de formulário, que tem como premissa ajudar os usuários
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
E isso é facilmente acionável pelo atributo autocomplete em inputs, é a única coisa que precisamos fazer, veja:
<!DOCTYPE html>
<html>
<head>
<title>Como ativar o autocomplete no input</title>
</head>
<body>
<form>
<p>Preencha o formulário:</p>
<div>
<input type="email" name="email" placeholder="Digite seu e-mail" autocomplete>
</div>
<div>
<input type="submit" value="Enviar">
</div>
</form>
</body>
</html>
E o resultado na tela é este:
Temos todas as opções que já utilizamos em um campo de e-mail, segundo este exemplo, para escolher
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Claro que podemos utilizar com outros tipos de valores, não só e-mail
Então com o atributo autocomplete conseguimos ativar o autocomplete no input de nosso formulário
Outra ideia importante que podemos extrair deste exemplo é o uso dos atributos do HTML
Um que ajuda bastante o usuário também, é o placeholder
Este serve para darmos uma dica para o que o usuário deve preencher em determinado campo do formulário
Conforme a complexidade do dado que precisamos que o usuário preencha, é realmente uma mão na roda
E também podemos utilizar outros como o required, que torna o campo obrigatório
Enfim, o mundo dos atributos é imenso, sugiro que você de uma pesquisada 😀
Conclusão
Neste artigo vimos como é fácil acionar o autocomplete em um formulário de HTML para os inputs do mesmo
Apenas precisamos adicionar o atributo autocomplete no input desejado e assim serão feitas as sugestões
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
Formações
Formação SAAS com IA
Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!
- 291 aulas
- 18 projetos
- 24h 17min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação A popularidade da automação de processos com o n8n está em alta, principalmente […]
Qual é o autocomplete do número da rua