#62. Najważniejsze tagi formularzy

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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>:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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 :

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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.

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