Podstawowy kontener formularzy HTML – form
Tag form
jest jednym z dwóch podstawowych elementów formularzy w HTML. Głównym zadaniem wspomnianego elementu jest grupowanie elementów tak by by tworzył formularz oraz oddzielanie różnych formularzy od siebie. Dzięki takiemu zabiegowi, możemy tworzyć pola o takich samych nazwach bez przypadku powtórzenia, co pozwala nam na bezproblemowe zarządzanie polami, do których użytkownik strony wprowadza dane.
Spójrz na przykład:
flamboyant-hypatia-swuwx
flamboyant-hypatia-swuwx danielminschinski
Element grupujący input wewnątrz formularza – fieldset
Element fieldset
jest używany do dzielenia elementów input
na grupy wewnątrz form
– niewymagany ale formularze stają się bardziej przejrzyste. Wynika to z tego, że element fieldset
tworzy ramkę wokół elementów które obejmuje.
Kolejną pożyteczną cechą elementu fieldset
jest to, że ramce, którą tworzy, możemy nadać nagłówek. Aby osiągnąć taki efekt, wystarczy umieścić tag legend
z odpowiednim napisem wewnątrz wybranego fieldset
.
Spójrz na przykład z zastosowaniem elementu grupującego fieldset
:
unruffled-bouman-u6pp4
unruffled-bouman-u6pp4 danielminschinski
Listy rozwijane z opcjami wyboru – select
Tag select
odpowiada za tworzenie rozwijanych list z opcjami wyboru, które wprowadzamy za pomocą elementu option
. Każda opcja musi mieć atrybut value
, by móc przekazywać wybraną wartość do formularza. W środku taga option
dodajemy tekst aby użytkownik widział którą opcje wybiera.
Układ wspomnianych elementów w kodzie wygląda tak samo jak zagnieżdżenie li
w listach ul
lub ol
.
W przypadku długich list rozwijanych, warto wprowadzić podział elementów option
za pomocą tagów optgroup
. Służą one do grupowania opcji w listach rozwijanych. Aby nazwać określoną grupę opcji, wystarczy użyć atrybutu label
z odpowiednią nazwą.
Spójrz na poniższy przykład z zastosowaniem rozwijanej listy z opcjami wyboru:
gracious-tdd-n81fg
gracious-tdd-n81fg danielminschinski
Pobieranie tekstu – textarea
W poprzednim materiale poznaliśmy już element, który pobiera tekst – <input type="text">
. Najważniejsza różnica pomiędzy wspomnianym tagiem a <textarea>
polega na tym, że <input>
nie jest przystosowany do przyjmowania długiego tekstu, który zajmuję nawet kilka linii. <textarea>
jest elementem o wiele lepszym dla długich tekstów. Użytkownik może zmieniać jego rozmiar rozciągając go, przez co pisanie staje się wygodniejsze.
Kolejną rzeczą, która odróżnia <textarea>
od <input>
są atrybuty. W <textarea>
stosuje się następujące atrybuty: rows
i cols
, które oznaczają odpowiednio ilość rzędów (linii) w polu oraz ilość kolumn, które odpowiadają szerokości jednego znaku.
Spójrz na poniższy przykład z zastosowaniem elementu <textarea>
:
pedantic-wind-lrejs
pedantic-wind-lrejs danielminschinski
Etykieta dla elementów input – label
Tag<label>
przekierowuje kliknięcia z siebie na checkboxy, elementy radio i inne type <input type="text" />
, dzięki czemu możemy zaznaczać wartości w <input type="text" />
bez klikania bezpośrednio na niego. Ta funkcja wykorzystywana jest przy tworzeniu własnych przycisków za pomocą HTML i CSS, które mają pełnić określoną funkcję na stronie. Gdy chcemy użyć taga etykiety, musimy nadać elementom którymi chcemy sterować
, a później dodać je w atrybucie
dla elementu <label>
. Sprawdź poniższy przykład i przetestuj działanie elementu label:broken-lake-gysnq
broken-lake-gysnq danielminschinski
Lista sugestii dla input – datalist
Strony internetowe wyposażone w formularz często proponują użytkownikowi gotowe rozwiązania. Aby móc zastosować takie sposoby należy użyć w kodzie elementu <datalist>
.
W środku elementu umieszczamy tagi z odpowiednimi atrybutami
value
, podobnie jak w elemencie <select>
.
W samym tagu <datalist>
musimy też umieścić atrybut id
, a w <input type="text" />
do którego chcemy podpiąć naszą listę z sugestiami trzeba dodać atrybut list
, którego wartością jest id
listy z sugestiami.
Sprawdź poniższy przykład z zastosowaniem :
weathered-tdd-dewct
weathered-tdd-dewct danielminschinski
Dziękuję za zapoznanie się z moim materiałem o najważniejszych tagach formularzy. Mam nadzieje że się Wam spodobał. W przyszłą środę zapoznasz się z atrybutami i akcjami formularzy HTML.
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA