Przed pojawieniem się HTML5, obsługa adresów email wymagała więcej pracy przy sprawdzaniu poprawności adresów email za pomocą Javascript. Wszystko to nie jest teraz konieczne dzięki nowemu typowi wejściowemu HTML5 email.
Element wejściowy email został specjalnie zaprojektowany do obsługi i sprawdzania poprawności adresów email. W zależności od przeglądarki, będzie on ostrzegał użytkownika, że wprowadzone informacje nie są poprawne i formularz nie zostanie przesłany dopóki użytkownik nie dokona poprawek.
Przykładowy kod:
<label for="email_input">Enter your email address:</label><input type="email" name="email" placeholder="Your Email">Ogólne zastosowanie
Zapisz poniższy kod w dokumencie tekstowym i otwórz go za pomocą przeglądarki internetowej.
<!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>Tak powinna wyglądać strona:
Jeśli chcesz zebrać kilka adresów jednocześnie, możesz dodać atrybut multiple:
<input type="email" multiple>Użytkownik może teraz wprowadzić jeden lub więcej adresów oddzielonych przecinkiem.
Weryfikacja
Przeglądarki, które obsługują typ wejściowy email zapewniają obsługę walidacji na różne sposoby. Jednakże, wszystkie przeglądarki używają wspólnego algorytmu walidacji według następującego schematu:
Minimalne wymagania to symbole @ i . oraz brak spacji pomiędzy znakami. Należy pamiętać, że nie ma możliwości sprawdzenia, czy podany adres istnieje. Jest to kwestia, którą powinien zająć się skrypt po stronie serwera. Dobrym sposobem na przetestowanie poprawności adresów email jest wysłanie linku do adresu email, który po kliknięciu potwierdza, że email jest poprawny.
Mozilla Firefox
Jak tylko użytkownik zakończy wpisywanie i przejdzie do innego elementu, Firefox sprawdzi wprowadzone dane. Jeśli nie jest to poprawny adres e-mail, dane wejściowe pojawią się z czerwoną ramką, jak pokazano poniżej:
Jeśli użytkownik kliknie przycisk wyślij bez zmiany podanego adresu e-mail, formularz nie zostanie wysłany i pojawi się etykieta pokazująca komunikat o błędzie na danych wejściowych.
Google Chrome
Google chrome nie zapewnia żadnego wsparcia wizualnego, gdy użytkownik wprowadza nieprawidłowe dane.
Jednakże przy wysyłaniu pojawia się komunikat o błędzie z podpowiedzią, co użytkownik powinien podać.
Jeśli chcesz przekazać użytkownikowi niestandardowy komunikat o błędzie, możesz użyć atrybutu title:
<input type="email" title="Please Provide A Valid Email Address !">Wsparcie dla przeglądarek
Typ wejściowy email jest szeroko obsługiwany we wszystkich nowoczesnych przeglądarkach. Sprawdź poniższą tabelę dla minimalnej obsługiwanej wersji. IE 10.0 FireFox 4.0 Chrome 10.0 Opera 11.0 Safari 4.0
Szczegóły dotyczące obsługi przeglądarek znajdziesz na stronie: Can I Use email input type
Generally, if the browser version in use does not support this input type, an input type text will be shown instead. Kiedy obsługujesz dane przesłane po stronie serwera, upewnij się, że sprawdzasz poprawność danych przed ich zaakceptowaniem.
Na platformach Android i IOS, klawiatura automatycznie włączy klawisze @ i . kiedy typem wejścia jest email.
Dlaczego warto używać tego nowego typu wejścia
- Typ wejścia email ułatwia tworzenie stron internetowych, ponieważ walidacja jest wykonywana przez przeglądarkę. Jeśli wymagany atrybut został określony, przeglądarka nie zaakceptuje formularza do wysłania.
- Możesz wybrać styl wszystkich wiadomości e-mail typu wejściowego na swojej stronie w określonym stylu, tak aby pojawiały się w standardowym stylu na całej stronie.
- Urządzenia mobilne mogą dostosować klawiaturę ekranową do danych wejściowych wiadomości e-mail (z @ i . łatwo dostępne
Zastosowany CSS
Aby zastosować określony styl tylko do pól wprowadzania emaili, użyj selektora atrybutów w ten sposób:
input{ background-color:#ccc;}Demo
Zobacz także
.
- Jak utworzyć telefoniczne pole wejściowe w HTML5
- Jak uzyskać wartość pola wyboru podczas przesyłania formularza
.