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.
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.
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.
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:
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:
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:
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:
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:
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> 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: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.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA