W rozdziale:
- Wprowadzenie do formularzy HTML5
- Atrybut placeholder
- Atrybut focus
- Adresy e-mail
- Adresy URL
- Liczby
- Daty
- Wyszukiwanie
- Kolory
- Walidacja
- Atrybut required
Adresy e-mail
Przez ponad 10 lat formularze internetowe tworzyło się przy użyciu tylko kilku typów pól. Do najczęściej używanych należały:
| Typ pola | Kod HTML | Uwagi |
|---|---|---|
| pole wyboru | <input type="checkbox"> | można włączać i wyłączać |
| przełącznik | <input type="radio"> | mogą być grupowane |
| pole hasła | <input type="password"> | wyświetla kropki zamiast wpisywanych znaków |
| listy rozwijane | <select><option>… | |
| element wyboru pliku | <input type="file"> | wyświetla okno dialogowe wyboru pliku |
| przycisk zatwierdzania | <input type="submit"> | |
| zwykły tekst | <input type="text"> | atrybut type można opuścić |
Wszystkie te typy są dostępna także w HTML5. Jeśli przestawiasz się na HTML5 (zmieniając DOCTYPE), to nie musisz niczego zmieniać w swoich formularzach. Dzięki ci zgodności wsteczna!
Ale w języku HTML5 zdefiniowano 13 nowych typów pól i z powodów, które za chwilę staną się dla ciebie oczywiste nie ma powodu, aby nie zacząć ich używać od zaraz.
Pierwszym z tych nowych typów jest pole na adresy e-mail. Wygląda tak:
<form>
<input type="email">
<input type="submit" value="Zatwierdź">
</form>Miałem rozpocząć to zdanie od słów „W przeglądarkach, które nie obsługują atrybutu type="email"…”, ale ugryzłem się w język, tzn. w palec. Dlaczego? Bo nie jestem pewien co ma znaczyć stwierdzenie, że przeglądarka nie obsługuje atrybutu type="email". Wszystkie przeglądarki go obsługują. Mogą co najwyżej nie traktować go specjalnie (za chwilę pokażę ci kilka przykładów specjalnego traktowania), ponieważ jeśli atrybut type="email" nie jest obsługiwany, jest traktowany jak type="text".
Trudno wyrazić, jak bardzo jest to ważne. W internecie znajdują się miliony formularzy, w których trzeba podać adres e-mail i wszystkie one są zbudowane przy użyciu elementu <input type="text">. Widzisz pole tekstowe, wpisujesz w nim adres e-mail i gotowe. Aż tu nagle pojawia się język HTML5 ze swoim type="email". Czy przeglądarki mają zwariować? Nie. Każda przeglądarka internetowa na świecie nieznane atrybuty type traktuje jako type="text" — nawet IE 6. Dzięki temu już teraz możesz bez przeszkód zacząć używać atrybutu type="email".
Co by znaczyło stwierdzenie, że przeglądarka obsługuje atrybut type="email"? Można wysnuć kilka teorii na ten temat. W specyfikacji HTML5 nie określono żadnego konkretnego sposobu prezentacji tego nowego typu pól. Dlatego większość przeglądarek, np. Safari, Chrome, Opera i Firefox, wyświetla go tak samo, jak zwykłe pole tekstowe — dokładnie tak, jak elementy type="text" — dzięki czemu dla użytkownika nie ma żadnej różnicy (dopóki nie spróbuje wysłać formularza).
I wtedy zstąpił na ziemię iPhone.
iPhone nie ma fizycznej klawiatury. Wszystkie teksty wpisuje się w nim za pomocą klawiatury ekranowej wyświetlanej w odpowiednim momencie, np. gdy uaktywni się pole formularza. Firma Apple zastosowała w przeglądarce iPhone’a sprytną sztuczkę. Dzięki temu rozpoznaje on niektóre nowe typy pól wejściowych HTML5 i dynamicznie dostosowuje klawiaturę ekranową do sytuacji.
Przykładowo adresy e-mail są tekstem, prawda? Ale nie jest to zwykły tekst. Na przykład każdy adres e-mail musi zawierać znak @ i przynajmniej jedną kropkę, ale nie może zawierać spacji. W związku z tym w iPhonie uaktywnienie elementu <input type="email"> powoduje pojawienie się na ekranie klawiatury zawierającej mniejszą niż zwykle spację i dodatkowe klawisze znaków @ and ..
Podsumujmy: nie ma żadnych przeszkód, aby natychmiast zacząć używać elementu type="email". Nie zauważy tego nikt oprócz użytkowników iPhone’a, którzy pewnie też tego nie zauważą. A ci którzy zauważą, uśmiechną się i podziękują ci za ułatwienie im korzystania z twojej strony.
Wysyłam...
Dodaj komentarz