chevron-left chevron-right

[HTML5] Tak będziemy w przyszłości budować formularze

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>
Jak widać kod odpowiedzialny za generowanie inputów typu radio się nie zmienił.
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>
Jak widać, w deklaracjach elementów input pojawiły się dodatkowe atrybuty jak autofocus i required.
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>
Dzięki takiemu zapisowi formularz wygeneruje nam kalendarz do wyboru daty.

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

  • Formularze w HTML5 zapowiadają się bardzo ciekawie 🙂 Obyśmy tylko nie musieli czekać za długo na ten nowy standard i wspieranie go przez wszystkie przeglądarki. Póki co nadal pozostaje tworzenie formularzy przy użyciu masy innych „dodatków”.

  • Bardzo ciekawe! Pierwszy raz o tym słyszę i widzę, że HTML zmierza w dobrym kierunku. Chociaż ja najpewniej zostanę przy mojej „ajaxowej” walidacji danych. Chociaż, dla przeglądarek nieobsługujących (lub z wyłączoną obsługą) JavaScript, nawet taka forma walidacji będzie dobra.
    Jednak pozostaje jeszcze sprawa spamowania – jeśli pole ma określony w kodzie HTML typ danych, to łatwiej będzie złamać zabezpieczenia.

  • Zastanawia mnie od dość dawna dlaczego w3c sugeruje stosowanie paragrafów w środku formularzy?
    Wydaje mi się to mega nie semantyczne. 
    p – paragraf tekstu, a nie element formularza.

    Wydaje mi się że div w tym miejscu był by dużo lepszy. Co o tym myślisz?

  • Piotr Nalepa

    Masz rację jeśli chodzi o podejście semantyczne. Na chwilę obecną, zalecałbym nawet stosowanie elementów li jako kontenerów dla elementów formularza. Ma to większy sens semantyczny.

  • Paula

    Świetną sprawą jest, że w HTML 5 wprowadzono ponad 10 nowych inputów co z jednej strony może zwiększyć bezpieczeństwo, lecz z drugiej wyraźnie je, w ich nieumiejętnym wykorzystaniu, pogorszyć…

  • Szkoda, że to wszystko jest tak mocno niedopracowane. Input data może za rok będzie sensownie wykorzystywany, bo teraz część nawet najnowszysch przeglądarek to olewa.
    Atrybut required ssie, bo sprawdzany jest tylko po fizycznym wysyłaniu formularza (kliknięcie w submit lub enter) a nie po zdarzeniu form.submit(). Tak samo z :valid i :invalid które niby wskazują czy pole jest ok czy nie jest, ale robią to niewłaściwie (http://www.alistapart.com/articles/forward-thinking-form-validation/ – tutaj jest poruszony ten wątek). Ogólnie fajna zabawka i bardzo dobrze że to rozwijają. Ale póki ja bym temu w 100% nie ufał.