#61. Input – tag oraz jego typy

Formularz to element na stronie, dzięki któremu umożliwia nam przejęcie danych od użytkownikach i przetworzenie ich w dowolny sposób. Możemy zapisać go na listę mailową, zarejestrować, wyświetlać odpowiednie wyniki wyszukiwania, itp…

Tag input umożliwia użytkownikom wprowadzenie danych do formularza. Wyróżnia się on wszechstronnością – zależnie od określonego typu może pełnić rolę pola pojedynczego wyboru (radio), pola wielokrotnego wyboru (checkbox), suwaka do wyboru wartości z zakresu (range) lub wiele innych.
Tag input wykorzystuje atrybut type, który determinuje jego typ i nadaje mu określone właściwości – dzięki temu nie musimy wykorzystywać innego taga do typu input, co pozwala nam porządek w kodzie.

Spójrz na poniższy przykład. Nowością którą wprowadzam na moim blogu, jest również utworzenie playlisty z filmami na moim kanale Youtube. Będą one odzwierciedleniem odnośnika do codesandbox.

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

goofy-pond-xzb0c

goofy-pond-xzb0c danielminschinski

Pole jednokrotnego wyboru – typ radio

Elementy input przyjmują dane w różnych formach. W powyższym nagłówku ująłem typ radio. Oznacza one pole jednokrotnego wyboru. Aby ten typ zadziałał poprawnie, należy dodać atrybut name z nazwą tego pola oraz atrybut value z wartością danego wyboru.

Atrybut name jest konieczny, aby przeglądarka wiedziała do którego wyboru odnosi się dany input. Atrybut value odpowiada po prostu zawartość dla konkretnego wyboru.

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

wizardly-andras-9epeu

wizardly-andras-9epeu danielminschinski

Pole wielokrotnego wyboru – typ checkbox

Kolejnym typem opcji wyboru jest checkbox. Umożliwia on wybieranie kilku opcji jednocześnie. Checkbox pozwala też nie wybrać żadnej z dostępnych opcji. Przy typie radio, nie możemy “odznaczyć” wybranego pola. Opcja jest tylko jedna – zmienić swój wybór na inny.
Sposób tworzenia jest taki sam jak w przypadku radio – potrzebujemy atrybutu name, w celu identyfikacji danego inputa, odpowiedniego atrybutu type oraz value, w którym podamy odpowiednią wartość dla danego elementu input.Ten typ inputu często stosuje się przy akceptacji regulaminu na stronach internetowych.

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

affectionate-chatterjee-itiqo

affectionate-chatterjee-itiqo danielminschinski

Pole dla hasła – typ password

Poznaliśmy wcześniej typ text. Przejdzmy do bardziej rozbudowanego – do typu password. Pozwala on użytkownikowi wpisać hasło w naszym formularzu. W tym przypadku nie musimy dodawać już atrybutów name oraz value – po prostu nie będą nam potrzebne.

input typu password charakteryzuje się tym, że zmienia wpisywane znaki w gwiazdki, a więc osoby patrzące na ekran nie będą widziały hasła, które wpisujemy.

Spójrz na przykład z zastosowaniem powyższej teorii:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

recursing-rubin-hb88i

recursing-rubin-hb88i danielminschinski

Pole adresu email – typ email

Kolejnym typem który chce przedstawić jest email. Jest on rozszerzeniem typu text. Ma ciekawą funkcje – automatycznie sprawdza czy podany adres email jest prawidłowy w momencie, kiedy chcemy wysłać formularz.

W przypadku podania błędnego emaila (np. brakuje w nim znaku @), to przeglądarka sygnalizuje nam to poprzez pokazanie przy danym polu małej rami z wytłumaczeniem dlaczego podany adres nie został zaakceptowany.

Spójrz na poniższy przykład z zastosowaniem typu email:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

recursing-rubin-hb88i

recursing-rubin-hb88i danielminschinski

Pole do wprowadzania liczb – typ number

input typu number jest charakterystyczny ze względu na to, że zamiast tekstu przyjmuje wyłącznie tekst.
Ten typ zawiera “strzałki”, którymi możemy zwiększać oraz zmniejszać podaną przez nas liczbę – możemy to również robić za pomocą klawiatury – a dokładniej strzałkami.

Dotychczas pokazałem Ci tylko jedno pole z ograniczeniami dla wprowadzanych danych – typ email. Wymagał on poprawnego adresu email, aby móc wysłać dane z formularza do odbiorcy. Typ number również ma pewne ograniczenia – wprowadzimy do niego tylko i wyłącznie cyfry. Domyślnie, typ number przyjmuje wszystkie liczby całkowite.

Spójrz na przykład z zastosowaniem nowo poznanego typu:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

fervent-rgb-ehzbv

fervent-rgb-ehzbv danielminschinski

Suwak do wprowadzania liczb – typ range

Najważniejszą różnicą między number a range jest w użytkowaniu. Zamiast strzałek mamy suwak. Domyślnie, typ range przyjmuje wartości w zakresie od 0 do 100.
Spójrz na przykład:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

wizardly-voice-dgv2s

wizardly-voice-dgv2s danielminschinski

Wybieranie daty – typy input

Typ data umożliwia nam podanie daty w ciekawy sposób – poprzez tzw. datapicker – okienko kalendarza.

Pole umożliwia nam wprowadzenie daty na kilka sposobów – ręczne wpisywanie daty, strzałki, strzałki na klawiaturze lub najwygodniej już wspomniane okienko kalendarza.

Dodatkowo wspomnę o typach week oraz month, które umożliwiają wybieranie odpowiednio tygodniu roku oraz miesięcy (razem z rokiem).

Spójrz na przykład z zastosowaniem typu date:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

xenodochial-sid-c6nwu

xenodochial-sid-c6nwu danielminschinski

Kontrolowanie formularza – typy input

Dotychczas przedstawiałem Ci sposoby prezentowania danych w formularzu. Przyszedł czas na ich wysłanie do odbiorcy.

Do tego służy typ submit, który sygnalizuje przeglądarce, że zamierzamy wysłać zawartość pól z naszego formularza. Inną opcją jest wykorzystanie przycisku w następujący sposób:

<button type="submit">Wyślij</button> 
Działanie ma takie same. Różnica jest taka, że możemy nadać swoją nazwę przycisku. Ciekawym typem jest reset. Usuwa on wszystkie wprowadzone dane z formularza. Możemy nadać go na tag input lub button. Spójrz na poniższy przykład z zastosowaniem typu submit:
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

pensive-water-b8dbs

pensive-water-b8dbs danielminschinski

Najważniejsze typy tagu input przedstawiłem tak jak umiałem. Mam nadzieje że spodobał Wam się materiał – dość obszerny, ponieważ wzbogacony o krótkie wideo na YouTube pod każdym typem. Wprowadzam takie nagrania z pulpitu, ponieważ uważam że może przyjąć się taki sposób prezentowania kodu. A po drugie, chciałbym poszerzyć swój zasięg w internecie. Jak mi pomożecie to może się uda.

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb.

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!