Dokumentacja HTML z przykładami: Typy input

Q: Ile jest typów input w HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url i week. Nieznany lub brakujący typ działa jak text.

Q: Jaki jest domyślny typ input w HTML?

text. bez type albo z typem, którego przeglądarka nie zna, to jednoliniowe pole tekstowe.

Q: Czy używać type="number" dla numerów telefonów lub kodów pocztowych?

Nie. number służy do ilości: dodaje przyciski strzałek i odrzuca +, spacje i myślniki, które zawierają numery telefonów. Dla numerów telefonów używaj type="tel", a dla kodów, takich jak kody pocztowe i numery kart, type="text" z inputmode="numeric".

Q: Jakiego formatu używa input type date?

Wartość to zawsze YYYY-MM-DD, np. 2026-09-24, niezależnie od formatu, który użytkownik widzi na ekranie. Wyświetlanie zależy od ustawień regionalnych użytkownika; wysyłana wartość i wartość w skryptach już nie.

Q: Czy znacznik input potrzebuje znacznika zamykającego?

Nie. to element pusty: pisz . Zamykające jest niepoprawne, a samozamykający ukośnik w jest dozwolony, ale nic nie robi.

Znacznik input i jego typy

<input> to pole formularza, a jego atrybut type decyduje o rodzaju pola. Ten sam znacznik tworzy pole tekstowe, suwak, wybór daty albo wybór koloru. Wypróbuj każde pole poniżej i naciśnij Submit, żeby zobaczyć, co wysyła formularz:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> to element pusty, więc nie ma znacznika zamykającego. Jego name to klucz, pod którym wysyłana jest wartość, a value to wartość początkowa. Brakujący lub błędnie wpisany type daje zwykłe pole tekstowe.

Wszystkie typy input w HTML

`type`	Co to jest	Uwagi
`text`	Jedna linia tekstu	Typ domyślny
`password`	Tekst wyświetlany jako kropki	Sam z siebie nie jest szyfrowany; wysyłaj go przez HTTPS
`email`	Adres e-mail	Waliduje format; klawisz `@` na klawiaturze telefonu
`url`	Adres internetowy	Musi zaczynać się od schematu, np. `https://`
`tel`	Numer telefonu	Klawiatura numeryczna na telefonie, bez sprawdzania formatu
`search`	Pole wyszukiwania	Często pokazuje przycisk czyszczenia
`number`	Liczba	Przyciski strzałek, `min`, `max`, `step`
`range`	Suwak	Z założenia nieprecyzyjny; wartość to liczba
`date`	Data	Wartość to `YYYY-MM-DD`
`time`	Godzina	Wartość to `HH:MM` (format 24-godzinny)
`datetime-local`	Data i godzina, bez strefy czasowej	Wartość to `YYYY-MM-DDTHH:MM`
`month`	Rok i miesiąc	Nie każda przeglądarka go obsługuje
`week`	Rok i numer tygodnia	Nie każda przeglądarka go obsługuje
`color`	Wybór koloru	Wartość to `#rrggbb` małymi literami
`checkbox`	Pole włącz/wyłącz	Zobacz checkbox w HTML
`radio`	Jeden wybór z grupy	Zobacz przyciski radio w HTML
`file`	Wybór pliku	`accept`, `multiple`
`hidden`	Wartość wysyłana, ale niewidoczna	Na identyfikatory i tokeny
`submit`	Przycisk wysyłania	`<button type="submit">` jest bardziej elastyczny
`reset`	Przycisk resetu	Rzadko dobry pomysł
`button`	Przycisk, który sam nic nie robi	Do JavaScriptu
`image`	Przycisk wysyłania w postaci obrazka	Wysyła też współrzędne kliknięcia

Typy tekstowe i klawiatury telefonów

email, url, tel, search i text na komputerze wyglądają jak zwykłe pole tekstowe. Różnią się walidacją i tym, jaka klawiatura otwiera się na telefonie. Obramowanie w tym przykładzie robi się zielone lub czerwone zależnie od oceny wartości przez przeglądarkę:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

ada@example to dla przeglądarki poprawny e-mail: sprawdza tylko tekst, @ i domenę, a nie to, czy domena ma kropkę. Prawdziwe sprawdzenie odbywa się na serwerze.
example.com nie jest poprawnym url, bo nie ma schematu. https://example.com jest.
tel przyjmuje wszystko. Formaty numerów telefonów za bardzo różnią się między krajami, więc nie ma wbudowanego sprawdzania; dodaj pattern, jeśli go potrzebujesz.
inputmode="numeric" prosi telefony o klawiaturę z cyframi bez problemów, jakie daje type="number", dlatego to właściwy wybór dla kodów pocztowych, kodów jednorazowych i numerów kart.

number i range

Oba przyjmują min, max i step. number służy do dokładnych wartości; range to suwak dla wartości, w których dokładna liczba ma mniejsze znaczenie. Suwak nie pokazuje liczby, więc połącz go z <output>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

Dla number wartość domyślna step to 1, więc pole ceny bez step="0.01" odrzuca 4.99 przy wysyłaniu formularza. W JavaScripcie input.value to zawsze ciąg znaków; aby dostać liczbę, użyj input.valueAsNumber.

Daty i godziny

Typy daty i czasu otwierają wbudowany selektor przeglądarki. To, co widzi użytkownik, zależy od jego ustawień regionalnych (09/24/2026, 24.09.2026), ale wartość zawsze ma ten sam stały format:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Ten stały format otrzymuje serwer i odczytuje JavaScript, więc nigdy nie musisz parsować "24.09.2026". min i max przyjmują ten sam format. datetime-local nie ma strefy czasowej: jeśli ma ona znaczenie, przelicz ją na serwerze według strefy użytkownika.

color i file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" ogranicza wybór plików do obrazków (i na telefonach proponuje aparat); przyjmuje też rozszerzenia, np. accept=".pdf,.docx". To tylko wskazówka dla okna wyboru, więc typ pliku sprawdzaj na serwerze. multiple pozwala wybrać kilka plików. Prawdziwe przesyłanie wymaga też na formularzu method="post" i enctype="multipart/form-data".

Podpowiedzi z datalist

<datalist> daje polu tekstowemu listę podpowiedzi, a jednocześnie pozwala wpisać dowolną wartość. Połącz je atrybutem list:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Wpisz w pole "ja", żeby zobaczyć pasujące podpowiedzi. W przeciwieństwie do listy select użytkownik może wpisać wartość, której nie ma na liście.

Atrybuty pól input

Atrybut	Działanie
`name`	Klucz, pod którym wysyłana jest wartość
`value`	Wartość początkowa
`placeholder`	Podpowiedź widoczna, gdy pole jest puste (nie etykieta)
`required`	Musi być wypełnione przed wysłaniem
`disabled`	Nie da się go użyć i nie jest wysyłane
`readonly`	Nie da się go edytować, ale jest wysyłane
`autocomplete`	Co ma się uzupełniać automatycznie: `email`, `name`, `current-password`, `one-time-code`, `off`
`min`, `max`, `step`	Ograniczenia dla liczb, suwaków, dat i godzin
`minlength`, `maxlength`	Ograniczenia długości dla typów tekstowych
`pattern`	Wyrażenie regularne, do którego musi pasować cała wartość
`inputmode`	Jaką klawiaturę pokazać na telefonie: `numeric`, `decimal`, `email`, `tel`, `url`
`list`	`id` elementu `<datalist>`
`multiple`	Kilka wartości, dla `email` i `file`
`accept`	Typy plików dla `file`

Częste błędy

type="number" dla numerów telefonów, kodów pocztowych lub numerów kart. To nie są ilości. Użyj tel albo text z inputmode="numeric".
Pole ceny bez step="0.01". Wartości dziesiętne nie przechodzą walidacji.
placeholder jako etykieta. Znika, gdy tylko użytkownik zacznie pisać.
Poleganie na accept lub type="email" w kwestii bezpieczeństwa. To udogodnienia; serwer sprawdza jeszcze raz.
type="month" lub type="week" bez rozwiązania zapasowego. Niektóre przeglądarki pokazują zwykłe pole tekstowe.
Znacznik zamykający </input>. <input> jest pusty.

Najczęściej zadawane pytania

Ile jest typów input w HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url i week. Nieznany lub brakujący typ działa jak text.

Jaki jest domyślny typ input w HTML?

text. <input> bez type albo z typem, którego przeglądarka nie zna, to jednoliniowe pole tekstowe.

Czy używać type="number" dla numerów telefonów lub kodów pocztowych?

Nie. number służy do ilości: dodaje przyciski strzałek i odrzuca +, spacje i myślniki, które zawierają numery telefonów. Dla numerów telefonów używaj type="tel", a dla kodów, takich jak kody pocztowe i numery kart, type="text" z inputmode="numeric".

Jakiego formatu używa input type date?

Wartość to zawsze YYYY-MM-DD, np. 2026-09-24, niezależnie od formatu, który użytkownik widzi na ekranie. Wyświetlanie zależy od ustawień regionalnych użytkownika; wysyłana wartość i wartość w skryptach już nie.

Czy znacznik input potrzebuje znacznika zamykającego?

Nie. <input> to element pusty: pisz <input type="text" name="city">. Zamykające </input> jest niepoprawne, a samozamykający ukośnik w <input /> jest dozwolony, ale nic nie robi.

Powiązane zagadnienia