A função de preenchimento automático de formulários é agora uma funcionalidade bem-vinda na Internet. Quando se digita algo em um campo de formulário, os navegadores - se a função estiver ativada e suportada pelo navegador - oferecem uma lista de sugestões de palavras.
Tais aplicações podem ser implementadas muito facilmente a partir de agora. Para fazer isso, o elemento input é atribuído o atributo autocomplete.
Por meio do valor on, o preenchimento automático é ativado para o campo. A partir de agora, o navegador armazena os valores inseridos no campo e os oferece posteriormente em uma lista de seleção. Isso torna o preenchimento de formulários muito mais rápido.
No entanto, esse comportamento não é desejado em todos os campos. Nestes casos, o preenchimento automático pode ser desativado explicitamente. Para isso, o atributo autocomplete é atribuído o valor off.
Além disso, também é possível adicionar o atributo autocomplete ao elemento form. Dependendo se o valor on ou off é usado aqui, a função de preenchimento automático será ativada ou desativada para todo o formulário.
Se houver indicações contraditórias dentro do formulário, no entanto, estas prevalecem.
Neste exemplo, o preenchimento automático seria aplicado a todos os campos do formulário, pois no elemento form introdutório o valor de autocomplete é definido como on. A exceção aqui é exclusivamente o campo vname. Pois neste campo, o preenchimento automático foi explicitamente desativado.
Para que o preenchimento automático funcione, essa função deve ser suportada pelo navegador em questão e não deve ter sido desativada. Além disso, na lista de sugestões, apenas valores que foram inseridos anteriormente uma vez são exibidos.
Para realmente influenciar os valores na lista de sugestões, o elemento datalist foi introduzido no HTML5. Este elemento não resulta em uma saída visível no navegador. Os valores para as listas de sugestões podem ser definidos através dos elementos option aninhados. Um exemplo:
Através do atributo list do elemento input, uma conexão lógica entre o campo de entrada e o elemento datalist é estabelecida. Para isto, os mesmos valores devem ser usados em list e no atributo id do elemento datalist.
### Definir o Foco
Um campo de formulário pode automaticamente ser atribuído o foco quando a página é carregada. Uma função assim é conhecida, por exemplo, na página inicial do Google. Quando esta página é carregada, é possível digitar imediatamente o termo de pesquisa, sem antes ter definido manualmente o cursor no campo de pesquisa.
Em HTML5, existe o atributo autofocus para tais casos. Esse atributo garante que o campo de formulário equipado com ele receba automaticamente o foco ao carregar a página.
Navegadores que não reconhecem o atributo autofocus simplesmente o ignoram. Isso não tem efeitos negativos (embora o campo não seja focado).
### Verificar Entradas
Até agora, as entradas de formulários não podiam ser verificadas apenas com os recursos do HTML. Se, por exemplo, se quisesse testar se um usuário realmente inseriu um endereço de e-mail em um campo de formulário, normalmente se recorria ao JavaScript ou PHP. Em HTML5, tais "contorcionismos" não são mais necessários. Pois a partir de agora, o HTML vem com uma API de validação. E essa API é bastante poderosa. Com muito pouco esforço, as entradas de formulários podem ser verificadas.
HTML5 possui algumas regras que determinam como os campos são validados. Por exemplo, os campos de entrada do tipo email são verificados para ver se um endereço de e-mail sintaticamente correto foi inserido.
- url – Verifica a URL
- email – Verifica o endereço de e-mail
- range – Verifica o número de ponto flutuante
- number – Verifica o número de ponto flutuante
Para marcar um campo como obrigatório, o atributo required é atribuído a ele.
<input id="vname" name="vname" type="text" required="required" />
Um campo marcado assim deve ser preenchido, ou seja, não pode estar vazio.
Mas atenção: Para que os campos sejam validados, certas condições devem ser cumpridas.
• O elemento deve ter o atributo name atribuído.
• O elemento deve estar dentro de um elemento form, ou seja, dentro de um formulário HTML. Alternativamente, a conexão com o formulário também pode ser feita através do atributo form.
• O elemento não pode ter nem o atributo readonly nem disabled.
Uma aplicação correta seria a seguinte:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Neste caso, o navegador verifica se o campo foi preenchido. Se o campo estiver vazio e, mesmo assim, for tentado enviar o formulário, o navegador deve exibir uma mensagem de erro agora.
Ao longo desta série, já foram mencionados várias vezes os tipos de campos de formulário email, range, number, tel e url. Esses campos não são apenas verificados quanto à presença de um valor, mas também se o valor inserido está correto.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
No caso dos campos do tipo email, por exemplo, é verificado se o valor inserido realmente corresponde a um endereço de e-mail sintaticamente correto. Se não for o caso, o navegador exibirá uma mensagem de erro.
A exibição da mensagem de erro é de responsabilidade dos navegadores.
Evitar validação automática dos campos
Nem sempre é desejável uma validação automática das entradas. Se deseja-se impedir a validação do formulário inteiro, atribui-se ao elemento form inicial o atributo novalidate.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Alternativamente, o atributo formnovalidate pode ser adicionado a um botão de Envio. Isso é interessante, por exemplo, quando se deseja oferecer um botão para salvar o formulário em paralelo a um botão de envio.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Enviar" />
<input type="submit"
formnovalidate="formnovalidate" value="Salvar" />
<input type="submit"
formnovalidate="formnovalidate" value="Sair" />
</form>
Nesse caso, o formulário será validado apenas pelo primeiro botão de Envio. Os outros dois servem para salvar e sair. Uma validação não é necessária nestes casos.
