Jakie rodzaje elementów input istnieją w HTML?

Istnieją następujące typy elementów input:

• text: Jednoliniowe pole tekstowe.
• password: Pole do wprowadzania hasła, znaki są ukryte.
• submit: Przycisk do wysyłania formularza.
• reset: Przycisk do resetowania formularza.
• radio: Przycisk wyboru (jeden z wielu).
• checkbox: Pole wyboru (jeden lub więcej spośród wielu).
• button: Zwykły przycisk.
• file: Pole do wyboru pliku.
• hidden: Ukryte pole, niewidoczne dla użytkownika, ale wysyłane z formularzem.
• image: Przycisk obrazkowy do wysyłania formularza.

Specyfikacja HTML5 dodała nowe typy:

• email: Pole do wprowadzania adresu email.
• url: Pole do wprowadzania URL.
• number: Pole do wprowadzania liczby.
• range: Suwak do wyboru wartości numerycznej w zadanym zakresie.
• date: Pole do wyboru daty.
• month: Pole do wyboru miesiąca i roku.
• week: Pole do wyboru tygodnia i roku.
• time: Pole do wyboru czasu.
• datetime-local: Pole do wyboru daty i czasu bez strefy czasowej.
• search: Pole do wyszukiwania.
• color: Pole do wyboru koloru.
• tel: Pole do wprowadzania numeru telefonu.

Przykład użycia:

<!-- Jednoliniowe pole tekstowe -->
<input type="text" placeholder="Imię">

<!-- Pole do wprowadzania hasła -->
<input type="password" placeholder="Hasło">

<!-- Przycisk do wysyłania formularza -->
<input type="submit" value="Wyślij">

<!-- Przycisk do resetowania formularza -->
<input type="reset" value="Resetuj">

<!-- Przyciski radiowe -->
<input type="radio" name="gender" value="male"> Mężczyzna
<input type="radio" name="gender" value="female"> Kobieta

<!-- Pola wyboru -->
<input type="checkbox" name="interests" value="music"> Muzyka
<input type="checkbox" name="interests" value="sports"> Sport

<!-- Zwykły przycisk -->
<input type="button" value="Kliknij mnie">

<!-- Pole do wyboru pliku -->
<input type="file">

<!-- Ukryte pole -->
<input type="hidden" name="userId" value="123">

<!-- Przycisk obrazkowy -->
<input type="image" src="submit.png" alt="Wyślij">

<!-- Pole email -->
<input type="email" placeholder="Email">

<!-- Pole URL -->
<input type="url" placeholder="Strona internetowa">

<!-- Pole liczby -->
<input type="number" min="1" max="10">

<!-- Suwak -->
<input type="range" min="0" max="100">

<!-- Data -->
<input type="date">

<!-- Miesiąc -->
<input type="month">

<!-- Tydzień -->
<input type="week">

<!-- Czas -->
<input type="time">

<!-- Data i czas (lokalny) -->
<input type="datetime-local">

<!-- Szukaj -->
<input type="search" placeholder="Szukaj">

<!-- Wybierz kolor -->
<input type="color">

<!-- Numer telefonu -->
<input type="tel" placeholder="+48 (xxx) xxx-xx-xx">