Wcześniej powiedzieliśmy sobie do czego służą formularze w HTML. Teraz zajmiemy się kontrolkami, czyli różnymi rodzajami pól w formularzu.
Kontrolka input: jest to kontrolka, która ma wiele wyglądów i sposobów działania. Wszystko opiera się na jej typie. My będziemy się zajmować na tej lekcji typem text i password. O innych typach powiemy sobie na późniejszych lekcjach.
Input o typie text pozwala nam na wpisanie znaków w pole. Pole to jest jednolinijkowe.
Kod który pokaże nam to pole wygląda następująco:
<input type="text" >
Nie trzeba zamykać znacznika.
Drugim typem który pozwala nam na wpisanie tekstu jest typ password. Wykorzystuje się ten tym wszędzie tam, gdzie trzeba pobrać najczęściej hasło od użytkownika, a nie chcemy, aby ktoś postronny podejrzał to hasło.
Wywołanie pola password:
<input type="password" >
Atrybuty znacznika input
atrybut |
wartości |
opis |
type |
text | radio | checkbox | password | hidden | submit | reset | button | image | file |
Typ pola |
type |
color | date | datetime-local |email | month | number | range |search | tel | time | url | week
|
Dodatkowe typy, które są nowe w HTML5. Typy te nie są wspierane w starszych przeglądarkach – będzie się wyświetlać tekst. |
name <input type="tekst" name="imie" > |
Określa nazwę pola. Wykorzystuje się ten atrybut do określenia w skrypcie obrabiającym dane co dane pole zawiera |
|
readonly <input type="tekst" name="imie" readonly> |
Określa czy pole jest tylko do odczytu |
|
disabled <input type="tekst" name="imie" disabled> |
Określa pole wyłączone |
|
size <input type="tekst" name="imie" size="40"> |
Określa ile znaków będzie widocznych w kontrolce |
|
maxlength <input type="tekst" name="imie" maxlength="40"> |
Określa ile znaków może użytkownik wpisać. |
|
value <input type="tekst" name="imie" value="Janek"> |
Określa startową wartość pola |
Nowe atrybuty w HTML 5
autocomplete ( on | off ) <input type="tekst" name="imie" autocomplete="on"> |
Określa czy przeglądarka może uzupełnić formularz danymi, które użytkownik wpisał wcześniej. Działa z kontrolkami: text, search, url, tel, email, password, datepickers, range i color oraz form |
|
novalidate <form action="/action_page.php" novalidate> |
Określa czy przeglądarka może sprawdzić dane wpisane przez użytkownika przed wysłaniem formularza |
|
autofocus <input type="tekst" name="imie" autofocus> |
Określa, w którym polu będzie pierwsze aktywne (będzie się znajdował kursor) po załadowaniu strony |
|
form <form action="/action_page.php" id="form1"> <input type="tekst" name="imie" form="form1">
|
Określa, że dane pole poza formularzem jest częścią tego formularza |
|
formaction <form action="/action_page.php">
|
Atrybut nadpisuje atrybut action znacznika form. Czasem jest potrzeba aby dwa różne guziki wysyłania formularza, wysyłały formularz w do dwóch różnych skryptów. Używany tylko z type=”submit” i type=”image” |
|
formenctype <form action="/action_page_binary.asp" method="post">
|
Atrybut nadpisuje atrybut enctype znacznika form. Używany tylko z type=”submit” i type=”image” |
|
formmethod <form action="/action_page.php" method="get">
|
Atrybut nadpisuje atrybut method znacznika form. Używany tylko z type=”submit” i type=”image” |
|
formnovalidate <form action="/action_page.php"> |
Atrybut nadpisuje atrybut novalidate znacznika form. Używany tylko z type=”submit”. |
|
formtarget <form action="/action_page.php">
|
Atrybut nadpisuje atrybut target znacznika form. Używany tylko z type=”submit” i type=”image”. |
|
height oraz width <input type="image" src="/img_submit.gif" alt="Submit" width="48" height="48">
|
Określa wysokość i szerokość grafiki. Należy zawsze określić wielkość grafiki. W innym przypadku strona będzie nam skakać, pływać. |
|
min oraz max Enter a date before 1980-01-01: |
Określa minimalną i maksymalną wartość jaką może przyjąć wartość w input. Działa z number, range, date, datetime-local, month, time oraz week. |
|
multiple Select images: <input type="file" name="img" multiple> |
Określa czy użytkownik może podać więcej niż jedną wartość. Działa z email oraz file. |
|
pattern Country code: <input type="text" name="country_code" |
Określa w jaki sposób sprawdzić czy dane, króre wpisał użytkownik są prawidłowe. Używa się do tego wyrażeń regularnych. Działa z text, search, url, tel, email oraz password |
|
placeholder <input type="text" name="fname" placeholder="First name"> |
Określa tekst, który będzie się wyświetlał przed tym co użytkownik wpisze. Działa z text, search, url, tel, email oraz password. |
|
required Username: <input type="text" name="usrname" required> |
Określa czy dane pole musi być wypełnione przed wysłaniem formularza. Działa z text, search, url, tel, email, password, date pickers, number, checkbox, radio oraz file. |
|
step <input type="number" name="points" step="3"> |
Określa skok o jaki należy zwiększyć zmienną w kontrolce |
Wiele nowości wprowadzonych w HTML5 nie jest jeszcze w pełni obsługiwana przez przeglądarki, więc czasem zamiast określonej kontrolki otrzymamy pole do wpisania tekstu.
Drugą omawianą kontrolką jest textarea. Różni się od kontrolki <input type="text"> <input type="password"> tym, że tutaj dostajemy dużo większe pole do wpisywania tekstu.
Atrybuty textarea.
Attribute |
Value |
Description |
---|---|---|
autofocus |
autofocus |
Określa czy kontrolka ma być aktywna po wczytaniu strony |
cols |
number |
Określa ilość kolumn znaków |
dirname |
textareaname.dir |
Określa kierunek tekstu podczas wysyłania formularza |
disabled |
disabled |
Określa czy pole jest wyłączone |
form |
form_id |
Określa do jakiego formularza należy to pole |
maxlength |
number |
Określa ile znaków może wpisać użytkownik w pole |
name |
text |
Określa nazwę pola |
placeholder |
text |
Określa podpowiedź na temat tego pola |
readonly |
readonly |
Określa czy pole jest tylko do odczytu |
required |
required |
Określa czy pole musi być wypełnione |
rows |
number |
Określa widoczną liczbę wierszy |
wrap |
hard |
Określa czy automatycznie powstające znaki przejścia do nowej linii będą automatycznie dołączane do wysyłanego formularza. |
Atrybuty zaznaczone na zielono wprowadza HTML5.