Element HTML input
reprezentuje na stronie internetowej pola danych różnego typu, które najczęściej mają postać kontrolek i służą do wprowadzania oraz edytowania informacji przez użytkownika.
Przykłady użycia elementu HTML input
Formularz zawierający różne rodzaje kontrolek.
<form action="procesor_formularza.php" method="get">
<label>Google: <input type="search" name="szukaj"></label> <input type="submit" value="Szukaj...">
<label>Nazwisko: <input type="text" name="nazwisko"></label>
<label>Krowa: <input type="radio" name="krowa"></label>
</form>
Kontekst użycia
Modele treści HTML5 | treść ogólna, syntagmatyczna, interaktywna (nie w stanie hidden ) i formularzowa |
---|---|
Elementy nadrzędne | Elementy syntagmatyczne |
Elementy potomne | Brak, ponieważ jest to element pusty |
Znaczniki | Element pusty, a więc nie może mieć znacznika zamykającego |
Normy | HTML 5 — podrozdział 4.10.7; HTML 4.01 — podrozdział 17.4 |
Interfejs DOM | HTMLInputElement |
Różnice między HTML 4.01 a HTML5 | W HTML5 atrybut type ma nowe wartości: tel , search , url , email , datetime , date , month , week , time , datetime-local , number , range oraz color
W HTML5 dodano nowe atrybuty: autofocus , placeholder , form , required , autocomplete , min , max , multiple , pattern , step , list , width i height (dla type=image ), dirname , formaction , formenctype , formmethod , formnovalidate , formtarget
W HTML5 atrybutowi accept można przypisywać wartości audio/* , video/* oraz image/*
W HTML5 usunięto atrybut align |
Obsługa przez przeglądarki
Firefox | Chrome | Opera | Safari | Internet Explorer |
---|---|---|---|---|
✔ | ✔ | ✔ | ✔ | ✔ |
Atrybuty obowiązkowe
Element input
ogólnie rzecz biorąc nie ma atrybutów obowiązkowych, ale niektórym atrybutom muszą towarzyszyć inne atrybuty. Szczegółowe informacje znajdują się poniżej.
Atrybuty opcjonalne
Atrybuty globalne HTML5 oraz:
Atrybut | Opis |
---|---|
accept | Jeśli atrybut type ma wartość file , atrybut accept sugeruje przeglądarce, jakiego typu pliki będą akceptowane przez serwer. W przeciwnym razie jest ignorowany. Wartością tego atrybutu musi być rozdzielana przecinkami lista określników typu:
|
alt | Określa alternatywny tekst wyświetlany, gdy nie zostanie wczytany obraz graficzny (dotyczy tylko type="image" ) |
autocomplete | Służy do włączania i wyłaączania funkcji automatycznego uzupełniania elementu formularza |
autofocus | Atrybut logiczny powodujący, że mający go element jest automatycznie aktywowany po załadowaniu strony przez przeglądarkę |
checked | Atrybut logiczny oznaczający, że element po wczytaniu strony przez przeglądarkę powinien być domyślnie zaznaczony (dotyczy tylko type="checkbox" i type="radio" ) |
dirname | Umożliwia przesyłanie wraz z formularzem informacji o kierunku tekstu w elemencie. Atrybut ten, jeśli zostanie użyty, nie może mieć jako wartości pustego łańcucha |
disabled | Atrybut logiczny oznaczający, że element jest wyłączony |
form | Służy do określania listy formularzy, z którymi związany jest element input |
formaction | Określa miejsce wysłania danych z formualrza (dotyczy tylko type="submit" i type="image" ) |
formenctype | Określa kodowanie danych wysyłanych z formularza na serwer |
formmethod | Określa metodą wysyłania danych formularza na serwer |
formnovalidate | Wyłącza sprawdzanie poprawności danych formularza przed wysłaniem ich na serwer |
formtarget | Określa miejsce wyświetlenia odpowiedzi serwera po wysłaniu do niego formularza |
height | Określa wysokość w pikselach obrazu graficznego elementów z atrybutem type="image" |
list | Określa element zawierający listę opcji sugerowanych użytkownikowi do wyboru. Jego wartością musi być identyfikator elementu datalist znajdującego się w tym samym dokumencie, co element input |
max | Określa maksymalną wartość elementu. Wartość tego atrybutu nie może być mniejsza od wartości atrybutu min |
maxlength | Określa maksymalną liczbę znaków, jaką użytkownik może wpisać w elemencie |
min | Określa minimalną wartość elementu. Wartość tego atrybutu nie może być większa od wartości atrybutu min |
multiple | Atrybut logiczny oznaczający, że użytkownik może podać więcej niż jedną wartość |
name | Określa nazwę elementu. Wartość tego atrybutu nie może być pustym łańcuchem |
pattern | Określa wyrażenie regularne wg którego ma być sprawdzana zawartość elementu |
placeholder | Tekst wyświetlany w polu tekstowym formularza i który znika, gdy użytkownik w tym polu kliknie |
readonly | Oznacza, że zawartość elementu można odczytać, ale nie da się jej zmienić |
required | Oznacza, że wypełnienie elementu formularza jest obowiązkowe |
size | Określa liczbę znaków, które są widoczne podczas wprowadzania wartości do elementu |
src | Określa adrtes URL obrazu graficznego przycisku zatwierdzania (dotyczy tylko type="image" ) |
step | Określa skok wartości elementu |
type | Określa typ kontrolki formularza. Atrybut ten ma następujące wartości (szczegółowy opis znajduje się na dole strony): button , checkbox, color , date , datetime , datetime-local , email , file , hidden , image , month , number , password , radio , range , reset , search , submit , tel , text , time , url oraz week |
value | Określa wartość elementu |
width | Określa szerokość w pikselach obrazu graficznego elementów z atrybutem type="image" |
Typy pola input
button
Typ button
służy do tworzenia przycisków ogólnego przeznaczenia, których działanie należy zdefiniować np. za pomocą JavaScriptu.
Przykład:
<input type="button" value="Tekst na przycisku" />
Efekt powyższego kodu:
checkbox
Typ checkbox
służy do tworzenia pól wyboru. Pola można grupować za pomocą atrybutu name
. Do serwera wysyłane są pary nazwa=wartość dla zaznaczonych pól.
Przykład:
<label>Zielony <input type="checkbox" name="kolor" value="zielony" /></label>
<label>Czerwony <input type="checkbox" name="kolor" value="czerwony" /></label>
<label>Niebieski <input type="checkbox" name="kolor" value="niebieski" /></label>
Efekt powyższego kodu:
Jeśli wszystkie pola zostaną zaznaczone, serwer otrzyma następujący łańcuch wartości: kolor=zielony&kolor=czerwony&kolor=niebieski
Jeśli pole nie ma zdefiniowanego atrybutu value
, a zostanie zaznaczone, do serwera zostanie wysłana wartość on
.
color
Typ color
służy do tworzenia kontrolki wyboru koloru.
Przykład:
<label>Wybierz kolor: <input type="color" name="kolor" /></label>
Efekt:
Kolor wybrany za pomocą tej kontrolki jest w formacie sRGB z 8-bitową głębią kanałów czerwonego, zielonego i niebieskiego.
date
Typ date
służy do tworzenia kontrolki wyboru daty.
Przykład:
<label>Wybierz datę: <input type="date" name="kolor" /></label>
Efekt:
datetime
Typ datetime
służy do tworzenia kontrolki wyboru daty i godziny w strefie czasowej UTC.
Przykład:
<label>Wybierz datę i godzinę: <input type="datetime" name="data" /></label>
Efekt:
datetime-local
Typ datetime-local
służy do tworzenia kontrolki wyboru daty i godziny bez określenia strefy czasowej.
Przykład:
<label>Wybierz datę i godzinę: <input type="datetime-local" name="data" /></label>
Typ email
służy do tworzenia pola tekstowego na adres e-mail lub listę adresów e-mail.
Przykład:
<label>Adres e-mail: <input type="email" name="email" /></label>
file
Typ file
służy do tworzenia pola wyboru pliku. Kliknięcie tego pola powoduje otwarcie standardowego systemowego okna wyboru pliku.
Przykład:
<label>Prześlij plik: <input type="file" name="plik" /></label>
hidden
Typ hidden
służy do tworzenia kontrolki, która jest niewidoczna na stronie, ale któej wartość jest wysyłana na serwer wraz z resztą formularza.
Przykład:
<label>Nie widać mnie: <input type="hidden" name="plik" value="ukryta_wartosc" /></label>
image
Typ image
służy do tworzenia graficznego przycisku do zatwierdzania formularza. Atrybutowi temu musi towarzyszyć atrybut src
określający adres URL obrazu graficznego i atrybut alt
zawierający tekst alternatywny. Dodatkowo za pomocą atrybutów width
i height
można określić wysokość i szerokość obrazu w pikselach.
Przykład:
<label>Przycisk graficzny: <input type="image" src="/przycisk.png" alt="Przycisk" /></label>
month
Typ month
służy do tworzenia kontrolki wyboru daty składającej się z roku i miesiąca bez określenia strefy czasowej.
Przykład:
<label>Data: <input type="month" /></label>
number
Typ number
służy do tworzenia kontrolki na liczbę zmiennoprzecinkową. Atrybutowi temu mogą towarzyszyć dodatkowo atrybuty min
, max
i step
. Atrybut min
określa najmniejszą dopuszczalną wartość, max
— największą, a step
— skok wartości, tzn. jeśli min
zostanie ustawiony na 10
, a step
na 5
, to najmniejszą dopuszczalną wartością będzie 10
, kolejną 15
itd.
W poniższym elemencie można wpisać tylko następujące wartości: 10, 20, 30, 40, 50, 60, 70, 80, 90 oraz 100.
<label>Wpisz liczbę: <input type="number" min="10" max="100" step="10" /></label>
password
Typ password
służy do tworzenia pola tekstowego na hasło. Tekst wpisywany w tym polu jest zamaskowany. W polach tego typu należy stosować dodatkowo atrybut maxlength
do określenia maksymalnej długości tekstu.
Pole do wpisania hasła:
<label>Podaj hasło: <input type="password" maxlength="20" /></label>
radio
Typ radio
służy do tworzenia tzw. przycisków radiowych. Pola tego typu muszą mieć dodatkowo zdefiniowany atrybut value
zawierający wartość, która zostanie wysłana do serwera po zatwierdzeniu formularza. Jeśli kilku elementom typu radio
przypisze się atrybut name
o tej samej wartości, będą one należały do jednej grupy. Tylko jeden element z grupy może być zaznaczony w danym czasie.
Przyciski radiowe:
<label>Biały: <input type="radio" value="bialy" name="kolory" /></label>
<label>Czarny: <input type="radio" value="czarny" name="kolory" /></label>
range
Typ range
służy do tworzenia kontrolki wyboru wartości liczbowej, przy czym dokładna wartość nie jest wymagana. Kontrolka ta ma następujące wartości domyślne dla atrybutów min
, max
, value
i step
:
min
:0
max
:100
value
:min + (max-min)/2
lubmin
, jeślimax < min
step
:1
Pole zakresu liczbowego
<label>Wybierz wartość: <input type="range" /></label>
reset
Typ reset
służy do tworzenia przycisku przywracającego domyślne ustawienia wartości w polach formularza.
Pole zakresu liczbowego:
<label>Wybierz wartość: <input type="reset" /></label>
search
Typ search
służy do tworzenia jednowierszowych pól tekstowych wyszukiwania. Znaki nowego wiersza są automatycznie usuwane.
Pole wyszukiwania:
<label>Szukaj: <input type="search" /></label>
submit
Typ submit
służy do tworzenia przycisków zatwierdzania formularza.
Przycisk zatwierdzania formularza:
<input type="submit" value="Zatwierdź" />
tel
Typ tel
służy do tworzenia pól tekstowych na numer telefonu. Złamania wiersza są usuwane, ale poprawność wprowadzonej wartości nie jest w żaden sposób sprawdzana. Można zdefiniować reguły sprawdzające za pomocą atrybutów pattern
i maxlength
.
Pole do wpisywania numeru telefonu:
<input type="tel" />
text
Typ text
służy do tworzenia ogólnych pól tekstowych. Złamania wiersza są usuwane.
Pole tekstowe formularza:
<input type="text" />
time
Typ time
służy do tworzenia kontrolek wyboru godziny bez określenia strefy czasowej.
Pole godziny
<input type="time" />
url
Typ url
służy do tworzenia pól tekstowych do wpisywania adresów URL. Złamania wiersza są usuwane, ale poprawność wprowadzonej wartości nie jest w żaden sposób sprawdzana. Można zdefiniować reguły sprawdzające adres za pomocą atrybutów pattern
i maxlength
.
Pole adresu URL:
<input type="url" />
week
Typ week
służy do tworzenia kontrolek wyboru numeru tygodnia roku bez określenia strefy czasowej.
Pole tygodnia roku:
<input type="week" />