24. Formularze HTML5 - nowe kontrolki

Standard HTML5 wprowadza do formularzy kilka nowych kontrolek. Ma to ułatwić projektowanie stron internetowych.

Typ kontrolki

Opis

Obsługa

<input type="color">

określa kontrolkę w której można wybrać kolor

  edge firefox chrome safari opera
<input type="date">

określa kontrolkę w której można datę

 edge firefox chrome safari opera
<input type="datetime-local">

określa kontrolkę w której można wybrać datę i czas lokalny

 edge  chrome safari opera
<input type="email">

określa kontrolkę, w której podajemy adres email

 edge firefox chrome  opera
<input type="month">

Określa kontrolkę w której wybieramy miesiąc

 edge  chrome safari opera
<input type="number">

określa kontrolkę w której wybieramy liczbę

 edge firefox chrome safari opera
<input type="range">

określa kontrolkę w której wybieramy liczbę z pewnego zakresu, zdefiniowanego przez twórcę witryny

 edge firefox chrome safari opera
<input type="search">

kontrolki używa się do wpisywania wyrażeń do wyszukania. Zachowuje się jak zwyczajne pole tekstowe

 edge firefox chrome safari opera
<input type="tel">

pozwala na wpisanie numeru telefonu. Przeglądarka sama waliduje wpisane dane

    safari 
<input type="time">

Pozwala na wybranie czasu h m

 edge  chrome safari opera
<input type="url">

Pozwala na wpisanie adresu url. Przeglądarka waliduje wpisane dane.

 edge firefox chrome  opera
<input type="week">

Pozwala na wybranie tygodnia.

 edge  chrome safari opera

Jak widzicie na dzień dzisiejszy (29-11-2017r.) nie wszystkie zaktualizowane przeglądarki wspierają nowe kontrolki. Najlepiej wypada tutaj Microsoft Edge, Google Chrome i Opera. Jeżeli przeglądarka nie wspiera danego typu pola to wyświetla pole tekstowe.

W kontrolkach można używać atrybutów, które również wprowadza HTML5

Atrybut

Opis

max

maksymalna wartość.

min

minimalna wartość.

pattern

określa w jaki sposób sprawdzić poprawność wpisanych danych. Używa się w tym atrybucie wyrażeń regularnych.

required

wymagane uzupełnienie kontrolki.

step

określa krok przy kontrolkach numerycznych.