<input>

Pole formularza: tekst, e-mail, hasło, liczba, data, suwak, pole wyboru, plik i wiele innych.

Wyświetlanie: inline-block
Znacznik zamykający: Brak, element pusty
Dozwolona zawartość: Brak, element pusty

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<style>
  .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
  .fields label { display: grid; gap: 4px; }
  .fields .inline { display: flex; align-items: center; gap: 6px; }
  .fields fieldset { border: 0; margin: 0; padding: 0; }
  .fields legend { padding: 0; margin-bottom: 4px; }
</style>
<form class="fields">
  <label>Imię <input type="text" name="name" placeholder="np. Ania"></label>
  <label>E-mail <input type="email" name="email" placeholder="ania@example.com"></label>
  <label>Hasło <input type="password" name="password"></label>
  <label>Wiek <input type="number" name="age" min="7" max="99" value="16"></label>
  <label>Minuty nauki dziennie <input type="range" name="minutes" min="10" max="120" step="10" value="30"></label>
  <label>Start kursu <input type="date" name="start"></label>
  <label>Kolor motywu <input type="color" name="accent" value="#8b5cf6"></label>
  <label>Szukaj kursu <input type="search" name="q" placeholder="HTML, CSS…"></label>
  <label>Zdjęcie profilowe <input type="file" name="avatar" accept="image/*"></label>
  <label class="inline"><input type="checkbox" name="newsletter" checked> Chcę dostawać newsletter</label>
  <fieldset>
    <legend>Poziom</legend>
    <label class="inline"><input type="radio" name="level" value="beginner" checked> Początkujący</label>
    <label class="inline"><input type="radio" name="level" value="advanced"> Zaawansowany</label>
  </fieldset>
</form>

Podgląd

Definicja i zastosowanie

Element <input> to najbardziej wszechstronny element formularzy. Jego wygląd i działanie zależą od atrybutu type: to samo <input> może być polem tekstowym, polem hasła, suwakiem, próbnikiem kolorów, polem wyboru albo przyciskiem do wgrywania plików. Jest elementem pustym, więc nie ma znacznika zamykającego.

Dobrze dobrany typ to realna wygoda. Na telefonie type="email" pokazuje klawiaturę ze znakiem @, type="tel" klawiaturę numeryczną, a type="date" natywny kalendarz. Przeglądarka sama sprawdza też format: pole e-mail nie przepuści adresu bez @, a pole liczbowe odrzuci wartość spoza zakresu min i max.

Każde pole potrzebuje etykiety <label>, bo tekst z atrybutu placeholder znika, gdy tylko zaczniesz pisać, i nie zastępuje etykiety. Aby wartość pola trafiła na serwer, pole musi mieć atrybut name.

Składnia

<input type="text" name="nazwa">

Atrybuty

type
text | email | password | number | range | date | time | datetime-local | month | week | color | checkbox | radio | file | search | tel | url | hidden | submit | reset | button | image
Rodzaj pola, domyślnie text. Od typu zależą wygląd, klawiatura na telefonie i reguły walidacji. Pole hidden jest niewidoczne i przechowuje wartość wysyłaną razem z formularzem. Typ, którego przeglądarka nie obsługuje, zamienia się w zwykłe pole tekstowe. Dotyczy to na przykład month i week, które nie działają we wszystkich przeglądarkach.
name
tekst
Nazwa, pod którą wartość pola trafi na serwer, na przykład email=ania@example.com. Pola bez name nie są wysyłane. Przyciski radiowe z tą samą nazwą tworzą grupę, w której można zaznaczyć tylko jedną opcję.
value
tekst
Wartość początkowa pola. W polach tekstowych to tekst wpisany na starcie, w polach wyboru i przyciskach radiowych wartość wysyłana po zaznaczeniu, a w przyciskach submit i button napis na przycisku.
placeholder
tekst
Podpowiedź widoczna w pustym polu, najlepiej przykładowy format danych. Znika, gdy użytkownik zacznie pisać, dlatego nigdy nie zastępuje etykiety <label>.
required
atrybut logiczny
Pole musi zostać wypełnione (albo zaznaczone), zanim formularz się wyśle. Przy próbie wysłania pustego pola przeglądarka pokaże komunikat i ustawi w nim kursor. Pole spełniające reguły pasuje do selektora :valid, a błędne do :invalid.
disabled
atrybut logiczny
Wyłącza pole: nie da się go kliknąć, wybrać klawiszem Tab ani edytować, a jego wartość nie zostanie wysłana z formularzem. Przeglądarka zwykle wyszarza takie pole.
readonly
atrybut logiczny
Pole tylko do odczytu: można je zaznaczyć, skopiować z niego tekst i przejść do niego klawiszem Tab, ale nie da się zmienić wartości. W przeciwieństwie do disabled wartość zostanie wysłana. Działa w polach tekstowych, liczbowych i z datami, ale nie w polach wyboru, przyciskach radiowych, suwakach ani polach koloru.
checked
atrybut logiczny
Zaznacza pole wyboru (checkbox) albo przycisk radiowy (radio) na starcie. W grupie przycisków radiowych o tej samej nazwie checked powinien mieć najwyżej jeden.
min / max / step
liczba, data lub godzina
Wyznaczają zakres i krok wartości w polach number, range, date, time i pokrewnych. step="50" pozwala wybierać tylko wartości co 50 (0, 50, 100 i tak dalej), a step="any" wyłącza ograniczenie kroku. Strzałki i suwak trzymają się tych granic, a wartość spoza zakresu nie przejdzie walidacji.
minlength / maxlength
liczba znaków
Najmniejsza i największa dozwolona liczba znaków w polu tekstowym. maxlength po prostu nie pozwala wpisać więcej, a minlength jest sprawdzany przy wysyłaniu formularza. Puste pole bez required przechodzi tę walidację.
pattern
wyrażenie regularne
Wzorzec, do którego musi pasować cała wartość pola, na przykład kod pocztowy w formacie 00-000. Przeglądarka dopasowuje wzorzec do całego tekstu, więc nie musisz dopisywać ^ i $. Opis wymaganego formatu umieść przy polu albo w atrybucie title, który część przeglądarek dołącza do komunikatu o błędzie.
multiple
atrybut logiczny
Pozwala podać kilka wartości naraz: w polu file wybrać kilka plików, a w polu email wpisać kilka adresów rozdzielonych przecinkami.
accept
typy MIME lub rozszerzenia plików
Podpowiada oknu wyboru plików, co pokazać, na przykład image/* (dowolne obrazy), .pdf albo image/png, image/jpeg. To tylko filtr w oknie dialogowym, który użytkownik może obejść, więc typ pliku i tak sprawdź na serwerze.
list
id elementu `<datalist>`
Łączy pole z listą podpowiedzi <datalist>. Użytkownik widzi propozycje podczas pisania, ale nadal może wpisać własną wartość.
autocomplete
on | off | nazwa danych, np. email, username, current-password, new-password, one-time-code
Mówi przeglądarce i menedżerowi haseł, jakie dane pasują do pola. Przy current-password menedżer podpowie zapisane hasło, przy new-password zaproponuje wygenerowanie silnego, a one-time-code pozwala wkleić kod z SMS-a jednym dotknięciem. W formularzu logowania pole z loginem oznacz jako username, nawet jeśli wpisuje się w nie e-mail.
autofocus
atrybut logiczny
Ustawia kursor w polu zaraz po wczytaniu strony. Używaj go oszczędnie, najwyżej raz na stronie i tylko tam, gdzie pole jest głównym celem wizyty, jak w wyszukiwarce. Nagły skok fokusu dezorientuje użytkowników czytników ekranu.

Atrybut	Wartości	Opis
type	text \| email \| password \| number \| range \| date \| time \| datetime-local \| month \| week \| color \| checkbox \| radio \| file \| search \| tel \| url \| hidden \| submit \| reset \| button \| image	Rodzaj pola, domyślnie `text`. Od typu zależą wygląd, klawiatura na telefonie i reguły walidacji. Pole `hidden` jest niewidoczne i przechowuje wartość wysyłaną razem z formularzem. Typ, którego przeglądarka nie obsługuje, zamienia się w zwykłe pole tekstowe. Dotyczy to na przykład `month` i `week`, które nie działają we wszystkich przeglądarkach.
name	tekst	Nazwa, pod którą wartość pola trafi na serwer, na przykład `email=ania@example.com`. Pola bez `name` nie są wysyłane. Przyciski radiowe z tą samą nazwą tworzą grupę, w której można zaznaczyć tylko jedną opcję.
value	tekst	Wartość początkowa pola. W polach tekstowych to tekst wpisany na starcie, w polach wyboru i przyciskach radiowych wartość wysyłana po zaznaczeniu, a w przyciskach `submit` i `button` napis na przycisku.
placeholder	tekst	Podpowiedź widoczna w pustym polu, najlepiej przykładowy format danych. Znika, gdy użytkownik zacznie pisać, dlatego nigdy nie zastępuje etykiety `<label>`.
required	atrybut logiczny	Pole musi zostać wypełnione (albo zaznaczone), zanim formularz się wyśle. Przy próbie wysłania pustego pola przeglądarka pokaże komunikat i ustawi w nim kursor. Pole spełniające reguły pasuje do selektora `:valid`, a błędne do `:invalid`.
disabled	atrybut logiczny	Wyłącza pole: nie da się go kliknąć, wybrać klawiszem Tab ani edytować, a jego wartość nie zostanie wysłana z formularzem. Przeglądarka zwykle wyszarza takie pole.
readonly	atrybut logiczny	Pole tylko do odczytu: można je zaznaczyć, skopiować z niego tekst i przejść do niego klawiszem Tab, ale nie da się zmienić wartości. W przeciwieństwie do `disabled` wartość zostanie wysłana. Działa w polach tekstowych, liczbowych i z datami, ale nie w polach wyboru, przyciskach radiowych, suwakach ani polach koloru.
checked	atrybut logiczny	Zaznacza pole wyboru (`checkbox`) albo przycisk radiowy (`radio`) na starcie. W grupie przycisków radiowych o tej samej nazwie `checked` powinien mieć najwyżej jeden.
min / max / step	liczba, data lub godzina	Wyznaczają zakres i krok wartości w polach `number`, `range`, `date`, `time` i pokrewnych. `step="50"` pozwala wybierać tylko wartości co 50 (0, 50, 100 i tak dalej), a `step="any"` wyłącza ograniczenie kroku. Strzałki i suwak trzymają się tych granic, a wartość spoza zakresu nie przejdzie walidacji.
minlength / maxlength	liczba znaków	Najmniejsza i największa dozwolona liczba znaków w polu tekstowym. `maxlength` po prostu nie pozwala wpisać więcej, a `minlength` jest sprawdzany przy wysyłaniu formularza. Puste pole bez `required` przechodzi tę walidację.
pattern	wyrażenie regularne	Wzorzec, do którego musi pasować cała wartość pola, na przykład kod pocztowy w formacie `00-000`. Przeglądarka dopasowuje wzorzec do całego tekstu, więc nie musisz dopisywać `^` i `$`. Opis wymaganego formatu umieść przy polu albo w atrybucie `title`, który część przeglądarek dołącza do komunikatu o błędzie.
multiple	atrybut logiczny	Pozwala podać kilka wartości naraz: w polu `file` wybrać kilka plików, a w polu `email` wpisać kilka adresów rozdzielonych przecinkami.
accept	typy MIME lub rozszerzenia plików	Podpowiada oknu wyboru plików, co pokazać, na przykład `image/*` (dowolne obrazy), `.pdf` albo `image/png, image/jpeg`. To tylko filtr w oknie dialogowym, który użytkownik może obejść, więc typ pliku i tak sprawdź na serwerze.
list	id elementu `<datalist>`	Łączy pole z listą podpowiedzi `<datalist>`. Użytkownik widzi propozycje podczas pisania, ale nadal może wpisać własną wartość.
autocomplete	on \| off \| nazwa danych, np. email, username, current-password, new-password, one-time-code	Mówi przeglądarce i menedżerowi haseł, jakie dane pasują do pola. Przy `current-password` menedżer podpowie zapisane hasło, przy `new-password` zaproponuje wygenerowanie silnego, a `one-time-code` pozwala wkleić kod z SMS-a jednym dotknięciem. W formularzu logowania pole z loginem oznacz jako `username`, nawet jeśli wpisuje się w nie e-mail.
autofocus	atrybut logiczny	Ustawia kursor w polu zaraz po wczytaniu strony. Używaj go oszczędnie, najwyżej raz na stronie i tylko tam, gdzie pole jest głównym celem wizyty, jak w wyszukiwarce. Nagły skok fokusu dezorientuje użytkowników czytników ekranu.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

type

Rodzaj pola, domyślnie text. Od typu zależą wygląd, klawiatura na telefonie i reguły walidacji. Pole hidden jest niewidoczne i przechowuje wartość wysyłaną razem z formularzem. Typ, którego przeglądarka nie obsługuje, zamienia się w zwykłe pole tekstowe. Dotyczy to na przykład month i week, które nie działają we wszystkich przeglądarkach.

HTML

<form>
  <p><label>Telefon <input type="tel" name="phone" placeholder="600 100 200"></label></p>
  <p><label>Strona WWW <input type="url" name="website" placeholder="https://"></label></p>
  <p><label>Godzina lekcji <input type="time" name="time" value="18:30"></label></p>
  <p><label>Termin oddania <input type="datetime-local" name="deadline"></label></p>
  <p><label>Miesiąc startu <input type="month" name="month"></label></p>
  <input type="hidden" name="course" value="html-101">
  <p>
    <input type="submit" value="Wyślij">
    <input type="reset" value="Wyczyść">
    <input type="button" value="Podgląd">
  </p>
</form>

Podgląd

name

tekst

Nazwa, pod którą wartość pola trafi na serwer, na przykład email=ania@example.com. Pola bez name nie są wysyłane. Przyciski radiowe z tą samą nazwą tworzą grupę, w której można zaznaczyć tylko jedną opcję.

HTML

<p>Jak chcesz się uczyć?</p>
<label><input type="radio" name="mode" value="video"> Wideo</label>
<label><input type="radio" name="mode" value="text"> Tekst</label>
<label><input type="radio" name="mode" value="practice"> Zadania</label>

Podgląd

value

tekst

Wartość początkowa pola. W polach tekstowych to tekst wpisany na starcie, w polach wyboru i przyciskach radiowych wartość wysyłana po zaznaczeniu, a w przyciskach submit i button napis na przycisku.

HTML

<p><label>Nazwa użytkownika <input type="text" name="username" value="ania_koduje"></label></p>
<p><label><input type="checkbox" name="topics" value="css" checked> CSS</label></p>
<input type="submit" value="Zapisz zmiany">

Podgląd

placeholder

tekst

Podpowiedź widoczna w pustym polu, najlepiej przykładowy format danych. Znika, gdy użytkownik zacznie pisać, dlatego nigdy nie zastępuje etykiety <label>.

HTML

<label for="phone">Telefon</label>
<input type="tel" id="phone" name="phone" placeholder="np. 600 100 200">

Podgląd

required

atrybut logiczny

Pole musi zostać wypełnione (albo zaznaczone), zanim formularz się wyśle. Przy próbie wysłania pustego pola przeglądarka pokaże komunikat i ustawi w nim kursor. Pole spełniające reguły pasuje do selektora :valid, a błędne do :invalid.

HTML

<form>
  <label>E-mail <input type="email" name="email" required></label>
  <button>Wyślij</button>
</form>

Podgląd

disabled

atrybut logiczny

Wyłącza pole: nie da się go kliknąć, wybrać klawiszem Tab ani edytować, a jego wartość nie zostanie wysłana z formularzem. Przeglądarka zwykle wyszarza takie pole.

HTML

<p><label>Kod promocyjny <input type="text" name="promo" value="JESIEN2026" disabled></label></p>
<p><label><input type="checkbox" name="certificate" disabled> Certyfikat (po ukończeniu kursu)</label></p>

Podgląd

readonly

atrybut logiczny

Pole tylko do odczytu: można je zaznaczyć, skopiować z niego tekst i przejść do niego klawiszem Tab, ale nie da się zmienić wartości. W przeciwieństwie do disabled wartość zostanie wysłana. Działa w polach tekstowych, liczbowych i z datami, ale nie w polach wyboru, przyciskach radiowych, suwakach ani polach koloru.

HTML

<label>Twój link polecający
  <input type="url" name="referral" value="https://www.codeworlds.com/?ref=ania" size="34" readonly>
</label>

Podgląd

checked

atrybut logiczny

Zaznacza pole wyboru (checkbox) albo przycisk radiowy (radio) na starcie. W grupie przycisków radiowych o tej samej nazwie checked powinien mieć najwyżej jeden.

HTML

<p><label><input type="checkbox" name="reminders" checked> Przypomnienia o nauce</label></p>
<p>
  <label><input type="radio" name="plan" value="monthly"> Miesięczny</label>
  <label><input type="radio" name="plan" value="yearly" checked> Roczny</label>
</p>

Podgląd

min / max / step

liczba, data lub godzina

Wyznaczają zakres i krok wartości w polach number, range, date, time i pokrewnych. step="50" pozwala wybierać tylko wartości co 50 (0, 50, 100 i tak dalej), a step="any" wyłącza ograniczenie kroku. Strzałki i suwak trzymają się tych granic, a wartość spoza zakresu nie przejdzie walidacji.

HTML

<p><label>Liczba uczestników <input type="number" name="seats" min="1" max="10" value="1"></label></p>
<p><label>Budżet w zł <input type="range" name="budget" min="0" max="500" step="50" value="150"></label></p>
<p><label>Termin <input type="date" name="date" min="2026-10-01" max="2026-12-31"></label></p>

Podgląd

minlength / maxlength

liczba znaków

Najmniejsza i największa dozwolona liczba znaków w polu tekstowym. maxlength po prostu nie pozwala wpisać więcej, a minlength jest sprawdzany przy wysyłaniu formularza. Puste pole bez required przechodzi tę walidację.

HTML

<form>
  <label>Nazwa użytkownika
    <input type="text" name="username" minlength="3" maxlength="16" required>
  </label>
  <button>Załóż konto</button>
</form>

Podgląd

pattern

wyrażenie regularne

Wzorzec, do którego musi pasować cała wartość pola, na przykład kod pocztowy w formacie 00-000. Przeglądarka dopasowuje wzorzec do całego tekstu, więc nie musisz dopisywać ^ i $. Opis wymaganego formatu umieść przy polu albo w atrybucie title, który część przeglądarek dołącza do komunikatu o błędzie.

HTML

<form>
  <label>Kod pocztowy
    <input type="text" name="postal" pattern="[0-9]{2}-[0-9]{3}" placeholder="00-000" title="Dwie cyfry, kreska i trzy cyfry">
  </label>
  <button>Sprawdź</button>
</form>

Podgląd

multiple

atrybut logiczny

Pozwala podać kilka wartości naraz: w polu file wybrać kilka plików, a w polu email wpisać kilka adresów rozdzielonych przecinkami.

HTML

<p><label>Zrzuty ekranu projektu <input type="file" name="screens" accept="image/*" multiple></label></p>
<p><label>Zaproś znajomych <input type="email" name="friends" size="34" placeholder="ola@example.com, kuba@example.com" multiple></label></p>

Podgląd

accept

typy MIME lub rozszerzenia plików

Podpowiada oknu wyboru plików, co pokazać, na przykład image/* (dowolne obrazy), .pdf albo image/png, image/jpeg. To tylko filtr w oknie dialogowym, który użytkownik może obejść, więc typ pliku i tak sprawdź na serwerze.

HTML

<p><label>Avatar (PNG lub JPG) <input type="file" name="avatar" accept="image/png, image/jpeg"></label></p>
<p><label>CV w PDF <input type="file" name="cv" accept=".pdf,application/pdf"></label></p>

Podgląd

list

id elementu `<datalist>`

Łączy pole z listą podpowiedzi <datalist>. Użytkownik widzi propozycje podczas pisania, ale nadal może wpisać własną wartość.

HTML

<label>Ulubiony język
  <input type="text" name="language" list="languages">
</label>
<datalist id="languages">
  <option value="JavaScript">
  <option value="Python">
  <option value="TypeScript">
  <option value="Go">
</datalist>

Podgląd

autocomplete

on | off | nazwa danych, np. email, username, current-password, new-password, one-time-code

Mówi przeglądarce i menedżerowi haseł, jakie dane pasują do pola. Przy current-password menedżer podpowie zapisane hasło, przy new-password zaproponuje wygenerowanie silnego, a one-time-code pozwala wkleić kod z SMS-a jednym dotknięciem. W formularzu logowania pole z loginem oznacz jako username, nawet jeśli wpisuje się w nie e-mail.

HTML

<form>
  <p><label>E-mail <input type="email" name="email" autocomplete="username"></label></p>
  <p><label>Hasło <input type="password" name="password" autocomplete="current-password"></label></p>
  <p><label>Kod z SMS-a <input type="text" name="code" inputmode="numeric" autocomplete="one-time-code"></label></p>
</form>

Podgląd

autofocus

atrybut logiczny

Ustawia kursor w polu zaraz po wczytaniu strony. Używaj go oszczędnie, najwyżej raz na stronie i tylko tam, gdzie pole jest głównym celem wizyty, jak w wyszukiwarce. Nagły skok fokusu dezorientuje użytkowników czytników ekranu.

HTML

<label>Szukaj lekcji <input type="search" name="q" autofocus></label>

Podgląd

W podglądzie osadzonym w ramce przeglądarka może zignorować autofocus.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Łącz każde pole z etykietą: owiń je w <label> albo nadaj polu id i wskaż je w <label for="…">. Kliknięcie etykiety ustawi wtedy kursor w polu.
Do numerów telefonu, kodów pocztowych i numerów kart nie używaj type="number". Ten typ dodaje strzałki do zwiększania wartości i jest przeznaczony do liczb, na których się liczy, a nie do ciągów cyfr. Wybierz type="tel" albo type="text" z inputmode="numeric".
Walidacja w przeglądarce (required, pattern, min) pomaga użytkownikowi, ale nie chroni serwera. Dane zawsze sprawdzaj także po stronie serwera.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs