- Autor publikacji
- Virtual Patriot - Administrator
input
- Data publikacji
- Ostatnio edytowano
Przeznaczenie elementu input
Element input
reprezentuje określonego typu element formularza HTML.
Element formularza HTML zazwyczaj stanowi pole na daną w postaci wartości, która może zostać samodzielnie wybrana lub wprowadzona przez użytkownika.
Dodatkowe artykuły związane z elementem input
- Progres XII - Formularz HTML - elementy HTML mogące posiadać daną
- Progres XII - Formularz HTML - dana reprezentująca plik
- Progres XII - Formularz HTML - atrybut "autocomplete"
- Progres XII - Formularz HTML - atrybut "autofocus"
- Progres XII - Formularz HTML - atrybut "required"
- Progres XII - Formularz HTML - atrybut "maxlength"
- Progres XII - Formularz HTML - atrybut "minlength"
- Progres XII - Formularz HTML - atrybut "pattern"
- Progres XII - Formularz HTML - atrybut "placeholder"
- Progres XII - Formularz HTML - atrybut "disabled"
- Progres XII - Formularz HTML - atrybut "readonly"
- Progres XII - Formularz HTML - atrybut "dirname"
- Progres XII - Formularz HTML - element "input" typu "radio"
- Progres XII - Formularz HTML - element "input" typu "checkbox"
- Progres XII - Formularz HTML - element "input" typu "password"
- Progres XII - Formularz HTML - element "input" typu "hidden"
Informacje techniczne o elemencie input
- kategoria ogólna
-
-
zawartość interaktywna, jednak tylko wtedy gdy dany element input nie posiada atrybutu type o wartości hidden
-
zawartość wyszczególniona w obiekcie elements elementu form lub elementu fieldset
-
zawartość powiązana z elementem label, jednak tylko wtedy gdy dany element input nie posiada atrybutu type o wartości hidden
-
zawartość, której wartość posiadana przez daną może zostać zresetowana
-
zawartość powiązana z formularzem HTML za pomocą atrybutu form
-
zawartość namacalna, jednak tylko wtedy gdy dany element input nie posiada atrybutu type o wartości hidden
- kontekst zewnętrzny
-
element HTML, który tworzy wewnętrzny kontekst frazowany
Przykładowy Kod HTML
<form> <label>Wybierz Twój ulubiony kolor: <input type="color"></label> <button type="submit">zatwierdź</button> </form>
Kontekstem zewnętrznym przykładowego elementu "input" jest element "label". Wspomniany element "label" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "label", jest prawidłowym kontekstem zewnętrznym dla elementu "input".
- kontekst wewnętrzny
-
brak
- wymagane elementy dzieci
-
brak
- wymagane atrybuty
- zdolność fallback
-
nie dotyczy
- składnia HTML
-
<input>
- pominięcie tagu na początku
-
nigdy
- pominięcie tagu na końcu
-
zawsze
- CSS display
-
inline-block
Przypuszczalnie domyślne reguły CSS elementu input
input {
display:inline-block;
font-size:13px;
font-family:sans-serif;
background-color:white;
color:black;
padding:2px;
border-width:1px;
border-style:inset;
border-color:black;
box-shadow:0 0 2px 1px red;
/*
właściwość "box-shadow" w tym wypadku uaktywnia się,
w momencie gdy zasada,
którą określa atrybut "required" danego elementu "input",
nie została spełniona przez użytkownika
*/
}
input:focus {
border-color:blue;
outline-color:blue;
}
input:hover {
border-color:blue;
}
input:disabled {
cursor:default;
background-color:#DDD;
color:#888;
border-color:#888;
outline-color:#888;
}
Interpretacja elementu input
-
tak
Nie interpretuje atrybutu dirname.
Nie interpretuje wartości datetime-local, month oraz week atrybutu type.
-
tak
-
tak
Nie interpretuje wartości date, datetime-local, month, time oraz week atrybutu type.
-
tak
-
tak
Interpretuje atrybut accept, autofocus, formaction, formenctype, formmethod, formnovalidate, formtarget, list, max, min, multiple, pattern, placeholder, required oraz step, lecz od wersji "10".
Interpretuje wartość email, range, tel oraz url atrybutu type, lecz od wersji "10".
Nie interpretuje atrybutu dirname, form oraz minlength.
Nie interpretuje wartości color, date, datetime-local, month, number, time oraz week atrybutu type.
-
tak
Opis atrybutów elementu input
accept
Przeznaczenie atrybutu accept
Atrybut accept
wykorzystany wraz z elementem input
pozwala nam określić akceptowalny przez przeglądarkę internetową typ pliku, który może zostać wybrany przez użytkownika za pośrednictwem danego elementu input
.
Atrybut "accept" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość file.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu accept
- typ MIME
-
Należy podać ciąg znaków w formie typu MIME.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data"> <label> Wybierz plik: <input type="file" name="plik" accept="text/html"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Akceptowalnym przez przeglądarkę internetową typem pliku, który może zostać wybrany przez użytkownika za pośrednictwem przykładowego elementu "input", jest plik typu HTML, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z wartością "text/html".
- rozszerzenie pliku
-
Należy podać rozszerzenie pliku bezpośrednio po znaku
.
(kropka).Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data"> <label> Wybierz plik: <input type="file" name="plik" accept=".html"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Akceptowalnym przez przeglądarkę internetową typem pliku, który może zostać wybrany przez użytkownika za pośrednictwem przykładowego elementu "input", jest plik typu HTML, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z wartością ".html".
- image/*
-
Wartość
image/*
oznacza, że każdy plik reprezentujący obrazek jest akceptowalny.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data"> <label> Wybierz plik: <input type="file" name="plik" accept="image/*"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Akceptowalnym przez przeglądarkę internetową typem pliku, który może zostać wybrany przez użytkownika za pośrednictwem przykładowego elementu "input", jest dowolny plik reprezentujący obrazek, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z wartością "image/*".
- audio/*
-
Wartość
audio/*
oznacza, że każdy plik reprezentujący dźwięk jest akceptowalny.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data"> <label> Wybierz plik: <input type="file" name="plik" accept="audio/*"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Akceptowalnym przez przeglądarkę internetową typem pliku, który może zostać wybrany przez użytkownika za pośrednictwem przykładowego elementu "input", jest dowolny plik reprezentujący dźwięk, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z wartością "audio/*".
- video/*
-
Wartość
video/*
oznacza, że każdy plik reprezentujący wideo jest akceptowalny.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data"> <label> Wybierz plik: <input type="file" name="plik" accept="video/*"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Akceptowalnym przez przeglądarkę internetową typem pliku, który może zostać wybrany przez użytkownika za pośrednictwem przykładowego elementu "input", jest dowolny plik reprezentujący wideo, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z wartością "video/*".
- kombinacja wartości
-
Możemy podać kilka wartości, oddzielonych od siebie jednym znakiem przecinka oraz ewentualnie przynajmniej jednym znakiem spacji, dzięki czemu za pośrednictwem danego elementu
input
będzie mógł zostać wybrany plik różnego określonego typu.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data"> <label> Wybierz plik: <input type="file" name="plik" accept=".html, .css, .js, image/*"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Akceptowalnym przez przeglądarkę internetową typem pliku, który może zostać wybrany przez użytkownika za pośrednictwem przykładowego elementu "input", jest plik typu HTML, plik typu CSS, plik typu JS oraz dowolny plik reprezentujący obrazek, ponieważ do wspomnianego elementu "input" został dodany atrybut "accept" wraz z następującą kombinacją wartości ".html, .css, .js, image/*".
alt
Przeznaczenie atrybutu alt
Atrybut alt
wykorzystany wraz z elementem input
pozwala nam określić treść alternatywną (zamienną) w postaci tekstu, który powinien pojawić się w miejsce obrazka reprezentowanego przez dany element input
, w sytuacji gdy z jakiegoś powodu docelowy obrazek nie będzie mógł zostać obsłużony przez przeglądarkę internetową.
Atrybut "alt" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość image.
Atrybut "alt" jest atrybutem wymaganym elementu "input", lecz tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość image.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu alt
- tekst
-
Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas treści alternatywnej w postaci tekstu.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="image" src="https://webkod.pl/files/html/przycisk-1.png" alt="zatwierdź"> </form> </body> </html>
Rezultat
Treścią alternatywną nieistniejącego obrazka "przycisk-1.png" reprezentowanego przez przykładowy element "input" posiadający atrybut "type" o wartości "image" jest treść alternatywna w postaci tekstu "zatwierdź", ponieważ do wspomnianego elementu "input" został dodany atrybut "alt" wraz z wartością "zatwierdź".
autocomplete
Przeznaczenie atrybutu autocomplete
Atrybut autocomplete
wykorzystany wraz z elementem input
pozwala nam określić czy w momencie wprowadzania wartości do danego elementu input
(przez użytkownika) mechanizm automatycznych podpowiedzi powinien być włączony, czy też nie.
Atrybut "autocomplete" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: color, date, datetime-local, email, month, number, password, range, search, tel, text, time, url lub week.
Atrybut "autocomplete" elementu "input" ma pierwszeństwo przed atrybutem autocomplete elementu form, z którym został powiązany dany element "input", jeżeli takie powiązanie istnieje.
- Wartość domyślna
-
on (w każdej sytuacji)
Wartości atrybutu autocomplete
- on
-
Wartość
on
oznacza, że mechanizm automatycznych podpowiedzi ma być włączony.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie" autocomplete="on"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
W momencie wprowadzania wartości do przykładowego elementu "input" (przez użytkownika) mechanizm automatycznych podpowiedzi jest włączony, ponieważ do wspomnianego elementu "input" został dodany atrybut "autocomplete" wraz z wartością "on".
- off
-
Wartość
off
oznacza, że mechanizm automatycznych podpowiedzi ma być wyłączony.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie" autocomplete="off"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
W momencie wprowadzania wartości do przykładowego elementu "input" (przez użytkownika) mechanizm automatycznych podpowiedzi jest wyłączony, ponieważ do wspomnianego elementu "input" został dodany atrybut "autocomplete" wraz z wartością "off".
autofocus
Przeznaczenie atrybutu autofocus
Atrybut autofocus
wykorzystany wraz z elementem input
pozwala nam określić czy dany element input
powinien być traktowany przez przeglądarkę internetową jako element HTML, na którym w pierwszej kolejności powinien skupić się użytkownik.
Atrybut "autofocus" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość inna niż wartość hidden.
Maksymalnie tylko jeden element HTML znajdujący się w zawartości tego samego dokumentu HTML może posiadać atrybut "autofocus".
- Wartość domyślna
-
BRAK
(gdy pominęliśmy atrybut)wartość pusta
(gdy nie podaliśmy wartości)
Wartości atrybutu autofocus
- autofocus
-
Atrybut
autofocus
jest atrybutem logicznym elementuinput
.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <p> <label> Podaj imię: <input type="text" name="imie" autofocus> </label> </p> <p> <label> Podaj kolor: <input type="text" name="kolor"> </label> </p> <p> <button type="submit">zatwierdź</button> </p> </form> </body> </html>
Rezultat
Zobacz rezultat: przykład atrybutu autofocus - element input
Przykładowy element "input" posiadający atrybut "name" o wartości "imie" jest aktywny, gdyż przykładowy element "input" jest traktowany przez przeglądarkę internetową jako element HTML, na którym w pierwszej kolejności powinien skupić się użytkownik, ponieważ do wspomnianego elementu "input" został dodany atrybut "autofocus".
checked
Przeznaczenie atrybutu checked
Atrybut checked
wykorzystany wraz z elementem input
pozwala nam określić czy pole wyboru reprezentowane przez dany element input
domyślnie powinno być wybranym polem wyboru w grupie pól wyboru, do której należy dany element input
.
Atrybut "checked" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: checkbox lub radio.
- Wartość domyślna
-
BRAK
(gdy pominęliśmy atrybut)wartość pusta
(gdy nie podaliśmy wartości)
Wartości atrybutu checked
- checked
-
Atrybut
checked
jest atrybutem logicznym elementuinput
.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <fieldset> <legend>Płeć</legend> <p> <label> <input type="radio" name="plec" value="mezczyzna" checked> Mężczyzna </label> </p> <p> <label> <input type="radio" name="plec" value="kobieta"> Kobieta </label> </p> </fieldset> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
W grupie pól wyboru typu "radio" o nazwie "plec" domyślnie wybranym polem wyboru jest pole wyboru reprezentowane przez przykładowy element "input" posiadający atrybut "value" o wartości "mezczyzna", ponieważ do wspomnianego elementu "input" został dodany atrybut "checked".
dirname
Przeznaczenie atrybutu dirname
Atrybut dirname
wykorzystany wraz z elementem input
pozwala nam określić dodatkową nazwę, jaka powinna zostać przypisana do danego elementu input
oraz jaką powinna posiadać dodatkowa dana reprezentowana przez dany element input
, czyli dana przechowująca informację o kierunku tekstu, jaki posiada dany element input
.
Informacja w postaci wartości ltr
przechowywana przez daną oznacza kierunek od lewej do prawej, natomiast informacja w postaci wartości rtl
przechowywana przez daną oznacza kierunek od prawej do lewej.
Ponadto docelowa dana może zostać wykorzystana przez jeden z mechanizmów przeglądarki internetowej podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany element input
.
Atrybut "dirname" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: search lub text.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu dirname
- dodatkowa nazwa
-
Należy podać niepusty ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas dodatkowej nazwy.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie" dirname="kierunek"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Dodatkową nazwą, jaka została przypisana do przykładowego elementu "input", jest nazwa "kierunek", dlatego dodatkowa dana reprezentowana przez przykładowy element "input" będzie posiadała nazwę "kierunek", ponieważ do wspomnianego elementu "input" został dodany atrybut "dirname" wraz z wartością "kierunek".
disabled
Przeznaczenie atrybutu disabled
Atrybut disabled
wykorzystany wraz z elementem input
pozwala nam określić czy dany element input
powinien zostać wyłączony z interakcji z użytkownikiem.
Dana reprezentowana przez element "input", który jest wyłączony z interakcji z użytkownikiem, nie jest brana pod uwagę przez jeden z mechanizmów przeglądarki internetowej podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany wspomniany wyłączony z interakcji element "input".
- Wartość domyślna
-
BRAK
(gdy pominęliśmy atrybut)wartość pusta
(gdy nie podaliśmy wartości)
Wartości atrybutu disabled
- disabled
-
Atrybut
disabled
jest atrybutem logicznym elementuinput
.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <p> <label> Podaj imię: <input type="text" name="imie"> </label> </p> <p> <label> Podaj kod dostępu: <input type="text" name="kod" value="opcja wyłączona" disabled> </label> </p> <p> <button type="submit">zatwierdź</button> <p> </form> </body> </html>
Rezultat
Przykładowy element "input" posiadający atrybut "name" o wartości "kod" został wyłączony z interakcji z użytkownikiem, ponieważ do wspomnianego elementu "input" został dodany atrybut "disabled".
form
Przeznaczenie atrybutu form
Atrybut form
wykorzystany wraz z elementem input
pozwala nam określić informację o tym, z którym elementem form powinien zostać powiązany dany element input
.
Domyślnie element "input" jest powiązany z najbliższym elementem przodkiem będącym elementem form, jeżeli taki istnieje.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu form
- form id
-
Należy podać wartość atrybutu id interesującego nas elementu form.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php" id="formularz-1"> <label> Podaj imię: <input type="text" name="imie"> </label> <button type="submit">zatwierdź</button> </form> <label> Podaj kolor: <input type="text" name="kolor" form="formularz-1"> </label> </body> </html>
Rezultat
Przykładowy element "input" posiadający atrybut "name" o wartości "kolor" został powiązany z elementem "form" posiadającym atrybut "id" o wartości "formularz-1", ponieważ do wspomnianego elementu "input" został dodany atrybut "form" wraz z wartością "formularz-1".
formaction
Przeznaczenie atrybutu formaction
Atrybut formaction
wykorzystany wraz z elementem input
pozwala nam określić adres zasobu internetowego, do którego powinny zostać przekazane dane formularza HTML podczas procesu, który następuje po zatwierdzeniu formularza HTML (za pomocą danego elementu input
) przez użytkownika.
Atrybut "formaction" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: image lub submit.
Atrybut "formaction" ma pierwszeństwo przed atrybutem action elementu form, z którym został powiązany dany element "input".
- Wartość domyślna
-
BRAK
(gdy pominęliśmy atrybut)adres dokumentu HTML, w którego zawartości znajduje się dany element
input
(gdy nie podaliśmy wartości)
Wartości atrybutu formaction
- URL
-
Należy podać niepusty ciąg znaków w formie adresu URL.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="submit" formaction="https://webkod.pl/php/submit-result.php" value="zatwierdź"> </form> </body> </html>
Rezultat
W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML reprezentowanego przez element "form" zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php" znajdującego się pod adresem "https://webkod.pl/php/submit-result.php", ponieważ do wspomnianego elementu "input" został dodany atrybut "formaction" wraz z wartością "https://webkod.pl/php/submit-result.php".
formenctype
Przeznaczenie atrybutu formenctype
Atrybut formenctype
wykorzystany wraz z elementem input
pozwala nam określić informację o tym, jaki sposób kodowania danych powinien być właściwy dla danych formularza HTML podczas procesu, który następuje po zatwierdzeniu formularza HTML (za pomocą danego elementu input
) przez użytkownika.
Atrybut "formenctype" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: image lub submit.
Atrybut "formenctype" ma pierwszeństwo przed atrybutem enctype elementu form, z którym został powiązany dany element "input".
- Wartość domyślna
-
BRAK
(gdy pominęliśmy atrybut)application/x-www-form-urlencoded (gdy podaliśmy wartość nieprawidłową)
Wartości atrybutu formenctype
- application/x-www-form-urlencoded
-
Wartość
application/x-www-form-urlencoded
oznacza sposób kodowania danych, który jest właściwy dla danych formularza HTML, z którym nie został powiązany żaden element HTML, za pośrednictwem którego użytkownik może wybrać plik.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="submit" formenctype="application/x-www-form-urlencoded" value="zatwierdź"> </form> </body> </html>
Rezultat
W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML reprezentowanego przez element "form" zostaną zakodowane przez przeglądarkę internetową za pomocą sposobu "application/x-www-form-urlencoded", ponieważ do wspomnianego elementu "input" został dodany atrybut "formenctype" wraz z wartością "application/x-www-form-urlencoded".
- multipart/form-data
-
Wartość
multipart/form-data
oznacza sposób kodowania danych, który jest właściwy dla danych formularza HTML, z którym został powiązany przynajmniej jeden element HTML, za pośrednictwem którego użytkownik może wybrać plik.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php" method="post"> <label> Wybierz plik: <input type="file" name="plik"> </label> <input type="submit" formenctype="multipart/form-data" value="zatwierdź"> </form> </body> </html>
Rezultat
W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML reprezentowanego przez element "form" zostaną zakodowane przez przeglądarkę internetową za pomocą sposobu "multipart/form-data", ponieważ do wspomnianego elementu "input" został dodany atrybut "formenctype" wraz z wartością "multipart/form-data".
- text/plain
-
Wartość
text/plain
oznacza, że dane uzyskane przez przeglądarkę internetową za pośrednictwem formularza HTML, który został zatwierdzony przez użytkownika za pomocą danego elementuinput
, nie zostaną poddane żadnemu specyficznemu sposobowi kodowania.
formmethod
Przeznaczenie atrybutu formmethod
Atrybut formmethod
wykorzystany wraz z elementem input
pozwala nam określić informację o tym, jaka metoda przekazania danych formularza HTML powinna być właściwa podczas procesu, który następuje po zatwierdzeniu formularza HTML (za pomocą danego elementu input
) przez użytkownika.
Atrybut "formmethod" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: image lub submit.
Atrybut "formmethod" ma pierwszeństwo przed atrybutem method elementu form, z którym został powiązany dany element "input".
- Wartość domyślna
-
BRAK
(gdy pominęliśmy atrybut)get (gdy podaliśmy wartość nieprawidłową)
Wartości atrybutu formmethod
- get
-
Wartość
get
oznacza, że dane uzyskane przez przeglądarkę internetową za pośrednictwem formularza HTML, który został zatwierdzony przez użytkownika za pomocą danego elementuinput
, zostaną przekazane do określonego zasobu internetowego za pomocą metody GET.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="submit" formmethod="get" value="zatwierdź"> </form> </body> </html>
Rezultat
W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML reprezentowanego przez element "form" zostaną przekazane przez przeglądarkę internetową, do zasobu internetowego "submit-result.php" znajdującego się pod adresem "https://webkod.pl/php/submit-result.php", za pomocą metody GET, ponieważ do wspomnianego elementu "input" został dodany atrybut "formmethod" wraz z wartością "get".
- post
-
Wartość
post
oznacza, że dane uzyskane przez przeglądarkę internetową za pośrednictwem formularza HTML, który został zatwierdzony przez użytkownika za pomocą danego elementuinput
, zostaną przekazane do określonego zasobu internetowego za pomocą metody POST.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="submit" formmethod="post" value="zatwierdź"> </form> </body> </html>
Rezultat
W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML reprezentowanego przez element "form" zostaną przekazane przez przeglądarkę internetową, do zasobu internetowego "submit-result.php" znajdującego się pod adresem "https://webkod.pl/php/submit-result.php", za pomocą metody POST, ponieważ do wspomnianego elementu "input" został dodany atrybut "formmethod" wraz z wartością "post".
formnovalidate
Przeznaczenie atrybutu formnovalidate
Atrybut formnovalidate
wykorzystany wraz z elementem input
pozwala nam określić czy mechanizm przeglądarki internetowej odpowiedzialny za ustaloną przez nas walidację wartości danych formularza HTML powinien pozostać nieaktywny w momencie próby zatwierdzenia formularza HTML (za pomocą danego elementu input
) przez użytkownika.
Atrybut "formnovalidate" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: image lub submit.
Atrybut "formnovalidate" ma pierwszeństwo przed atrybutem novalidate elementu form, z którym został powiązany dany element "input".
- Wartość domyślna
-
BRAK
(gdy pominęliśmy atrybut)wartość pusta
(gdy nie podaliśmy wartości)
Wartości atrybutu formnovalidate
- formnovalidate
-
Atrybut
formnovalidate
jest atrybutem logicznym elementuinput
.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj czterocyfrową liczbę: <input type="text" name="liczba" pattern="[0-9]{4}" required> </label> <input type="submit" value="zatwierdź" formnovalidate> </form> </body> </html>
Rezultat
Mimo tego, że pierwszy przykładowy element "input", który został powiązany z formularzem HTML reprezentowanym przez element "form", posiada atrybut "pattern" oraz atrybut "required", dana reprezentowana przez pierwszy przykładowy element "input" może posiadać dowolną wartość w momencie próby zatwierdzenia formularza HTML przez użytkownika, za pomocą drugiego przykładowego elementu "input", gdyż mechanizm przeglądarki internetowej odpowiedzialny za ustaloną przez nas walidację wartości danych formularza HTML jest nieaktywny, ponieważ do wspomnianego drugiego elementu "input" został dodany atrybut "formnovalidate".
formtarget
Przeznaczenie atrybutu formtarget
Atrybut formtarget
wykorzystany wraz z elementem input
pozwala nam określić docelowy kontekst (miejsce), gdzie powinien zostać wczytany zasób internetowy, którego adres określa wartość atrybutu formaction danego elementu input
lub którego adres określa wartość atrybutu action formularza HTML, z którym został powiązany dany element input
.
Docelowe wczytanie się zasobu internetowego nastąpi w momencie gdy formularz HTML, z którym został powiązany dany element input
, zostanie zatwierdzony przez użytkownika za pomocą danego elementu input
.
Atrybut "formtarget" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: image lub submit.
Atrybut "formtarget" ma pierwszeństwo przed atrybutem target elementu form, z którym został powiązany dany element "input".
- Wartość domyślna
-
BRAK
(gdy pominęliśmy atrybut)_blank (gdy podaliśmy wartość nieprawidłową)
Wartości atrybutu formtarget
- _blank
-
Wartość
_blank
wskazuje na nowy kontekst przeglądarki internetowej, na nowe miejsce, np. na nowe okno przeglądarki internetowej (nową zakładkę).Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="submit" formtarget="_blank" value="zatwierdź"> </form> </body> </html>
Rezultat
W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do nowego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formtarget" wraz z wartością "_blank".
- _parent
-
Wartość
_parent
wskazuje na kontekst rodzica kontekstu przeglądarki internetowej, do którego należy dany elementinput
.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <iframe src="https://webkod.pl/files/html/input-formtarget-parent.html"></iframe> <!-- KOD ŹRÓDŁOWY PLIKU: input-formtarget-parent.html >>>> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Atrybut formtarget - wartość _parent</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="submit" formtarget="_parent" value="zatwierdź"> </form> </body> </html> --> </body> </html>
Rezultat
Kontekstem przeglądarki internetowej, do którego należy przykładowy element "input" posiadający atrybut "type" o wartości "submit", jest element "iframe", którego kontekstem rodzicem w tym wypadku jest aktualne okno przeglądarki internetowej, dlatego w momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do aktualnego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formtarget" wraz z wartością "_parent".
Jeżeli kontekst przeglądarki internetowej, do którego należy dany element "input", nie posiada kontekstu rodzica, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _self.
- _self
-
Wartość
_self
wskazuje na kontekst przeglądarki internetowej, do którego należy dany elementinput
, np. na aktualne okno przeglądarki internetowej (aktualną zakładkę) lub na aktualny element iframe.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <iframe src="https://webkod.pl/files/html/input-formtarget-self.html"></iframe> <!-- KOD ŹRÓDŁOWY PLIKU: input-formtarget-self.html >>>> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Atrybut formtarget - wartość _self</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="submit" formtarget="_self" value="zatwierdź"> </form> </body> </html> --> </body> </html>
Rezultat
Kontekstem przeglądarki internetowej, do którego należy przykładowy element "input" posiadający atrybut "type" o wartości "submit", jest element "iframe", dlatego w momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do elementu "iframe", ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formtarget" wraz z wartością "_self".
- _top
-
Wartość
_top
wskazuje na kontekst najdalszego przodka kontekstu przeglądarki internetowej, do którego należy dany elementinput
.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <iframe src="https://webkod.pl/files/html/input-formtarget-top.html"></iframe> <!-- KOD ŹRÓDŁOWY PLIKU: input-formtarget-top.html >>>> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Atrybut formtarget - wartość _top</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="submit" formtarget="_top" value="zatwierdź"> </form> </body> </html> --> </body> </html>
Rezultat
Kontekstem przeglądarki internetowej, do którego należy przykładowy element "input" posiadający atrybut "type" o wartości "submit", jest element "iframe", którego najdalszym kontekstem przodkiem w tym wypadku jest aktualne okno przeglądarki internetowej, dlatego w momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do aktualnego okna przeglądarki internetowej, ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formtarget" wraz z wartością "_top".
Jeżeli kontekst przeglądarki internetowej, do którego należy dany element "input", nie posiada kontekstu najdalszego przodka, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _self.
- iframe name
-
Należy podać wartość atrybutu name interesującego nas elementu iframe, dzięki czemu interesujący nas element iframe stanie się docelowym kontekstem.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <iframe name="ramka-1"></iframe> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="submit" formtarget="ramka-1" value="zatwierdź"> </form> </body> </html>
Rezultat
W momencie gdy formularz HTML reprezentujący dane zostanie zatwierdzony przez użytkownika za pomocą przykładowego elementu "input" posiadającego atrybut "type" o wartości "submit", dane formularza HTML zostaną przekazane przez przeglądarkę internetową do zasobu internetowego "submit-result.php", który następnie zostanie wczytany do elementu "iframe" posiadającego atrybut "name" o wartości "ramka-1", ponieważ do wspomnianego elementu "input", który został powiązany ze wspomnianym formularzem HTML reprezentowanym przez element "form", został dodany atrybut "formtarget" wraz z wartością "ramka-1".
Jeżeli w kontekście przeglądarki internetowej, do którego należy dany element "input" lub w kontekście rodzicu lub w kontekście przodku, nie znajduje się element iframe o wartości atrybutu name, którą podaliśmy, wtedy docelowym kontekstem jest ten kontekst, który określa wartość _blank.
Możemy podać również wartość atrybutu name interesującego nas elementu object, lecz tylko wtedy gdy interesujący nas element object reprezentuje zasób internetowy pochodzący z technologii HTML.
height
Przeznaczenie atrybutu height
Atrybut height
wykorzystany wraz z elementem input
pozwala nam określić wartość wysokości, jaką powinien posiadać dany element input
.
Atrybut "height" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość image.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu height
- liczba
-
Należy podać nieujemną liczbę całkowitą.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="image" src="https://webkod.pl/files/html/przycisk-01.png" height="30" alt="zatwierdź"> </form> </body> </html>
Rezultat
Wartość wysokości przykładowego elementu "input" posiadającego atrybut "type" o wartości "image" wynosi "30" pikseli, ponieważ do wspomnianego elementu "input" został dodany atrybut "height" wraz z wartością "30".
list
Przeznaczenie atrybutu list
Atrybut list
wykorzystany wraz z elementem input
pozwala nam określić informację o tym, z którą predefiniowaną listą opcji wyboru reprezentowaną przez element datalist powinien zostać powiązany dany element input
.
Atrybut "list" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: color, date, datetime-local, email, month, number, range, search, tel, text, time, url lub week.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu list
- datalist id
-
Należy podać wartość atrybutu id interesującego nas elementu datalist.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj rodzaj muzyki: <input type="text" name="rodzaj-muzyki" list="lista-1"> </label> <datalist id="lista-1"> <option>rock</option> <option>pop</option> <option>techno</option> <option>trance</option> <option>classical</option> </datalist> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" został powiązany z predefiniowaną listą opcji wyboru reprezentowaną przez element "datalist" posiadający atrybut "id" o wartości "lista-1", ponieważ do wspomnianego elementu "input" został dodany atrybut "list" wraz z wartością "lista-1".
max
Przeznaczenie atrybutu max
Atrybut max
wykorzystany wraz z elementem input
pozwala nam określić maksymalną wartość, jaka może zostać przypisana do danego elementu input
oraz jaką może posiadać dana reprezentowana przez dany element input
.
Atrybut "max" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: date, datetime-local, month, number, range, time lub week.
Wartości atrybutu max
- ciąg znaków
-
Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas wartości.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Wybierz liczbę z zakresu od jeden do dziesięć: <input type="number" name="liczba" min="1" max="10" value="5"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Maksymalną wartością, jaka może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", jest wartość "10", ponieważ do wspomnianego elementu "input" został dodany atrybut "max" wraz z wartością "10".
Gdy dany element "input" posiada atrybut type o wartości week, o wartości month lub o wartości date, wtedy wartością atrybutu "max" danego elementu "input" musi być ciąg znaków w formie odpowiedniego zapisu daty (Standard ISO-8601).
Gdy dany element "input" posiada atrybut type o wartości time, wtedy wartością atrybutu "max" danego elementu "input" musi być ciąg znaków w formie zapisu czasu (Standard ISO-8601).
Gdy dany element "input" posiada atrybut type o wartości datetime-local, wtedy wartością atrybutu "max" danego elementu "input" musi być ciąg znaków w formie zapisu daty oraz czasu (Standard ISO-8601).
Gdy dany element "input" posiada atrybut type o wartości number lub o wartości range, wtedy wartością atrybutu "max" danego elementu "input" musi być ciąg znaków w formie liczby dziesiętnej lub w formie liczby całkowitej.
maxlength
Przeznaczenie atrybutu maxlength
Atrybut maxlength
wykorzystany wraz z elementem input
pozwala nam określić maksymalną liczbę znaków, z jakich może składać się wartość, która może zostać przypisana do danego elementu input
oraz którą może posiadać dana reprezentowana przez dany element input
.
Atrybut "maxlength" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: email, password, search, tel, text lub url.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu maxlength
- liczba
-
Należy podać nieujemną liczbę całkowitą.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj dowolny maksymalnie składający się z dziesięciu znaków ciąg znaków: <input type="text" name="ciag-znakow" maxlength="10"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", maksymalnie może składać się z dziesięciu znaków, ponieważ do wspomnianego elementu "input" został dodany atrybut "maxlength" wraz z wartością "10".
Docelowa wartość nie może być mniejsza niż wartość atrybutu minlength danego elementu "input".
min
Przeznaczenie atrybutu min
Atrybut min
wykorzystany wraz z elementem input
pozwala nam określić minimalną wartość, jaka może zostać przypisana do danego elementu input
oraz jaką może posiadać dana reprezentowana przez dany element input
.
Atrybut "min" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: date, datetime-local, month, number, range, time lub week.
Wartości atrybutu min
- ciąg znaków
-
Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas wartości.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Wybierz liczbę z zakresu od jeden do dziesięć: <input type="number" name="liczba" min="1" max="10" value="5"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Minimalną wartością, jaka może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", jest wartość "1", ponieważ do wspomnianego elementu "input" został dodany atrybut "min" wraz z wartością "1".
Gdy dany element "input" posiada atrybut type o wartości week, o wartości month lub o wartości date, wtedy wartością atrybutu "min" danego elementu "input" musi być ciąg znaków w formie odpowiedniego zapisu daty (Standard ISO-8601).
Gdy dany element "input" posiada atrybut type o wartości time, wtedy wartością atrybutu "min" danego elementu "input" musi być ciąg znaków w formie zapisu czasu (Standard ISO-8601).
Gdy dany element "input" posiada atrybut type o wartości datetime-local, wtedy wartością atrybutu "min" danego elementu "input" musi być ciąg znaków w formie zapisu daty oraz czasu (Standard ISO-8601).
Gdy dany element "input" posiada atrybut type o wartości number lub o wartości range, wtedy wartością atrybutu "min" danego elementu "input" musi być ciąg znaków w formie liczby dziesiętnej lub w formie liczby całkowitej.
minlength
Przeznaczenie atrybutu minlength
Atrybut minlength
wykorzystany wraz z elementem input
pozwala nam określić minimalną liczbę znaków, z jakich powinna składać się wartość, która może zostać przypisana do danego elementu input
oraz którą może posiadać dana reprezentowana przez dany element input
.
Mowa tu o wartości, która nie jest wartością pustą w momencie próby zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany element input
.
Atrybut "minlength" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: email, password, search, tel, text lub url.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu minlength
- liczba
-
Należy podać nieujemną liczbę całkowitą.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj dowolny minimum składający się z pięciu znaków ciąg znaków: <input type="text" name="ciag-znakow" minlength="5"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
W sytuacji gdy wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", nie będzie wartością pustą, w momencie próby zatwierdzenia formularza HTML przez użytkownika, wtedy wspomniana wartość musi składać się przynajmniej z pięciu znaków, ponieważ do wspomnianego elementu "input", który został powiązany z formularzem HTML reprezentowanym przez element "form", został dodany atrybut "minlength" wraz z wartością "5".
Docelowa wartość nie może być większa niż wartość atrybutu maxlength danego elementu "input".
multiple
Przeznaczenie atrybutu multiple
Atrybut multiple
wykorzystany wraz z elementem input
pozwala nam określić czy wartość, jaka może zostać przypisana do danego elementu input
oraz jaką może posiadać dana reprezentowana przez dany element input
, może posiadać kilka osobnych wartości tego samego typu jednocześnie.
Atrybut "multiple" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: email lub file.
- Wartość domyślna
-
BRAK
(gdy pominęliśmy atrybut)wartość pusta
(gdy nie podaliśmy wartości)
Wartości atrybutu multiple
- multiple
-
Atrybut
multiple
jest atrybutem logicznym elementuinput
.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data"> <label> Wybierz pliki: <input type="file" name="pliki[]" multiple> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Za pośrednictwem przykładowego elementu "input" użytkownik może wybrać więcej niż jeden plik, ponieważ do wspomnianego elementu "input" został dodany atrybut "multiple" (wymagane przytrzymanie przycisku "LEWY ALT" lub przycisku "LEWY CTRL" podczas wyboru kolejnego pliku).
name
Przeznaczenie atrybutu name
Atrybut name
wykorzystany wraz z elementem input
pozwala nam określić nazwę, jaka powinna zostać przypisana do danego elementu input
oraz jaką powinna posiadać dana reprezentowana przez dany element input
.
Docelowa nazwa między innymi może zostać wykorzystana przez jeden z mechanizmów przeglądarki internetowej podczas procesu, który następuje po zatwierdzeniu formularza HTML (za pomocą danego elementu input
) przez użytkownika.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu name
- nazwa
-
Należy podać niepusty ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwy.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Nazwą, jaka została przypisana do przykładowego elementu "input", jest nazwa "imie", dlatego dana reprezentowana przez przykładowy element "input" będzie posiadała nazwę "imie", ponieważ do wspomnianego elementu "input" został dodany atrybut "name" wraz z wartością "imie".
- _charset_
-
Wartość
_charset_
oznacza, że podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany elementinput
, wartość posiadana przez daną, którą reprezentuje dany elementinput
, będzie wartością wskazującą na system kodowania znaków, jaki został wykorzystany przez przeglądarkę internetową podczas docelowego procesu.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="hidden" name="_charset_"> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Nazwą, jaka została przypisana do przykładowego elementu "input" posiadającego atrybut "type" o wartości "hidden", jest nazwa "_charset_", dlatego dana reprezentowana przez przykładowy element "input" będzie posiadała nazwę "_charset_", ponieważ do wspomnianego elementu "input" został dodany atrybut "name" wraz z wartością "_charset_".
Wartość "_charset_" ma sens tylko wtedy gdy dany element "input" posiada atrybut type o wartości hidden oraz nie posiada atrybutu value.
pattern
Przeznaczenie atrybutu pattern
Atrybut pattern
wykorzystany wraz z elementem input
pozwala nam określić wzorzec dla wartości, jaka może zostać przypisana do danego elementu input
oraz jaką może posiadać dana reprezentowana przez dany element input
.
Mowa tu o wartości, która nie jest wartością pustą w momencie próby zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany element input
.
Atrybut "pattern" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: email, password, search, tel, text lub url.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu pattern
- RegExp
-
Należy podać ciąg znaków w formie wyrażenia regularnego języka programowania JavaScript.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj czterocyfrową liczbę: <input type="text" name="liczba" pattern="[0-9]{4}"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
W sytuacji gdy wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", nie będzie wartością pustą, w momencie próby zatwierdzenia formularza HTML przez użytkownika, wtedy wspomniana wartość musi składać się dokładnie z czterech znaków mieszczących się w przedziale od "0" do "9", ponieważ do wspomnianego elementu "input", który został powiązany z formularzem HTML reprezentowanym przez element "form", został dodany atrybut "pattern" wraz z wartością "[0-9]{4}".
placeholder
Przeznaczenie atrybutu placeholder
Atrybut placeholder
wykorzystany wraz z elementem input
pozwala nam określić treść w postaci tekstu pełniącego rolę podpowiedzi dla użytkownika, jaka powinna pojawić się w widocznym obszarze danego elementu input
w momencie gdy wartość, która może zostać przypisana do danego elementu input
oraz którą może posiadać dana reprezentowana przez dany element input
, jest wartością pustą.
Atrybut "placeholder" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: email, number, password, search, tel, text lub url.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu placeholder
- tekst
-
Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującego nas tekstu.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj czterocyfrową liczbę: <input type="text" name="liczba" pattern="[0-9]{4}" placeholder="np. 1410" required> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
W momencie gdy wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", będzie wartością pustą, wtedy w widocznym obszarze przykładowego elementu "input" będzie widoczna treść w postaci ciągu znaków "np. 1410", ponieważ do wspomnianego elementu "input" został dodany atrybut "placeholder" wraz z wartością "np. 1410".
readonly
Przeznaczenie atrybutu readonly
Atrybut readonly
wykorzystany wraz z elementem input
pozwala nam określić czy wartość, jaka została przypisana do danego elementu input
oraz którą może posiadać dana reprezentowana przez dany element input
, powinna pełnić rolę wartości tylko do odczytu, czyli takiej wartości, która nie może zostać zmieniona przez użytkownika.
Atrybut "readonly" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: date, datetime-local, email, month, number, password, search, tel, text, time, url lub week.
- Wartość domyślna
-
BRAK
(gdy pominęliśmy atrybut)wartość pusta
(gdy nie podaliśmy wartości)
Wartości atrybutu readonly
- readonly
-
Atrybut
readonly
jest atrybutem logicznym elementuinput
.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <label> <input type="text" value="np. Jan" readonly> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Wartość, jaka została przypisana do przykładowego elementu "input" posiadającego atrybut "value" o wartości "np. Jan" oraz którą posiada dana reprezentowana przez przykładowy element "input" posiadający atrybut "value" o wartości "np. Jan", pełni rolę wartości tylko do odczytu, czyli takiej wartości, która nie może zostać zmieniona przez użytkownika, ponieważ do wspomnianego elementu "input" został dodany atrybut "readonly".
required
Przeznaczenie atrybutu required
Atrybut required
wykorzystany wraz z elementem input
pozwala nam określić czy wartość, jaka może zostać przypisana do danego elementu input
oraz którą może posiadać dana reprezentowana przez dany element input
, powinna posiadać cechy wartości wymaganej, czyli takiej wartości, która nie może być wartością pustą w momencie próby zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany element input
.
Atrybut "required" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: checkbox, date, datetime-local, email, file, month, number, password, radio, search, tel, text, time, url lub week.
- Wartość domyślna
-
BRAK
(gdy pominęliśmy atrybut)wartość pusta
(gdy nie podaliśmy wartości)
Wartości atrybutu required
- required
-
Atrybut
required
jest atrybutem logicznym elementuinput
.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie" required> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Wartość, jaka może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", jest wartością posiadającą cechy wartości wymaganej, ponieważ do wspomnianego elementu "input" został dodany atrybut "required".
size
Przeznaczenie atrybutu size
Atrybut size
wykorzystany wraz z elementem input
pozwala nam określić domyślną liczbę znaków, które mogą być widoczne w obszarze szerokości danego elementu input
.
Atrybut "size" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: email, password, search, tel, text lub url.
- Wartość domyślna
-
20
(w każdej sytuacji)
Wartości atrybutu size
- liczba
-
Należy podać liczbę całkowitą większą od zera.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj czterocyfrową liczbę: <input type="text" name="liczba" pattern="[0-9]{4}" size="4"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Domyślną liczbą znaków, które mogą być widoczne w obszarze szerokości przykładowego elementu "input", jest liczba "4", ponieważ do wspomnianego elementu "input" został dodany atrybut "size" wraz z wartością "4".
src
Przeznaczenie atrybutu src
Atrybut src
wykorzystany wraz z elementem input
pozwala nam określić adres obrazka, który chcemy, aby był reprezentowany przez dany element input
.
Atrybut "src" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość image.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu src
- URL
-
Należy podać niepusty ciąg znaków w formie adresu URL.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="image" src="https://webkod.pl/files/html/przycisk-01.png" height="30" alt="zatwierdź"> </form> </body> </html>
Rezultat
Obrazkiem reprezentowanym przez przykładowy element "input" posiadający atrybut "type" o wartości "image" jest obrazek "przycisk-01.png" znajdujący się pod adresem "https://webkod.pl/files/html/przycisk-01.png", ponieważ do wspomnianego elementu "input" został dodany atrybut "src" wraz z wartością "https://webkod.pl/files/html/przycisk-01.png".
step
Przeznaczenie atrybutu step
Atrybut step
wykorzystany wraz z elementem input
pozwala nam określić informację o tym, o jaki zakres może zmieniać się wartość, która może zostać przypisana do danego elementu input
oraz którą może posiadać dana reprezentowana przez dany element input
.
Atrybut "step" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość: date, datetime-local, month, number, range, time lub week.
- Wartość domyślna
-
1
(w każdej sytuacji), lecz tylko wtedy gdy dany elementinput
posiada atrybut type o wartości number lub o wartości range1
(w każdej sytuacji), lecz tylko wtedy gdy dany elementinput
posiada atrybut type o wartości date, o wartości week lub o wartości month, wartość1
w tym wypadku oznacza jeden dzień (dla wartości date), jeden tydzień (dla wartości week) oraz jeden miesiąc (dla wartości month)60
(w każdej sytuacji), lecz tylko wtedy gdy dany elementinput
posiada atrybut type o wartości time lub o wartości datetime-local, wartość60
w tym wypadku oznacza sześćdziesiąt sekund
Wartości atrybutu step
- liczba
-
Należy podać liczbę większą od zera.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Wybierz liczbę dziesiętną z zakresu od zera do jeden: <input type="number" name="liczba" min="0" max="1" step="0.1" value="0.5"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", podczas próby wyboru przez użytkownika może zmieniać się o zakres "0.1", ponieważ do wspomnianego elementu "input" został dodany atrybut "step" wraz z wartością "0.1".
Gdy dany element "input" posiada atrybut type o wartości week, o wartości month, o wartości date, o wartości time lub o wartości datetime-local, wtedy wartością atrybutu "step" danego elementu "input" musi być ciąg znaków w formie liczby całkowitej.
Gdy dany element "input" posiada atrybut type o wartości number lub o wartości range, wtedy wartością atrybutu "step" danego elementu "input" musi być ciąg znaków w formie liczby dziesiętnej lub w formie liczby całkowitej.
- any
-
Wartość
any
oznacza, że zakres, o jaki może zmieniać się wartość, która może zostać przypisana do danego elementuinput
oraz którą może posiadać dana reprezentowana przez dany elementinput
, jest dowolnym (zazwyczaj najmniejszym możliwym) zakresem określonym przez przeglądarkę internetową.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Wybierz liczbę z zakresu od zera do stu: <input type="number" name="liczba" min="0" max="100" step="any" value="50"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", podczas próby wyboru przez użytkownika może zmieniać się o dowolny określony przez przeglądarkę internetową zakres, ponieważ do wspomnianego elementu "input" został dodany atrybut "step" wraz z wartością "any".
title
Przeznaczenie atrybutu title
Atrybut title
wykorzystany wraz z elementem input
pozwala nam określić treść w postaci tekstu pełniącego rolę wiadomości dla użytkownika, jaka powinna zostać wyświetlona w oknie przeglądarki internetowej w sytuacji gdy wprowadzona do danego elementu input
wartość, przez użytkownika, nie zgadza się ze wzorcem, który został określony za pomocą wartości atrybutu pattern danego elementu input
.
Atrybut "title" ma sens tylko wtedy gdy dany element "input" posiada atrybut pattern.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu title
- tekst
-
Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującego nas tekstu.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj czterocyfrową liczbę: <input type="text" name="liczba" pattern="[0-9]{4}" title="wymaganym formatem jest czterocyfrowa liczba"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
W sytuacji gdy wartość, która może zostać przypisana do przykładowego elementu "input" oraz którą może posiadać dana reprezentowana przez przykładowy element "input", nie będzie wartością pustą w momencie próby zatwierdzenia formularza HTML przez użytkownika oraz nie będzie zgadzać się ze wzorcem wartości określonym przez wartość atrybutu "pattern" przykładowego elementu "input", wtedy dla użytkownika w oknie przeglądarki internetowej zostanie wyświetlona treść w postaci tekstu "wymaganym formatem jest czterocyfrowa liczba", ponieważ do wspomnianego elementu "input", który został powiązany z formularzem HTML reprezentowanym przez element "form", został dodany atrybut "title" wraz z wartością "wymaganym formatem jest czterocyfrowa liczba".
type
Przeznaczenie atrybutu type
Atrybut type
wykorzystany wraz z elementem input
pozwala nam określić informację o typie elementu formularza HTML, jaki powinien reprezentować dany element input
.
- Wartość domyślna
-
text (w każdej sytuacji)
Wartości atrybutu type
- button
-
Wartość
button
oznacza, że dany elementinput
reprezentuje klikalny przycisk, który domyślnie nie jest przeznaczony do żadnego konkretnego celu.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <input type="button" value="przycisk"> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "button", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "button".
- checkbox
-
Wartość
checkbox
oznacza, że dany elementinput
reprezentuje pole wyboru typucheckbox
, które może zostać zaznaczone przez użytkownika.W sytuacji gdy do jednej grupy pól wyboru należy kilka pól wyboru typu
checkbox
, wtedy kilka pól wyboru typucheckbox
może zostać zaznaczonych przez użytkownika.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Zgadzam się z zasadami regulaminu: <input type="checkbox" name="regulamin" value="true"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "checkbox", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "checkbox".
- color
-
Wartość
color
oznacza, że dany elementinput
reprezentuje paletę kolorów, z której użytkownik może wybrać interesujący go kolor.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Określ wartość koloru: <input type="color" name="kolor"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "color", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "color".
- date
-
Wartość
date
oznacza, że dany elementinput
reprezentuje kalendarz, z którego użytkownik może wybrać interesującą go datę (bez wskazania strefy czasowej).Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Określ datę: <input type="date" name="data"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "date", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "date".
- datetime-local
-
Wartość
datetime-local
oznacza, że dany elementinput
reprezentuje kalendarz, z którego użytkownik może wybrać interesującą go datę oraz interesujący go czas (bez wskazania strefy czasowej).Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Określ datę: <input type="datetime-local" name="data"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "datetime-local", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "datetime-local".
-
Wartość
email
oznacza, że dany elementinput
reprezentuje pole na wartość w formie adresu email.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj adres email: <input type="email" name="adres-email"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "email", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "email".
- file
-
Wartość
file
oznacza, że dany elementinput
reprezentuje element formularza HTML, za pośrednictwem którego użytkownik może wybrać interesujący go plik.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php" method="post" enctype="multipart/form-data"> <label> Wybierz plik: <input type="file" name="plik"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "file", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "file".
- hidden
-
Wartość
hidden
oznacza, że dany elementinput
reprezentuje ukryte pole na wartość.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="hidden" name="kod" value="289382732"> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" posiadający atrybut "name" o wartości "kod" reprezentuje element formularza HTML typu "hidden", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "hidden".
- image
-
Wartość
image
oznacza, że dany elementinput
reprezentuje przycisk w formie obrazka służący do zatwierdzenia formularza HTML.W sytuacji gdy formularz HTML zostanie zatwierdzony przez użytkownika za pomocą danego elementu
input
, wtedy do danych formularza HTML zostaną automatycznie dodane dwie dodatkowe dane. Docelowe dane będą posiadały informację o współrzędnych kliknięcia na obrazek reprezentowany przez dany elementinput
.Pierwsza z docelowych danych będzie posiadała nazwę
x
, natomiast druga z docelowych danych będzie posiadała nazwęy
, jednak jeżeli dany elementinput
posiada atrybut name, wtedy pierwsza z docelowych danych będzie posiadała nazwę składającą się z wartości atrybutu name danego elementuinput
oraz z ciągu znaków_x
, a druga z docelowych danych będzie posiadała nazwę składającą się z wartości atrybutu name danego elementuinput
oraz z ciągu znaków_y
.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="image" src="https://webkod.pl/files/html/przycisk-01.png" height="30" alt="zatwierdź"> </form> </body> </html>
Rezultat
Przykładowy element "input" posiadający atrybut "alt" o wartości "zatwierdź" reprezentuje element formularza HTML typu "image", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "image".
Wartość "image" ma sens tylko wtedy gdy dany element "input" został powiązany z jakimkolwiek istniejącym formularzem HTML.
- month
-
Wartość
month
oznacza, że dany elementinput
reprezentuje kalendarz, z którego użytkownik może wybrać dowolny miesiąc interesującego go roku (bez wskazania strefy czasowej).Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Określ miesiąc: <input type="month" name="miesiac"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "month", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "month".
- number
-
Wartość
number
oznacza, że dany elementinput
reprezentuje pole na wartość w formie liczby.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj dowolną liczbę: <input type="number" name="liczba"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "number", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "number".
- password
-
Wartość
password
oznacza, że dany elementinput
reprezentuje pole na wartość w formie dowolnego ciągu znaków, którego znaki podczas wprowadzania nie są widoczne dla wzroku użytkownika.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php" method="post"> <label> Podaj hasło: <input type="password" name="haslo"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "password", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "password".
- radio
-
Wartość
radio
oznacza, że dany elementinput
reprezentuje pole wyboru typuradio
, które może zostać zaznaczone przez użytkownika.W sytuacji gdy do jednej grupy pól wyboru należy kilka pól wyboru typu
radio
, wtedy wyłącznie jedno pole wyboru typuradio
może zostać zaznaczone przez użytkownika.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <fieldset> <legend>Płeć</legend> <p> <label> <input type="radio" name="plec" value="mezczyzna" checked> Mężczyzna </label> </p> <p> <label> <input type="radio" name="plec" value="kobieta"> Kobieta </label> </p> </fieldset> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" posiadający atrybut "value" o wartości "mezczyzna" reprezentuje element formularza HTML typu "radio", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "radio".
- range
-
Wartość
range
oznacza, że dany elementinput
reprezentuje pole na wartość, która może zostać wybrana przez użytkownika z określonego zakresu wartości za pomocą suwaka.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Wybierz liczbę: <input type="range" name="liczba"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "range", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "range".
- reset
-
Wartość
reset
oznacza, że dany elementinput
reprezentuje przycisk służący do zresetowania do wartości domyślnych wartości posiadanych przez dane reprezentowane przez poszczególne elementy HTML formularza HTML.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <p> <label> Podaj imię: <input type="text" name="imie"> </label> </p> <p> <label> Podaj kolor: <input type="text" name="kolor"> </label> </p> <p> <input type="reset" value="zresetuj"> <input type="submit" value="zatwierdź"> </p> </form> </body> </html>
Rezultat
Przykładowy element "input" posiadający atrybut "value" o wartości "zresetuj" reprezentuje element formularza HTML typu "reset", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "reset".
Wartość "reset" ma sens tylko wtedy gdy dany element "input" został powiązany z jakimkolwiek istniejącym formularzem HTML.
- search
-
Wartość
search
oznacza, że dany elementinput
reprezentuje pole na wartość w formie dowolnego ciągu znaków, który jest szukanym ciągiem znaków przez użytkownika.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Szukaj: <input type="search" name="szukany-ciag-znakow"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "search", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "search".
- submit
-
Wartość
submit
oznacza, że dany elementinput
reprezentuje przycisk służący do zatwierdzenia formularza HTML.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <p> <label> Podaj imię: <input type="text" name="imie"> </label> </p> <p> <label> Podaj kolor: <input type="text" name="kolor"> </label> </p> <p> <input type="reset" value="zresetuj"> <input type="submit" value="zatwierdź"> </p> </form> </body> </html>
Rezultat
Przykładowy element "input" posiadający atrybut "value" o wartości "zatwierdź" reprezentuje element formularza HTML typu "submit", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "submit".
Wartość "submit" ma sens tylko wtedy gdy dany element "input" został powiązany z jakimkolwiek istniejącym formularzem HTML.
- tel
-
Wartość
tel
oznacza, że dany elementinput
reprezentuje pole na wartość w formie numeru telefonu.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj numer telefonu: <input type="tel" name="numer-telefonu"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "tel", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "tel".
- text
-
Wartość
text
oznacza, że dany elementinput
reprezentuje pole na wartość w formie dowolnego ciągu znaków.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj dowolny ciąg znaków: <input type="text" name="ciag-znakow"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "text", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "text".
- time
-
Wartość
time
oznacza, że dany elementinput
reprezentuje pole na wartość w formie czasu (bez wskazania strefy czasowej).Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Określ czas: <input type="time" name="czas"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "time", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "time".
- url
-
Wartość
url
oznacza, że dany elementinput
reprezentuje pole na wartość w formie pełnego adresu URL.Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj adres URL: <input type="url" name="adres-url"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "url", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "url".
- week
-
Wartość
week
oznacza, że dany elementinput
reprezentuje kalendarz, z którego użytkownik może wybrać dowolny tydzień interesującego go roku (bez wskazania strefy czasowej).Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Określ tydzień: <input type="week" name="tydzien"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Przykładowy element "input" reprezentuje element formularza HTML typu "week", ponieważ do wspomnianego elementu "input" został dodany atrybut "type" wraz z wartością "week".
value
Przeznaczenie atrybutu value
Atrybut value
wykorzystany wraz z elementem input
pozwala nam określić wartość domyślną, jaka powinna zostać przypisana do danego elementu input
oraz jaką domyślnie powinna posiadać dana reprezentowana przez dany element input
.
Docelowa wartość domyślna między innymi może zostać wykorzystana przez jeden z mechanizmów przeglądarki internetowej podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany element input
.
Gdy dany element "input" posiada atrybut type o wartości submit, wtedy docelowa wartość domyślna jest brana pod uwagę przez przeglądarkę internetową podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, lecz tylko wtedy gdy formularz HTML został zatwierdzony za pomocą danego elementu "input".
Gdy dany element "input" posiada atrybut type o wartości button, o wartości image lub o wartości reset, wtedy docelowa wartość domyślna nie jest brana pod uwagę przez przeglądarkę internetową podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika.
Atrybut "value" jest atrybutem wymaganym elementu "input", lecz tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość button.
- Wartość domyślna
-
wartość pusta
(gdy pominęliśmy atrybut)wartość pusta
(gdy nie podaliśmy wartości)
Wartości atrybutu value
- ciąg znaków
-
Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas wartości domyślnej.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie" value="Jan"> </label> <button type="submit">zatwierdź</button> </form> </body> </html>
Rezultat
Wartością domyślną, jaka została przypisana do przykładowego elementu "input", jest wartość "Jan", dlatego dana o nazwie "imie", która jest reprezentowana przez przykładowy element "input", domyślnie będzie posiadała wartość "Jan", ponieważ do wspomnianego elementu "input" został dodany atrybut "value" wraz z wartością "Jan".
Forma docelowej wartości domyślnej uzależniona jest od posiadanej przez dany element "input" wartości atrybutu type.
width
Przeznaczenie atrybutu width
Atrybut width
wykorzystany wraz z elementem input
pozwala nam określić wartość szerokości, jaką powinien posiadać dany element input
.
Atrybut "width" ma sens tylko wtedy gdy wartością atrybutu type danego elementu "input" jest wartość image.
- Wartość domyślna
-
brak wartości domyślnej
Wartości atrybutu width
- liczba
-
Należy podać nieujemną liczbę całkowitą.
Przykładowy Kod HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Darmowy Kurs HTML</title> </head> <body> <form action="https://webkod.pl/php/submit-result.php"> <label> Podaj imię: <input type="text" name="imie"> </label> <input type="image" src="https://webkod.pl/files/html/przycisk-01.png" width="150" alt="zatwierdź"> </form> </body> </html>
Rezultat
Wartość szerokości przykładowego elementu "input" posiadającego atrybut "type" o wartości "image" wynosi "150" pikseli, ponieważ do wspomnianego elementu "input" został dodany atrybut "width" wraz z wartością "150".