Tag HTML <input>

Definicja i użycie

<input> Tag define input field, w którym użytkownik może wprowadzać dane.

<input> Element jest najważniejszym elementem formularza.

<input> Element może być wyświetlany na różne sposoby, w zależności od Atrybut type.

Poniżej znajdują się różne typy wejść:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(domyślna wartość)
  • <input type="time">
  • <input type="url">
  • <input type="week">

Zobacz Atrybut typeAby zobaczyć przykłady dla każdego typu wejścia!

Przykład

HTML formularz zawierający trzy pola wejściowe; dwa pola tekstowe i przycisk wysyłania:

<form action="/action_page.php">
  <label for="fname">Imię:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nazwisko:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Zatwierdź">
</form>

Spróbuj sam!

Wskazówki i komentarze

Wskazówka:Zawsze używaj etykiety <label> do zdefiniowania etykiety dla następujących elementów:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Atrybut

Atrybut Wartość Opis
accept
  • Rozszerzenie pliku
  • audio/*
  • video/*
  • image/*
  • Typ mediów

Określa typ pliku, który zostanie wysłany za pomocą przesyłania pliku.

Określa, które typy plików użytkownik może wybrać z okna dialogowego wybierania plików (aplikuje się tylko do type="file").
alt Tekst Określa alternatywny tekst dla obrazu (aplikuje się tylko do type="image").
autocomplete
  • on
  • off
 Określa, czy element <input> powinien być włączony do automatycznego uzupełniania.
autofocus autofocus Określa, że element <input> powinien automatycznie uzyskać fokus po załadowaniu strony.
checked checked Określa, że element <input> powinien być zaznaczony przed załadowaniem strony (aplikuje się do type="checkbox" lub type="radio").
dirname inputname.dir Określa kierunek tekstu, który zostanie wysłany.
disabled disabled Określa, że element <input> powinien być wyłączony.
form Identyfikator formularza Określa formularz do którego należy element <input>.
formaction URL Określa URL przetwarzania pliku dla elementów wejściowych formularza (aplikuje się do type="submit" i type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Określa, jak kódować dane formularza, gdy są wysyłane do serwera (dla type="submit" i type="image").
formmethod
  • get
  • post
 Definiuje HTTP metodę używaną do wysyłania danych do URL akcji (dla type="submit" i type="image").
formnovalidate formnovalidate Definiuje, że formularz nie powinien być walidowany przy wysyłaniu elementu.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Nazwa ramki 		Określa, gdzie wyświetlić odpowiedź po wysłaniu formularza (dla type="submit" i type="image").
height Pixel Określa wysokość elementu <input> (tylko dla type="image").
list datalist_id Wskazuje listę <datalist> zawierającą predefiniowane opcje dla <input>.
max
  • liczby
  • Data
 Określa maksymalną wartość elementu <input>.
maxlength liczby Określa maksymalną liczbę znaków dozwolonych w elemencie <input>.
min
  • liczby
  • Data
 Określa minimalną wartość elementu <input>.
minlength liczby Określa minimalną liczbę znaków wymaganych w elemencie <input>.
multiple multiple Określa, że użytkownik może wprowadzać wiele wartości w elemencie <input>.
name Tekst Określa nazwę elementu <input>.
pattern Wyrażenie regularne Określa regularne wyrażenie weryfikujące wartość elementu <input>.
placeholder Tekst Określa krótki podpowiedź dla oczekiwanej wartości elementu <input>.
popovertarget Element id Określa element pop-up, który ma być wywołany (tylko dla type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Określa, co się stanie, gdy klikniesz przycisk (tylko dla type="button").
readonly readonly Określa, że pole wejściowe jest tylko do odczytu.
required required Określa, że pole wejściowe musi być wypełnione przed wysłaniem formularza.
size liczby Określa szerokość elementu <input> (w jednostkach liczby znaków).
src URL URL obrazu używanego jako przycisku (tylko dla type="image").
step
  • liczby
  • any
 Określa przerwę między legalnymi liczbami w polu wejścia.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Określa typ elementu <input> do wyświetlenia.
value Tekst Określa wartość elementu <input>.
width Pixel Określa szerokość elementu <input> (tylko dla type="image").

Atrybuty globalne

<input> Etiqueta również obsługuje Atrybuty globalne w HTML.

Atrybuty zdarzeniowe

<input> Etiqueta również obsługuje Atrybuty zdarzeniowe w HTML.

Domyślne ustawienia CSS

Brak.

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie

Strony związane

Tutorial HTML:

Podręcznik referencyjny HTML DOM: