Antes do advento do HTML5, o tratamento de endereços de email requeria mais trabalho para validar os endereços de email usando Javascript. Bem, tudo o que agora não é necessário com o novo tipo de entrada HTML5 email.
O elemento de entrada de email foi especificamente concebido para tratar e validar endereços de email. Dependendo do navegador, alertará o utilizador de que a informação introduzida não está correcta e o formulário não será submetido até que o utilizador faça correcções.
Código da amostra:
<label for="email_input">Enter your email address:</label><input type="email" name="email" placeholder="Your Email">Utilização geral
Guardar o seguinte código num documento de texto e abri-lo com um web browser.
<!DOCTYPE html><html><head> <style> body { padding-top: 200px; padding-left: 300px } </style></head><body> <p>Please Provide Your Current E-Mail Address <form> <input type="email"> </form></body>Esta é a aparência da página:
Se quiser recolher vários endereços ao mesmo tempo, pode adicionar o atributo múltiplo:
<input type="email" multiple>O utilizador pode agora introduzir um ou mais endereços separados por uma vírgula.
Validação
Navegadores que suportam o tipo de entrada de correio electrónico fornecem suporte de validação de diferentes maneiras. Contudo, todos os navegadores utilizam um algoritmo de validação comum seguindo este padrão:
os requisitos mínimos são os símbolos @ e . e a falta de espaços entre os caracteres. É de notar que não é possível verificar se o endereço fornecido existe. Esta é uma questão a ser tratada pelo seu script lateral do servidor. Uma boa maneira de testar endereços de correio electrónico válidos é enviar um link para o endereço de correio electrónico que, quando clicado, confirma que o correio electrónico é válido.
Mozilla Firefox
Assim que o utilizador completar a digitação e passar para outro elemento, o Firefox verificará os dados introduzidos. Se não for um endereço de correio electrónico válido, a entrada aparecerá com uma margem vermelha, como mostrado abaixo:
Se o utilizador continuar a clicar no botão submeter sem alterar o correio electrónico fornecido, o formulário não será submetido e aparecerá uma dica de ferramenta mostrando a mensagem de erro na entrada.
Google Chrome
Google chrome não fornece qualquer suporte visual quando o utilizador introduz dados inválidos.
No entanto, no momento da submissão, aparece uma mensagem de erro com uma dica de ferramenta fornecendo uma pista sobre o que o utilizador deve fornecer.
Se desejar fornecer uma mensagem de erro personalizada ao utilizador, poderá utilizar o atributo título:
<input type="email" title="Please Provide A Valid Email Address !">Suporte de Navegador
O tipo de entrada de e-mail é amplamente suportado em todos os navegadores modernos. Consulte a tabela abaixo para obter a versão mínima suportada. IE 10.0 FireFox 4.0 Chrome 10.0 Chrome 10.0 Opera 11.0 Safari 4.0
Para detalhes de suporte de browsers, ver: Posso usar o tipo de entrada de e-mail
Geralmente, se a versão do navegador em uso não suportar este tipo de entrada, um texto do tipo de entrada será mostrado em vez disso. Quando estiver a manusear dados submetidos no lado do servidor, certifique-se de validar os dados você mesmo antes de os aceitar.
Nas plataformas Android e IOS, o teclado incluirá automaticamente as teclas @ e . sempre que o tipo de entrada for e-mail.
Porquê Utilizar este Novo Tipo de Entrada
- O tipo de entrada de e-mail facilita o desenvolvimento da web, uma vez que o trabalho de validação é feito pelo browser. Se o atributo requerido tiver sido especificado, o browser não aceitará o formulário a ser submetido.
- Pode escolher o estilo de todos os tipos de entrada de e-mail no seu website num estilo específico para que apareçam num estilo padrão em toda a linha.
- Os dispositivos móveis podem personalizar o teclado suave para corresponder à entrada de e-mail (com os @ e . facilmente acessível
Aplicado CSS
Para aplicar um determinado estilo apenas aos campos de entrada de correio electrónico, utilize o selector de atributos desta forma:
input{ background-color:#ccc;}Demo
Ver Também
- Como criar um campo de entrada telefónica em HTML5
- Como obter o valor da caixa de verificação na submissão de formulários