Pole wyboru HTML
Cel pola wyboru w HTML
Zarówno pole wyboru, jak i przyciski radiowe są używane do dostarczania wielu opcji do wyboru dla użytkownika. Można jednak zapytać, gdzie różnią się te dwa elementy HTML? Cóż, przycisk opcji jest zawsze używany w sytuacjach, w których chcesz ograniczyć użytkownika do wybrania dokładnie jednej opcji, a nie więcej niż to. Z drugiej strony, pole wyboru jest używane, gdy chcesz pozwolić użytkownikowi na wybór więcej niż jednej opcji. Dlatego ilekroć chcesz uzyskać maksymalne możliwe wybory z podanej listy, zawsze korzystasz z skrzynek wyboru w HTML. Aby szczegółowo zrozumieć to użycie, będziesz musiał przeczytać następną sekcję tego samouczka.
Kod HTML do tworzenia skrzynek wyboru
Możesz bardzo szybko tworzyć pola wyboru w HTML. Wszystko, co musisz zrobić, to śledzić dwa poniższe przykłady, aby nauczyć się tego hacka:
Przykład 1: Pobieranie zawodu osoby
Wspominaliśmy już, że pola wyboru w HTML i dowolnym innym języku są zawsze używane, gdy masz swobodę wyboru więcej niż jednej opcji. Dlatego w tym scenariuszu będziemy zaprojektować skrypt HTML do pobrania zawodu osoby. Teraz ta osoba może być albo „uczeń”, „nauczycielem” lub oba. W przypadku ostatniej opcji chcemy dać osobie wolność wybrać oba pola wyboru. Aby opracować taką funkcjonalność, zaprojektowaliśmy następujący skrypt HTML:
Po użyciu instrukcji deklaracji typu dokumentu użyliśmy tagów „” i „”, abyśmy mogli napisać nasz skrypt HTML. Następnie użyliśmy „
„Flaga nagłówka do określenia nagłówka naszej strony internetowej. Następnie następuje flaga „Typ wejścia”, której użyliśmy do powiadomienia, że utworzymy pole wyboru w HTML. Następnie stworzyliśmy „id” i „nazwa” dla tego pola wyboru. Przypisaliśmy również etykietę do tego pola wyboru. Następnie użyliśmy znacznika „etykiety” do wspomniania o etykiecie na każdym z naszych pola wyboru HTML. W ten sam sposób zaprojektowaliśmy drugie pole wyboru. Następnie stworzyliśmy również przycisk „Prześlij” tylko ze względu na wygląd naszej strony, fajnie.
Po zapisaniu i wykonaniu tego skryptu HTML z Google Chrome strona internetowa pokazana na poniższym obrazku pojawiła się w naszej przeglądarce:
Teraz możesz wybrać tyle opcji z tej strony internetowej, ile chcesz. Na poniższym obrazie wybraliśmy tylko jeden z dwóch pola wyboru.
Na obrazie pokazanym poniżej wybraliśmy oba pola wyboru.
Aby ulepszyć funkcjonalność tego skryptu HTML, możesz nawet zaprojektować stronę akcji za pomocą PHP, aby po naciśnięciu przycisku „Prześlij” po wybraniu żądanego pola wyboru [S] podjęto odpowiednie działania.
Przykład 2: Wybór ulubionego smaku koktajlu mlecznego:
Czasami możesz nawet zaprojektować bardzo prostą stronę internetową podczas korzystania z pole wyboru HTML bez żadnych przycisków akcji. Na przykład możesz po prostu zaprezentować użytkownikowi kilka pola wyboru za wybranie jego ulubionego smaku koktajlu mlecznego. Jednak nie chcesz, żeby zrobił coś dalej po dokonaniu tego wyboru. Takie przypadki są bardzo rzadkie. Zwykle poprosisz użytkownika o podjęcie dowolnej akcji po wybraniu, takich jak kliknięcie przycisku. Niemniej jednak chcielibyśmy pokazać ci taki przykład. Aby zilustrować ten przykład, zaprojektowaliśmy dla Ciebie następujący skrypt HTML:
W tym skrypcie HTML niezbędne elementy skryptu to: Deklaracja typu dokumentu, „” i „” znaczniki są takie same, a ich cele są również dokładnie takie same, jak opisaliśmy w naszym pierwszym przykładzie. Następnie użyliśmy znacznika akapitowego do wyświetlania użytkownika wiadomości, prosząc go o wybranie jego ulubionego smaku koktajlu mlecznego. Użytkownik może wygodnie wybrać więcej niż jeden wybrany smak. Następnie zdefiniowaliśmy etykiety dla tych pola wyboru, a następnie odpowiednie deklaracja pola wyboru. Musisz tutaj zauważyć, że tym razem nie użyliśmy znacznika „etykiety” HTML do określenia etykiety. Zamiast tego właśnie zdefiniowaliśmy etykiety. Oznacza to, że jest to kolejny sposób, w jaki możesz tworzyć etykiety dla swoich pola wyboru tylko ze względu na uproszczenie skryptu HTML. Po całkowitym napisaniu tego skryptu po prostu zapisaliśmy ten plik notatnika za pomocą „.rozszerzenie html ”, aby można go było łatwo wykonać za pomocą dowolnej wybranej przeglądarki.
Wykonaliśmy ten skrypt HTML podczas korzystania z Google Chrome i wyświetliliśmy stronę internetową pokazaną na poniższym obrazku w naszej przeglądarce:
Teraz możesz dogodnie wybrać tyle z tych pole wyboru, ile chcesz. Jest to pokazane na poniższym obrazku:
Wniosek
W tym samouczku chcieliśmy podzielić się z Tobą wykorzystaniem pola wyboru HTML w najłatwiejszy sposób. W tym celu po raz pierwszy przedstawiliśmy Cię w podstawowym celu tego elementu HTML. Następnie wyjaśniliśmy ci dwa różne przykłady, które wykorzystały ten element HTML. Przechodząc do tych wyjaśnień, możesz łatwo zacząć korzystać z pola wyboru HTML, gdy chcesz zapewnić swoim użytkownikom elastyczność w wyborze więcej niż jednej opcji z dowolnej listy opcji.