Znacznik input
Znacznik input tworzy różne elementy
formularza HTML: zwykłe pole wprowadzania, pole do
wprowadzania hasła, pole wyboru checkbox,
przyciski opcji (radio), przycisk.
Znacznik input powinien znajdować się wewnątrz znacznika
form.
Nie jest to obowiązkowe, ale konieczne do wysłania
danych na serwer i ich późniejszego przetwarzania
przez PHP.
Nie wymaga tagu zamykającego.
Atrybuty
| Atrybut | Opis |
|---|---|
type |
Określa typ pola wprowadzania. Opcje patrz poniżej. |
value |
Domyślna wartość w polu wprowadzania. W przypadku przycisku określa jego tekst.
Szczegóły patrz atrybut value.
|
placeholder |
Podpowiedź w polu wprowadzania, szczegóły patrz
atrybut placeholder.
|
name |
Nazwa pola wprowadzania. Potrzebna, aby pobrać dane pola wprowadzania w PHP. Dla poprawnego działania formularza nazwy pól wprowadzania nie powinny się powtarzać (w jednym formularzu). Jeśli się powtarzają - w PHP przyjdą dane tego pola wprowadzania, które jest niżej w kodzie HTML. |
disabled |
Blokuje element formularza (nie tylko input, ale praktycznie każdy),
szczegóły patrz atrybut disabled.
|
Wartości atrybutu type
| Wartość | Opis |
|---|---|
text |
Tworzy zwykłe pole tekstowe. |
password |
Tworzy pole tekstowe do wprowadzania hasła. Spróbuj wpisać w nie tekst - wyświetli się jako gwiazdki. |
checkbox |
Tworzy pole wyboru checkbox.
Szczegóły patrz checkbox.
|
radio |
Tworzy przełącznik opcji radio.
Szczegóły patrz radio.
|
hidden |
Tworzy ukryty input, który nie będzie widoczny na ekranie, ale będzie wysyłał zawarte
w atrybucie value dane na serwer.
|
button |
Tworzy przycisk. Naciśnięcie tego przycisku
nie spowoduje wysłania formularza na serwer. Może być użyty wewnątrz
linku lub przez JavaScript.
Domyślnie przycisk nie ma tekstu (przykład przycisku bez tekstu: ),
jest on ustawiany za pomocą value.
Patrz także znacznik button,
który również tworzy przycisk.
|
submit |
Tworzy przycisk, który wyśle dane na serwer.
Tekst przycisku zależy od przeglądarki, można go zmienić
za pomocą value.
Patrz także znacznik button,
który również tworzy przycisk.
|
reset |
Tworzy przycisk, który czyści wypełniony formularz.
Tekst przycisku zależy od przeglądarki, można go zmienić
za pomocą value.
|
file |
Tworzy przycisk wyboru pliku. Zabronione jest zmienianie wyglądu tego przycisku
przez CSS (istnieją jednak sprytne sposoby). Jeśli potrzebujesz takiego pola w formularzu, to
znacznik form musi mieć atrybut
enctype o wartości multipart/form-data.
|
Nowe wartości atrybutu type w HTML5
Te wartości atrybutu są nowe, pojawiły się dopiero w HTML5, więc w niektórych przeglądarkach mogą nie działać lub działać różnie w różnych przeglądarkach.
W przypadku, gdy przeglądarka nie może zrozumieć zawartości
atrybutu type (na przykład, jeśli jest
nieobsługiwana lub błędnie wpisana),
będzie traktować element jako zwykły tekstowy
input, tak jakby w type była wartość
text.
Spójrz na podane poniżej przykłady w
różnych przeglądarkach. Spróbuj wprowadzać
tekst w inputy i nacisnąć przycisk wysyłki.
Jeśli tekst jest niepoprawny lub pole jest puste -
przeglądarka wyświetli błąd. Na przykład, jeśli w
polu z typem email wpisać niepoprawny
email - przeglądarka nie pozwoli wysłać formularza i
wyświetli komunikat o błędzie (tekst błędu
i jego wyglądu w html css nie można zmieniać).
Jeśli pole jest puste - przeglądarka również wyświetli błąd,
osiąga się to za pomocą atrybutu required:
| Wartość | Opis |
|---|---|
email |
|
number |
|
url |
|
tel |
|
search |
|
color |
|
date |
|
month |
|
week |
|
datetime |
|
datetime-local |
|
range |
