Input de e-mail

Problema

O formato dos e-mails requer a introdução de caracteres especiais, como o '@', que não estão logo acessíveis nos teclados virtuais, forçando o utilizador a ter localizar esses caracteres noutros formato do teclado.

Para além disso, devido ao uso de pontos('.') como separadores, alguns tipos de teclado tendem a interpretá-los como fim de frases e automaticamente capitalizam e/ou inserem um espaço após o ponto. Apesar do uso de caracteres maiúsculos.

Solução

Desativar a auto-correção e auto-capitalização. Invocar a versão do teclado virtual com o caracter "@" definindo o type="email".

Deve ser deixado claro porque está a ser pedido o email e dar feedback se o email está no formato correcto.

<form>
	<label>E-Mail: <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false"></label>
	<input type="submit" value="OK" />
</form>

Considerações adicionais

• O teclado virtual para email não é suportado em Windows Phone 7.5 e Xbox 360 (TODO: confirmar)
• O uso de atributos semelhantes como autocorrect e spellcheck servem para garantir a compatibilidade entre os diversos sistemas e browsers, pois um é usado pelo Android e o outro pelo iOS.

Input password

Problema

O utilizador tem de criar uma password que seja segura, para isso tem de respeitar algumas regras e ter o feedback de que é ou não segura.

Quando voltar terá de se lembrar da password para poder entrar.

Solução

Criação da password

Deve haver indicação de quais as regras a respeitar e ao introduzir a password deve haver feedback de quais as regras que já cumpre.

Ao inserir password

Depois de inserir password

Fonte: MailChimp

Outro exemplo

Introduzir password

Quando o utilizador volta e tenta introduzir a password que criou, devem ser controladas as tentativas falhadas.

Deve ser dada a opção de mudar a password e não deve ser mostrado onde está o erro, se é na password ou email pois pode levar a que outros conseguiam entrar na conta do utilizador.

Fonte: GOV.UK

Input morada e código postal

Problema

Ajudar os utilizadores a introduzirem a sua morada e código postal de forma rápida e fácil.

Solução

Introduzir o autocomplete para moradas ou utilizar o código postal para preencher a morada.

O tamanho do campos deve ser de acordo com os caracteres que irá ter, e não ser maior que o necessário, por exemplo, o código postal irá ter menos caracteres que o campo da morada.

		<!-- Genérico -->
		<input type="number" pattern="[\d - ]*">

		<!-- Portugal -->
		<input type="number" pattern="\d{4}([ -]\d{3})?">

		<!-- Moçambique -->
		<input type="number" pattern="\d{4}">

		<!-- Cabo Verde -->
		<input type="number" pattern="[1-9]\d{3}">

Foco automático de um campo ao carregar a página

O atributo autofocus pode ser usado nos casos em que o formulário é o elemento central da página, e como tal, queremos que os utilizadores comecem a usá-lo imediatamente quando a página carrega.

Não se deve usar em formulários que estão em páginas cujo seu conteúdo mais importante não é o formulário em si, como por exemplo uma página de resultados de pesquisa. Nesta página, o mais importante é que o utilizador navegue pelos resultados mostrados e não que faça uma nova pesquisa.

Solução

<form>
	<label>Pesquisar: <input type="search" name="search" autofocus /></label>
	<input type="submit" value="OK" />
</form>

Considerações adicionais

As situações onde isto se pode (e deve) usar são:

• Páginas de login, que contêm apenas um formulário para fazer login num serviço;
• Páginas de pesquisa, que incluem apenas um formulário de pesquisa no centro da página.

Referências

TODO

Usar o motor de sugestões do browser

Para facilitar o preenchimento dos formulários, alguns browsers preenchem automaticamente os campos de um formulário com informação do histórico de preenchimento de outros formulários que o utilizador já tenha preenchido anteriormente.

Solução

Usar os atributos name e autocomplete de modo a coincidir com o tipo de dados que o browser entende que estão a ser pedidos.

<form>
	<label>Nome: <input type="text" name="name" autocomplete="name" /></label>
	<label>E-Mail: <input type="email" name="email" autocomplete="email" /></label>
	<input type="submit" value="OK" />
</form>

Caso se pretenda evitar que o browser preencha automaticamente os campos do formulário, devemos usar o atributo autocomplete="off"

Referências

• Lista de valores recomendados para usar nos atributos name e autocomplete

Desativar as mensagens de erros inline do browser

Alguns browsers recentes usam um sistema próprio de validação inline de alguns campos, como por exemplo a validação de endereços de e-mail.

Se quisermos ter o controlo sobre as nossas próprias mensagens de erro, podemos desativar essa funcionalidade no formulário (não funciona apenas para um dos campos) usando os atributos novalidate e formnovalidate.

Solução 1

O formnovalidate deve ser usado no elemento <input> o que permite ter um botão que faz a validação do formulário e outro que não faz a validação.

<form>
	<label>E-Mail: <input type="email" name="email" /></label>
	<input type="submit" value="OK com validação" />
	<input type="submit" formnovalidate value="OK sem validação" />
</form>

Solução 2

O novalidate deve ser usado no elemento <form> e faz com que não seja feita qualquer validação pelo browser de nenhum dos campos do formulário após o submit.

<form novalidate>
	<label>E-Mail: <input type="email" name="email" /></label>
	<input type="submit" value="OK" />
</form>

Definir textos de ajuda/exemplo pré-preenchidos

Os campos de texto devem incluir um texto pré-preenchido que ajude o utilizador a perceber melhor o tipo de dados que lhe estão a ser pedidos (além do nome do próprio campo, que sempre que possível deverá estar visível no ecrã). Em termos de acessibilidade, é também uma boa ajuda para utilizadores que navegam com sistemas assistivos.

Solução

Usar o atributo placeholder para incluir um texto de exemplo dos dados que pretendemos que o utilizador preencha.

<form>
	<label>E-Mail: <input type="email" placeholder="O seu endereço de e-mail" name="email" /></label>
	<input type="submit" value="OK" />
</form>

Considerações adicionais

• Este atributo não funciona no Internet Explorer 9 e inferiores;
• O texto do placeholder deve ser visualmente diferente do texto que o utilizador preencher no formulário. Por exemplo, o texto do placeholder pode ser a cinza, enquanto que o texto preenchido pelo utilizador deve ser a preto.

Referências

TODO

Marcar os campos obrigatórios

Podemos marcar os campos que são de preenchimento obrigatórios de modo a que o browser obrigue que tenham de ser preenchidos antes da submissão do formulário.

Solução

Usando o atributo required o próprio browser vai fazer a validação inline do preenchimento dos formulários e permite dar uma mensagem de aviso se o utilizador não preencher os campos obrigatórios.

<form>
	<label>E-Mail (obrigatório): <input type="email" required name="email" /></label>
	<input type="submit" value="OK" />
</form>

Considerações adicionais

Independentemente de se usar esta validação através do browser ou uma validação por JavaScript, deve ter que haver sempre uma validação server-side que evite que os campos de preenchimento obrigatórios sejam deixados em branco.