[HTML5] Tak będziemy w przyszłości budować formularze
Ten wpis ma 16 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
W dzisiejszym artykule poruszę kwestie budowania formularzy za pomocą HTML5. Największą zmianą w stosunku do poprzedniej wersji HTML jest to, że do walidacji takiego formularza już nie trzeba będzie wykorzystywać JavaScript. Jest to niewątpliwie wielkie ułatwienie dla projektantów stron WWW.
Muszę dodać, że na tą chwilę tylko najnowsza Opera wspiera całkowicie prezentowany przeze mnie przykład formularza. Pozostałe przeglądarki (np. IE czy Firefox) wspierają częściowo lub w ogóle nie wspierają tego standardu.
Na początek przedstawię to co się nie zmieniło w porównaniu do poprzedniej wersji HTML:
<form name="formularz" method="post" action="#">
<fieldset>
<legend>Zaznacz jedną z opcji:</legend>
<p><label> <input type="radio" name="opcje"/>opcja 1</label></p>
<p><label> <input type="radio" name="opcje"/>opcja 2</label></p>
<p><label> <input type="radio" name="opcje"/>opcja 3</label></p>
</fieldset>
<p class="center">
<input type="reset" value="Wyczyść formularz"/>
<input type="submit" value="Wyślij"/>
</p>
</form>
Więc co się zmieniło?
Zmienił się sposób deklarowania inputów dla wpisywanego tekstu, który wygląda teraz tak:
<fieldset>
<legend>Dane kontaktowe</legend>
<p><label>Imię i nazwisko: </label><input type="text" name="name" autofocus required/></p>
<p><label>Telefon: </label><input type="tel" name="telephone" required/></p>
<p><label>E-mail: </label><input type="email" name="email" placeholder="Wpisz poprawny adres email" required/></p>
</fieldset>
Autofocus jest odpowiedzialny za podkreślenie pola które chcielibyśmy aby osoba wypełniająca formularz wypełniła. Natomiast atrybut required wskazuje na element który jest obowiązkowy do wypełnienia w danym formularzu. Jeśli taki element nie zostanie wypełniony to formularz inteligentnie nas poinformuje, że ten element trzeba wypełnić i to bez Javascript!!
Dodatkowo, polu input można dodać atrybut placeholder, który do inputa wstawi nam jakieś powiadomienie typu: "Wypełnij to pole".
Ważne jest też to, aby dla elementu input dac odpowiedni typ (tel, email, text, itd) dzięki czemu walidator wbudowany w HTML5 będzie wiedział jakie dane mają zostać wprowadzone w dane pole, aby mógł dokonać ich walidacji.
Ponadto możemy sprawić aby formularz miał automatycznie kreowany kalendarz wyboru daty dla formularza w polu input. Kod odpowiedzialny za to wygląda następująco:
<fieldset>
<legend>Wybierz datę:</legend>
<p><label>Data: </label><input type="date" name="data-formularz"/>
</p></fieldset>
Atrybuty przytoczone w tym artykule są częścią większej ilości ustawień dla elementów input.
Jeśli chcesz się zapoznać z pełną listą dostępnych atrybutów dla tego typu elementów, to zapraszam do strony specyfikacji HTML5.
Jako że, HTML5 jest w dalszym ciągu rozwijanym standardem lista atrybutów może ulec zmianom. Lecz na tą chwilę wybrane przeze mnie atrybuty nie powinny ulec jakimkolwiek zmianom, więc jeśli pragniesz stworzyć stronę korzystającą z najnowszych standardów, to możesz ich użyć bez obawy.
Demo z tego artykułu jest dostępne pod tym linkiem: przykładowy formularz w HTML5
O autorze
