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:
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:
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:
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>:
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ć <label>. Sprawdź poniższy przykład i przetestuj działanie elementu label: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 :
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