Lista nowych pól w formularzach HTML5

search

Służy do wprowadzania tekstu do wyszukiwania. Różne przeglądarki mogą wyświetlać je różnie (patrz: Chrome), zaznaczając przez wygląd, że nie jest to zwykły tekst, tylko tekst do wyszukania. Poza tym nie ma żadnych dodatkowych ograniczeń ani możliwości. Przykład: <input type="search" id="search" name="search" placeholder="Wpisz szukaną frazę" />.

Działa w przeglądarce Chrome

email

Pole służące do wprowadzania adresu e-mail. Wyglądem nie różni się od zwykłego pola text, ale przeglądarki walidują poprawność wpisanego adresu. Dodatkowo, przeglądarki mogą ułatwiać wprowadzanie adresu, jeśli zdefiniuje się domyślny dla formularzy, w opcjach przeglądarki. Przykład: <input type="email" id="email" name="email" placeholder="login@domena.tld" />.

Walidacja działa w przeglądarkach Firefox, Opera, Chrome.

number

Służy do wprowadzania liczb. Dodatkowe atrybuty min i max mogą określić zakres dolny i górny. Przykład: <input type="number" id="number" name="number" min="10", max="150" />. Nie można podawać atrybutu placeholder.

Działa w przeglądarkach Opera, Chrome, Safari.

range

Podobnie jak number, służy do wprowadzania liczb. Natomiast zgodnie z założeniem, dokładna wartość nie jest istotna. Może posłużyć np. do określenia jak bardzo coś nam się podoba. Przy pomocy suwaka (w przeglądarkach które to obsługują) można wybrać wartość. Atrybuty min (domyślnie 0) i max (domyślnie 100) określają zakres liczby wysłanej w formularzu, natomiast step określi skok (step=5 oznacza, że może przyjąć wartości 0, 5, 10, 15, itd.). Przykład: <input type="range" name="ocena" id="ocena" min="0" max="150" step="30" />.

Działa w przeglądarkach Opera, Chrome, Safari.

color

Służy do podania koloru. Z formularza zostanie wysłany kolor w postaci #RRGGBB, natomiast jego wybór może być w przeglądarce zaimplementowany dowolnie. Przykład: <input type="color" name="kolor" id="kolor" value="#112233" />. Parametr value może oczywiście (jak zawsze) zawierać początkową wartość wybranego koloru.

Działa w przeglądarce Opera.

datetime-local

Podawanie daty i czasu lokalnego. Sposób wprowadzania może być różny w zależności od przeglądarki, ale format wysyłany jest jasno określony. Przykład: <input type="datetime-local" name="datalokalna" id="datalokalna" />. Działają atrybuty min i max.

Działa w przeglądarkach Opera i Safari (chociaż w Safari z niewygodnym sposobem wprowadzania).

datetime

Podawanie daty i czasu UTC. Podobnie jak wersja lokalna. Interfejs w przeglądarce może pokazywać wybór czasu lokalnego, a następnie zamieniać go na UTC przed wysłaniem, bez wiedzy użytkownika. Format wysyłany również jest jasno określony. Przykład: <input type="datetime" name="datazczasem" id="datazczasem" />.

Działa w przeglądarkach Opera i Safari (chociaż w Safari z niewygodnym sposobem wprowadzania).

date

Podawanie daty bez czasu. Format wysyłany jest jasno określony. Przykład: <input type="date" name="data" id="data" />. Również działają atrybuty min i max.

Działa w przeglądarkach Opera i Safari (chociaż w Safari z niewygodnym sposobem wprowadzania).

time

Podawanie daty bez czasu. Format wysyłany jest jasno określony. Przykład: <input type="time" name="czas" id="czas" />. Również działają atrybuty min i max.

Działa w przeglądarkach Opera i Safari (chociaż w Safari z niewygodnym sposobem wprowadzania).

datalist, czyli tzw. suggest

Aby w jakimś polu móc podać jedną lub kilka sugerowanych wartości, należy w polu input ustawić atrybut list, którego wartość będzie identyfikatorem elementu datalist. Przykład: <input type="text" name="numerek" id="numerek" list="listanumerow" required="required" />
<datalist id="listanumerow"><option label="Pierwszy" value="jeden"></option><option label="Drugi" value="dwa"></option>
<option label="Trzeci" value="trzy"></option></datalist>. Nie jest to alternatywa dla taga select, ponieważ użytkownik nie musi wybierać pola z listy – może wpisać co będzie chciał.