Element HTML <input> jest podstawowym składnikiem służącym do pobierania danych użytkownika w formularzach internetowych.
Typy Pól Input
Typy Tekstowe i Semantyczne
| Typ | Opis |
|---|---|
text |
Jednoliniowy tekst jawny |
password |
Zamaskowane pole wprowadzania hasła |
email |
Adres e-mail z wbudowaną walidacją przeglądarki |
url |
Wprowadzanie bezwzględnego adresu URL |
tel |
Numer telefonu (klawiatura numeryczna na urządzeniach mobilnych) |
search |
Pole wyszukiwania z przyciskiem czyszczenia |
Typy Numeryczne i Ilościowe
| Typ | Opis |
|---|---|
number |
Liczbowe pole krokowe (min, max, step) |
range |
Suwak do wyboru wartości przybliżonej |
Typy Daty i Czasu
| Typ | Opis |
|---|---|
date |
Wybór daty z kalendarza (rok, miesiąc, dzień) |
time |
Wybór godziny (godziny, minuty) |
datetime-local |
Lokalna data i godzina bez strefy czasowej |
month |
Wybór roku i miesiąca |
week |
Wybór roku i numeru tygodnia ISO |
Wybór i Działania
| Typ | Opis |
|---|---|
checkbox |
Pole wyboru lub zaznaczenie wielokrotne |
radio |
Pojedyncza opcja w grupie pól radiowych |
color |
Paleta wyboru koloru |
file |
Przesyłanie plików (accept, multiple) |
hidden |
Niewidoczna wartość przesyłana z formularzem |
submit |
Przycisk wysyłania formularza |
reset |
Przycisk przywracania stanu początkowego |
button |
Standardowy przycisk bez domyślnej akcji |
Kluczowe Atrybuty Walidacji
| Atrybut | Działanie |
|---|---|
required |
Blokuje wysłanie, jeśli pole jest puste |
pattern="[A-Za-z0-9]+" |
Wyrażenie regularne (Regex), do którego musi pasować wartość |
min="1" max="100" |
Wartości minimalne i maksymalne |
step="0.5" |
Dozwolony krok inkrementacji wartości |
minlength="5" maxlength="20" |
Minimalna i maksymalna długość znaków |
placeholder="..." |
Tekst pomocniczy wyświetlany w polu |
readonly |
Blokuje edycję, ale wysyła wartość z formularzem |
disabled |
Wyłącza pole i wyklucza je z wysyłania |
autofocus |
Automatycznie ustawia kursor po załadowaniu strony |
Kompletny Przykład Formularza
<form action="/api/submit" method="POST">
<label for="user-email">Adres e-mail:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">Hasło (min. 8 znaków):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">Wiek:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
Akceptuję regulamin serwisu
</label>
<input type="submit" value="Zarejestruj" />
</form>