Element <input> to jeden z najbardziej wszechstronnych i najczęściej używanych tagów w HTML, służący do tworzenia różnych kontrolek wejściowych w formularzach.
To fundament interakcji w sieci – pozwala zbierać tekst, liczby, daty, pliki i wybory użytkownika, a elastyczność zapewnia atrybut type.
W dzisiejszych aplikacjach webowych formularze oparte na <input> są podstawą interakcji – od logowania po rozbudowane ankiety. W tym wpisie omówimy historię elementu, kluczowe typy input, najważniejsze atrybuty, praktyczne przykłady kodu z HTML, CSS i JavaScript, a także najlepsze praktyki oraz częste błędy. Na koniec pokażemy kompletny przykład formularza z walidacją.
Podstawowa składnia i kontekst użycia
Element <input> jest elementem pustym (samozamykającym), co oznacza, że nie zawiera zawartości wewnętrznej i w XHTML kończy się ukośnikiem: <input />. Umieszcza się go wewnątrz znacznika <form>, aby dane mogły być przesyłane na serwer metodami GET lub POST.
Podstawowa struktura wygląda tak:
<form action="/przetworz.php" method="post">
<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie" required>
<input type="submit" value="Wyślij">
</form>
Atrybut name jest kluczowy – identyfikuje pole przy przesyłaniu danych, a id łączy input z etykietą <label> dla lepszej dostępności.
Atrybuty globalne, takie jak id, class, style, title oraz zdarzenia (onclick, onchange), umożliwiają stylizację CSS i obsługę JavaScript.
Typy elementu <input> – kompletny przegląd
Atrybut type definiuje zachowanie kontrolki. Poniżej znajdziesz najważniejsze typy i ich zastosowania:
1. type="text" – pole tekstowe (domyślne)
Służy do jednowierszowego tekstu. Złamania linii są ignorowane.
Przykład użycia:
<label>Imię: <input type="text" name="imie" maxlength="50" placeholder="Wpisz imię"></label>
Najczęściej używane atrybuty pomocnicze to:
- maxlength – maksymalna liczba znaków,
- placeholder – podpowiedź w pustym polu,
- value – wartość domyślna.
2. type="password" – pole hasła
Maskuje wpisany tekst gwiazdkami lub kropkami dla bezpieczeństwa.
Przykład użycia:
<label>Hasło: <input type="password" name="haslo" maxlength="20" required></label>
Zawsze ustawiaj odpowiednie ograniczenia (np. maxlength, minlength) i wymuszaj silną politykę haseł.
3. type="checkbox" – pole wyboru (wielokrotny wybór)
Umożliwia wielokrotny wybór opcji w tej samej grupie.
Przykład użycia:
<label><input type="checkbox" name="kolor" value="zielony"> Zielony</label>
<label><input type="checkbox" name="kolor" value="czerwony"> Czerwony</label>
<label><input type="checkbox" name="kolor" value="niebieski"> Niebieski</label>
Użyj tego samego name dla grupy; checked zaznacza opcję domyślnie.
4. type="radio" – przełącznik opcji (pojedynczy wybór)
Wyklucza inne opcje w tej samej grupie (wspólne name).
Przykład użycia:
<p>Płeć:
<label><input type="radio" name="plec" value="kobieta"> Kobieta</label>
<label><input type="radio" name="plec" value="mezczyzna" checked> Mężczyzna</label>
</p>
Idealne do ankiet i jednoznacznych wyborów.
5. type="number" – pole liczbowe
Akceptuje wyłącznie wartości liczbowe; wspiera min, max, step.
Przykład użycia:
<label>Wiek: <input type="number" name="wiek" min="18" max="100" step="1" value="25"></label>
Przeglądarki dodają kontrolki inkrementacji, co podnosi ergonomię wprowadzania danych.
6. type="range" – suwak zakresowy
Wybór wartości z zakresu (domyślnie 0–100, step=1).
Przykład użycia:
<label>Głośność: <input type="range" name="glosnosc" min="0" max="100" value="50"></label>
Świetne do suwaków UI – łącz z <output> dla podglądu wartości na żywo.
7. type="date", type="time", type="month"
Kontrolki daty/godziny z natywnym pickerem (bez strefy czasowej).
Przykład użycia:
<input type="date" name="data">
<input type="time" name="godzina">
<input type="month" name="miesiac">
8. type="file" – wybór pliku
Umożliwia przesyłanie plików.
Przykład użycia:
<input type="file" name="plik" accept="image/*">
Ogranicz typy plików atrybutem accept, aby zwiększyć bezpieczeństwo i wygodę.
9. type="submit", type="reset", type="button"
Przyciski w formularzu działają następująco:
<input type="submit" value="Wyślij">
<input type="reset" value="Wyczyść">
<input type="button" value="Kliknij" onclick="alert('Działa!')">
submit wysyła formularz, reset czyści dane, a button służy do logiki własnej.
Inne typy: color, image, hidden
Poniżej znajdziesz krótkie omówienie mniej popularnych typów:
color– wybór koloru (np.<input type="color">);image– graficzny przycisk wysyłający formularz (np.<input type="image" src="przycisk.png" alt="Wyślij">);hidden– ukryte pole do przesyłania danych technicznych (np.<input type="hidden" name="id" value="123">).
Kluczowe atrybuty <input>
Poniższa tabela zestawia najważniejsze atrybuty wraz z opisem i przykładem użycia:
| Atrybut | Opis | Przykład |
|---|---|---|
name |
Nazwa pola do przesłania | name="email" |
value |
Wartość domyślna lub tekst przycisku | value="Domyślny" |
placeholder |
Wskazówka w pustym polu | placeholder="Email..." |
required |
Wymagane pole (walidacja HTML5) | required |
disabled |
Wyłącza pole (logiczny) | disabled |
readonly |
Tylko do odczytu | readonly |
checked |
Domyślnie zaznaczone (checkbox/radio) | checked |
min/max |
Granice dla number/range | min="0" max="10" |
step |
Krok inkrementacji | step="0.5" |
pattern |
Walidacja wyrażeniem regularnym (HTML5) | pattern="[A-Za-z]+" |
autocomplete |
Włącza autouzupełnianie przeglądarki | autocomplete="on" |
accesskey |
Klawisz szybkiego dostępu (np. Alt + klucz) | accesskey="e" |
Stylizacja CSS i walidacja JavaScript
CSS dla <input> – przykładowe reguły wyglądu i stanów pól:
input[type="text"] {
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
width: 200px;
}
input[type="range"]::-webkit-slider-thumb {
background: #007bff;
}
input:invalid {
border-color: red;
}
input:focus {
outline: none;
box-shadow: 0 0 5px blue;
}
JavaScript – prosta walidacja i obsługa zdarzeń:
document.querySelector('form').addEventListener('submit', function(e) {
const email = document.querySelector('input[name="email"]').value;
if (!email.includes('@')) {
e.preventDefault();
alert('Nieprawidłowy email!');
}
});
// Aktualizacja na żywo dla suwaka
document.querySelector('input[type="range"]').addEventListener('input', function() {
document.querySelector('#output').value = this.value;
});
Kompletny przykład formularza
Oto pełny formularz rejestracji z walidacją po stronie przeglądarki:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Formularz z input</title>
<style>
form { max-width: 400px; margin: 0 auto; }
label { display: block; margin: 10px 0; }
input { width: 100%; padding: 8px; box-sizing: border-box; }
</style>
</head>
<body>
<form action="/rejestracja" method="post">
<label>Imię: <input type="text" name="imie" required maxlength="50"></label>
<label>Email: <input type="email" name="email" required></label>
<label>Hasło: <input type="password" name="haslo" required minlength="8"></label>
<label>
<input type="checkbox" name="zgoda" required> Akceptuję regulamin
</label>
<label>Płeć:
<input type="radio" name="plec" value="k"> Kobieta
<input type="radio" name="plec" value="m"> Mężczyzna
</label>
<label>Wiek: <input type="number" name="wiek" min="18" max="99"></label>
<input type="submit" value="Zarejestruj">
<input type="reset" value="Wyczyść">
</form>
</body>
</html>
Ten kod jest responsywny i zgodny z HTML5.
Najlepsze praktyki i pułapki
Oto rekomendacje, które warto wdrożyć w każdym formularzu opartym o <input>:
- Etykiety i atrybut for – zawsze łącz
<label>z właściwymid, aby poprawić dostępność i obszar klikalny pola; - Walidacja wielowarstwowa – weryfikuj dane zarówno po stronie klienta (HTML5/JS), jak i serwera (reguły biznesowe i bezpieczeństwo);
- Nowoczesny layout – unikaj przestarzałych atrybutów (np.
align), korzystaj z CSS Flexbox/Grid; - Spójne grupowanie – dla
checkbox/radioużywaj wspólnegonamei czytelnych etykiet; - Testy przeglądarkowe – weryfikuj działanie w różnych przeglądarkach i na urządzeniach (pickery dat mogą się różnić);
- Bezpieczeństwo danych – nigdy nie ufaj danym z input, zawsze filtruj i waliduj je na serwerze.
Element <input> ewoluował z HTML4 do HTML5, dodając nowe typy jak date czy color, co ułatwia tworzenie nowoczesnych interfejsów. Eksperymentuj z przykładami i integruj je z frameworkami jak React lub Vue, aby tworzyć zaawansowane, dostępne i szybkie formularze.