Funkcja autouzupełniania jest obecnie bardzo popularną funkcją w internecie. Gdy wprowadzimy coś do pola formularza, przeglądarki – jeśli funkcja jest aktywowana i obsługiwana przez przeglądarkę – zaproponują listę proponowanych słów do użycia.
Te aplikacje mogą być teraz łatwo wdrożone. W tym celu przypisuje się atrybut autocomplete do elementu input.
<input type="text" autocomplete="on" />
Dzięki wartości on funkcja autouzupełniania zostanie aktywowana dla pola. Od teraz przeglądarka będzie zapamiętywać wprowadzone wartości do danego pola i później będzie je proponować za pomocą listy wyboru. Pozwala to w znacznym stopniu przyspieszyć wypełnianie formularzy.
Nie zawsze jednak będziemy chcieli takie zachowanie w przypadku wszystkich pól. W takich przypadkach funkcję autouzupełniania można wyłączyć. W tym celu przypisuje się atrybutowi autocomplete wartość off.
<input type="text" autocomplete="off" />
Alternatywnie można dodać atrybut autocomplete do elementu form. W zależności od tego, czy wartość używana tutaj to on czy off, funkcja autouzupełniania dla całego formularza zostanie aktywowana lub dezaktywowana.
<form autocomplete="on"> .. </form>
Jednak jeśli wewnątrz formularza będą sprzeczne informacje, to one zostaną potraktowane priorytetowo.
<form autocomplete="on"> Imię: <input type="text" name="imie" autocomplete="off" /><br /> Nazwisko: <input type="text" name="nazwisko" /><br /> Kod pocztowy: <input type="text" name="kod_pocztowy" /><br /> Miasto: <input type="text" name="miasto" /> </form>
W tym przykładzie autouzupełnianie zostanie zastosowane do wszystkich pól formularza, ponieważ na początku elementu form ustawiono wartość atrybutu autocomplete na on. Wyjątkiem tutaj jest pole imie, które zostało specjalnie wyłączone z autouzupełniania.
Aby autouzupełnianie działało, funkcja ta musi być obsługiwana przez daną przeglądarkę i nie może być dezaktywowana. Dodatkowo w liście sugerowanych wartości będą wyświetlane tylko te dane, które wcześniej zostały już wpisane.
Aby móc mieć rzeczywisty wpływ na wartości na liście sugestii, w HTML5 wprowadzono element datalist. Ten element nie powoduje wyświetlania żadnego widocznego wyniku w przeglądarce. Wartości dla listy sugestii mogą być zdefiniowane za pomocą podrzędnych elementów option. Oto przykład:
<div> Język: <br /> <input type="text" autocomplete="on" list="jezyk" /> </div> <datalist id="jezyk"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
Za pomocą atrybutu list elementu input tworzona jest logiczna relacja między polem wprowadzania a elementem datalist. W tym celu wartości atrybutów list i id elementu datalist muszą być takie same.
Ustawianie fokusu
Fokus może zostać automatycznie przydzielony do pola formularza, gdy strona jest ładowana. Przykładem takiej funkcji jest na przykład strona główna Google. Gdy strona ta zostanie otwarta, możesz od razu wprowadzić wyszukiwanie bez konieczności wcześniejszego ręcznego ustawienia kursora w polu wyszukiwania.
W przypadku HTML5 istnieje atrybut autofocus dedykowany do takich celów. Atrybut ten sprawia, że pole formularza oznaczone nim otrzyma automatycznie fokus podczas ładowania strony.
Przykład:
<form> <input name="pole_szukania" autofocus="autofocus" /> <input type="submit" value="Szukaj" /> </form>
Przeglądarki, które nie rozpoznają atrybutu autofocus, po prostu go ignorują. Ignorowanie to nie ma negatywnych skutków (choć wtedy pole nie otrzyma fokusu).
Sprawdzanie wprowadzonych danych
Dotychczas nie było możliwe sprawdzanie wprowadzonych danych w formularzach za pomocą standardowych funkcji HTML. Gdy np. chcieliśmy sprawdzić, czy użytkownik wprowadził prawidłowy adres e-mail do pola formularza, zazwyczaj korzystaliśmy z JavaScriptu lub PHP. W HTML5 takie "akrobatyki" nie są już konieczne. Ponieważ od teraz HTML oferuje interfejs API walidacji. I ten interfejs jest dość potężny. Dzięki bardzo niewielkiemu nakładowi pracy można teraz sprawdzać wprowadzone dane w formularzach.
HTML5 posiada kilka reguł, które określają sposób walidacji pól. Na przykład pola wprowadzania typu email zostaną sprawdzone, czy został wprowadzony poprawny adres e-mail.
• url – Sprawdza na URL
• email – Sprawdza na adres e-mail
• range – Sprawdza na liczby zmiennoprzecinkowe
• number – Sprawdza na liczby zmiennoprzecinkowe
Aby oznaczyć pole jako obowiązkowe, przypisuje się mu atrybut required.
<input id="vname" name="vname" type="text" required="required" />
Pole oznaczone w ten sposób muszą być wypełnione, więc nie mogą być puste.
Ale uwaga: Aby walidować pola, pewne warunki muszą zostać spełnione.
• Element musi mieć przypisany atrybut name.
• Element musi znajdować się wewnątrz elementu form, czyli w formularzu HTML. W przeciwnym razie połączenie z formularzem można nawiązać poprzez atrybut form.
• Element nie może posiadać atrybutów readonly ani disabled.
Poprawne użycie wyglądałoby więc następująco:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
W takim przypadku przeglądarka sprawdzi, czy pole zostało wypełnione. Jeśli pole jest puste, a mimo to próbuje się wysłać formularz, przeglądarka powinna teraz wyświetlić komunikat o błędzie.
W trakcie tej serii wielokrotnie wspominano o typach pól formularzy: email, range, number, tel i url. Te pola nie są tylko sprawdzane pod kątem zawartości, ale także pod kątem poprawności wprowadzonej wartości.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
W przypadku pól o typie email na przykład sprawdzane jest, czy wprowadzona wartość faktycznie jest poprawnym adresem e-mail. Jeśli nie, przeglądarka wyświetli komunikat o błędzie.
Przekazywanie komunikatu o błędzie jest odpowiedzialnością przeglądarek.
Nie automatycznie walidować pól
Nie zawsze jest pożądane automatyczne walidowanie wprowadzanych danych. Aby zablokować walidację całego formularza, należy dodać atrybut novalidate do początkowego elementu form.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Alternatywnie, atrybut formnovalidate może być dodany do przycisku wysyłającego formularz. Jest to interesujące w przypadku, gdy równolegle z przyciskiem wysyłającym formularz oferowana jest przyciskiem do zapisywania formularza tymczasowo.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Wyślij" />
<input type="submit"
formnovalidate="formnovalidate" value="Zapisz" />
<input type="submit"
formnovalidate="formnovalidate" value="Wyloguj" />
</form>
W takim przypadku formularz będzie walidowany tylko za pomocą pierwszego przycisku "Wyślij". Pozostałe służą do zapisywania i wylogowywania. Walidacja nie jest wymagana w tych przypadkach.
