Prima dell’avvento di HTML5, la gestione degli indirizzi email richiedeva più lavoro per validare gli indirizzi email usando Javascript. Bene, tutto questo ora non è più necessario con il nuovo HTML5 input type email.
L’elemento email input è stato specificamente progettato per gestire e validare gli indirizzi email. A seconda del browser, avviserà l’utente che le informazioni inserite non sono corrette e il modulo non verrà inviato fino a quando l’utente non farà le correzioni.
Codice di esempio:
<label for="email_input">Enter your email address:</label><input type="email" name="email" placeholder="Your Email">Uso generale
Salva il seguente codice in un documento di testo e aprilo con un browser web.
<!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>Ecco come dovrebbe apparire la pagina:
Se vuoi raccogliere più indirizzi contemporaneamente, puoi aggiungere l’attributo multiple:
<input type="email" multiple>L’utente può ora inserire uno o più indirizzi separati da una virgola.
Validazione
I browser che supportano il tipo di input email forniscono il supporto alla validazione in modi diversi. Tuttavia, tutti i browser usano un algoritmo di validazione comune che segue questo schema:
i requisiti minimi sono i simboli @ e . e la mancanza di spazi tra i caratteri. Si prega di notare che non è possibile verificare se l’indirizzo fornito esiste. Questo è un problema che deve essere gestito dal tuo script lato server. Un buon modo per testare la validità degli indirizzi email è quello di inviare un link all’indirizzo email che, quando viene cliccato, conferma che l’email è valida.
Mozilla Firefox
Non appena l’utente completa la digitazione e passa ad un altro elemento, Firefox controlla i dati inseriti. Se non è un indirizzo email valido, l’input apparirà con un bordo rosso come mostrato qui sotto:
Se l’utente procede a fare clic sul pulsante di invio senza cambiare l’email fornita, il modulo non verrà inviato e apparirà un tooltip che mostra il messaggio di errore sull’input.
Google Chrome
Google chrome non fornisce alcun supporto visivo quando l’utente inserisce dati non validi.
Tuttavia, all’invio, appare un messaggio di errore con un tooltip che fornisce un indizio su cosa l’utente dovrebbe fornire.
Se vuoi fornire un messaggio di errore personalizzato all’utente, puoi usare l’attributo title:
<input type="email" title="Please Provide A Valid Email Address !">Supporto browser
Il tipo di input email è ampiamente supportato in tutti i browser moderni. Controlla la tabella qui sotto per la versione minima supportata. IE 10.0 FireFox 4.0 Chrome 10.0 Opera 11.0 Safari 4.0
Per i dettagli sul supporto del browser, vedi: Posso usare il tipo di input e-mail
Generalmente, se la versione del browser in uso non supporta questo tipo di input, verrà invece mostrato un testo di tipo input. Quando gestisci i dati inviati sul lato server, assicurati di convalidare tu stesso i dati prima di accettarli.
Sulle piattaforme Android e IOS, la tastiera includerà automaticamente i tasti @ e . ogni volta che il tipo di input è email.
Perché usare questo nuovo tipo di input
- Il tipo di input email rende lo sviluppo web più facile, poiché il lavoro di convalida è fatto dal browser. Se l’attributo required è stato specificato, il browser non accetterà che il modulo venga inviato.
- Si può scegliere di stilizzare tutte le email di tipo input nel proprio sito web in uno stile specifico in modo che appaiano in uno stile standard su tutta la linea.
- I dispositivi mobili possono personalizzare la soft keyboard per abbinare l’input dell’email (con la @ e . facilmente accessibili
CSS applicati
Per applicare un certo stile solo ai campi di input e-mail, utilizzare il selettore di attributi come questo:
input{ background-color:#ccc;}Demo
Vedi anche
- Come creare un campo di input telefonico in HTML5
- Come ottenere il valore della checkbox nell’invio del modulo