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:

AtrybutPrzyjmowane wartościKrótki opis
autocompleteon, offCzy przeglądarka może automatycznie uzupełnić dane ze swojej pamięci
autofocusTen atrybut nie przyjmuje wartościOkreśla, że element powinien automatycznie uzyskać fokus, gdy strona się ładuje
checkedTen atrybut nie przyjmuje wartościDomyślnie zaznaczone (checkbox, radio)
disabledTen atrybut nie przyjmuje wartościPole zostanie pokazane, ale nie będzie możliwości zmiany go
maxLiczbaMaksymalna wartość pola liczbowego lub pola typu zakres
maxlengthLiczbaMaksymalna ilość znaków
minLiczbaMinimalna wartość pola liczbowego lub pola typu zakres
minlengthLiczbaMinimalna ilość znaków
stepLiczbaOkreśla co ile ma zmieniać się wartość w polu (liczbowym lub zakres)
requiredTen atrybut nie przyjmuje wartościAtrybut blokuje wysłanie formularza, jeżeli dane pole nie jest uzupełnione
valuetekstDomyślna wartość
placeholdertekstWartość, która będzie widoczna, zanim coś zostanie wpisane do pola. Zobacz poniżej
<input type="text" placeholder="Podpowiedź do pola">

Pobierz ten wpis w postaci PDF`a do druku:

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.