Jak pobrać dane z HTML`a, czyli wszystkie input`y

Każdy, kto miał styczność z tworzeniem stron internetowych, wie, że aby strona była „interaktywna” powinna jakoś przyjmować dane od użytkownika. Najbardziej podstawowym sposobem są formularze w HTML`u.

I tak z najbardziej znanych:

Pola do wprowadzania danych

<input type="text">

← Przyjmuje dowolną ilość znaków

<input type="password">

← Przyjmuje dowolną ilość znaków, zamiast ich pokazuje •

<input type="number">

← Przyjmuje dowolną liczbę (również ujemną)

Pola typu wyboru

<input type="radio">

← Zaznaczysz tylko jedno pole
← Zaznaczysz tylko jedno pole

<input type="checkbox">

← Można zaznaczyć więcej niż jedno
← Można zaznaczyć więcej niż jedno

Oraz domyślne przyciski

<input type="button" value="btn">

← Klikalny przycisk

<input type="submit">

← Prześlij formularz*

<input type="reset">

← Czyszczenie formularza*

A teraz przejdźmy do mniej znanych, ale nadal przydatnych elementów:

<input type="color">

← Do wyboru do koloru

<input type="date">

← Wybór pełnej daty

<input type="time">

← Wybór pełnej godziny

<input type="datatime-local">

← Wybór pełnej daty i godziny w czasie lokalnym

<input type="week">

← Wybór tygodnia w roku

<input type="month">

← Wybór miesiąca w roku

<input type="email">

← Można podać tylko e-mail, przeglądarka będzie blokowała inne dane niż e-mail`e

<input type="range">

← Przesuwak

---

Dla tych znaczników możemy jeszcze dodać atrybuty, po za ważnym “name”, dzięki któremu później wiadomo w jakim polu, co zostało wpisane/zaznaczone:

Atrybut	Przyjmowane wartości	Krótki opis
autocomplete	on, off	Czy przeglądarka może automatycznie uzupełnić dane ze swojej pamięci
autofocus	Ten atrybut nie przyjmuje wartości	Określa, że element powinien automatycznie uzyskać fokus, gdy strona się ładuje
checked	Ten atrybut nie przyjmuje wartości	Domyślnie zaznaczone (checkbox, radio)
disabled	Ten atrybut nie przyjmuje wartości	Pole zostanie pokazane, ale nie będzie możliwości zmiany go
max	Liczba	Maksymalna wartość pola liczbowego lub pola typu zakres
maxlength	Liczba	Maksymalna ilość znaków
min	Liczba	Minimalna wartość pola liczbowego lub pola typu zakres
minlength	Liczba	Minimalna ilość znaków
step	Liczba	Określa co ile ma zmieniać się wartość w polu (liczbowym lub zakres)
required	Ten atrybut nie przyjmuje wartości	Atrybut blokuje wysłanie formularza, jeżeli dane pole nie jest uzupełnione
value	tekst	Domyślna wartość
placeholder	tekst	Wartość, która będzie widoczna, zanim coś zostanie wpisane do pola. Zobacz poniżej

<input type="text" placeholder="Podpowiedź do pola">

---