2. HTML5 - język opisu struktury

2.3. Formularze

Język HTML5 wprowadza nowe atrybuty i typy pól formularzy, które ułatwiają tworzenie bardziej funkcjonalnych formularzy bez potrzeby stosowania JavaScript.

Adres email
Gdy ten typ jest używany, wprowadzona wartość musi być adresem e-mail, aby była prawidłowa. Każda inna zawartość powoduje, że przeglądarka wyświetla błąd po przesłaniu formularza. 

<input <span class="" style="color: rgb(0, 61, 245);">type="email"</span> id="email" name="email" />
Możliwa jest także walidacja poprawności wprowadzonego adresu za pomocą atrybutu "pattern". 

Pole wyszukiwania
Ten typ znajduje zastosowanie w polach wyszukiwania. Przeglądarki takie pola zwykle rysują w nieco inny sposób. Ponadto wartości wpisywane w pole wyszukiwania mogą być później wykorzystane przez przeglądarkę do celów automatycznego uzupełniania podobnych zapytań.

<input type="search" id="search" name="search" />
Numer telefonu
Ten typ pola na urządzeniach mobilnych jest przydatny we wszystkich sytuacjach, gdy celowe jest wprowadzenie wartości liczbowej za pomocą klawiatury numerycznej. Oznacza to, że wprowadzać do takiego pola można dowolne wartości, niekoniecznie numery telefonu.
 
<input type="tel" id="tel" name="tel" />
Adres URL
Pole służące do wprowadzania adresu URL. Na dynamicznej klawiaturze mogą zostać wyświetlone dodatkowe przyciski, np. dwukropek, kropka, slash itp. Obowiązuje też prosta walidacja.
<input type="url" id="url" name="url" />
Pole numeryczne
Ta kontrolka wygląda jak pole tekstowe, ale pozwala tylko na wprowadzanie liczby i zwykle udostępnia przyciski w postaci spinnera do zwiększania i zmniejszania wartości kontrolki. Na urządzeniach z dynamicznymi klawiaturami zwykle wyświetlana jest klawiatura numeryczna. Za pomocą atrybutów min, max, step można kontrolować zakres wprowadzanych wartości oraz ich rozdzielczość.

<pre><code><input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />
Suwak
Innym sposobem na wprowadzanie wartości numerycznej jest użycie kontrolki w formie suwaka. Konfiguracja analogiczna jak powyżej.
<pre><code><input type="range" name="change" id="pennies" min="0" max="1" step="0.01" />
Kolor
Kolor może być reprezentowany na różne sposoby: poprzez składowe RGB, składowe HSL, opis słowny itp. W przypadku kontrolki pozwalającej wybrać kolor, przeglądarka wyświetla przycisk, po kliknięciu którego przeglądarka wyświetla domyślne okno systemu operacyjnego pozwalającego dokonać wyboru koloru. Po zatwierdzeniu wyboru, zwracana jest charakterystyczna dla języka HTML 6-znakowa wartość szesnastkowa opisująca wartości składowych RGB koloru.
<input type="color" name="color" id="color" />
Wybór daty
Mamy tutaj kilka możliwości. Począwszy od podstawowego pola wyboru daty:
<input type="datetime-local" name="datetime" id="datetime" />
poprzez typy pozwalające wprowadzić konkretnie:
  • czas - type="time",
  • dzień tygodnia - type="week",
  • miesiąc - type="month",
a skończywszy na wprowadzeniu ograniczeń co do zakresu wprowadzanych dat jak i granulacji:
<label for="myDate">Kiedy chcesz jechać na urlop w nadchodzące wakacje?</label><br />
<input
  type="date"
  name="myDate"
  min="2025-06-01"
  max="2025-08-31"
  step="7"
  id="myDate" />