Co to jest tag opcji w HTML?

Co To Jest Tag Opcji W Html



„ Znacznik ” służy do zdefiniowania opcji, którą użytkownik może wybrać z rozwijanego menu lub z list wyboru w formularzach internetowych. „ ” umożliwia programistom utworzenie zestawu opcji, z którego użytkownik może wybrać dowolną opcję. Jest wykorzystywany w różnych aplikacjach, takich jak ankiety, witryny zakupów online, formularze rejestracyjne itp.

W tym artykule przedstawiono tag opcji w HTML wraz z praktycznymi przykładami:





Co to jest tag opcji i jak go używać w HTML?

Znacznik opcji może być używany z „ ' I ' ” tagi. w przypadku „ ”, tworzy listę opcji, które mogą być automatycznie uzupełniane przez przeglądarkę. Przeanalizujmy kilka przykładów, aby lepiej zrozumieć związek między „ etykieta „z” ' I ' ” tagi:



Przykład 1: Tworzenie listy rozwijanej



„ ” tag jest używany z „ ”, aby utworzyć listę rozwijaną na stronie internetowej. „ ” tworzy każdą opcję/element listy na liście rozwijanej. Dla lepszego zrozumienia prześledźmy poniższy fragment kodu:



< h2 > Języki programowania h2 >
< etykieta Do = „prog-broń” > Wybierz broń programistyczną: etykieta >
< wybierać ID = „listy programów” >
< opcja wartość = '' > Wybierz opcję opcja >
< opcja wartość = 'C++' > C++ opcja >
< opcja wartość = '.internet' > kropka netto opcja >
< opcja wartość = 'węzły' > węzeł js opcja >
wybierać >

W powyższym fragmencie kodu:



  • Po pierwsze ' Znacznik ” służy do wyświetlania danych i ma przypisany znacznik „ ” tag używając swojego „ Do ' atrybut.
  • Następnie „ Tag ” służy do tworzenia środowiska dla listy rozwijanej.
  • Następnie „ Znacznik ” służy do tworzenia elementów listy, które mają być umieszczane jako elementy listy rozwijanej.

Po skonfigurowaniu struktury listy rozwijanej zastosujmy teraz kilka podstawowych stylów:

etykieta {
Blok wyświetlacza;
margines-dolny: 5px;
}
wybierać {
wypełnienie: 5px;
promień obramowania: 5px;
szerokość: 200px;
}

Wyjaśnienie właściwości CSS opisano poniżej:

  • Najpierw wybierz „ etykieta ”, a następnie ustaw wartości „block” i „5px” na CSS „ wyświetlacz ' I ' margines-dolny ' nieruchomości.
  • Następnie „ wybierać ” jest wybrany i przekazuje wartości „5px”, „5px” i „200px” do CSS „ wyściółka ”, „ promień granicy ' I ' szerokość ”, odpowiednio. Te właściwości są wykorzystywane w celu zwiększenia widoczności użytkownika.

Po wykonaniu powyższych fragmentów kodu strona wygląda następująco:

Powyższe dane wyjściowe pokazują, że lista rozwijana została utworzona przy użyciu „ etykieta „z” ”znacznik.

Przykład 2: Tworzenie listy autouzupełniania

„ ” tag jest używany z „ ”, aby utworzyć listę autouzupełniania. Jest używany razem z „ ”, który zostanie wypełniony opcjami dostępnymi na liście autouzupełniania. Kod do tworzenia listy autouzupełniania za pomocą HTML jest pokazany w poniższym fragmencie kodu:

< etykieta Do = „narzędzia prog” > Lub typ Narzędzie do programowania: etykieta >
< wejście typ = 'tekst' ID = „narzędzia prog” lista = 'narzędzia' >
< lista danych ID = 'narzędzia' >
< opcja wartość = „C++” >
< opcja wartość = 'Montaż' >
< opcja wartość = '.Internet' >
< opcja wartość = 'PHP' >
< opcja wartość = 'Rubin' >
< opcja wartość = 'Szybki' >
< opcja wartość = „węzeł js” >
< opcja wartość = 'Reagować' >
< opcja wartość = „Mongo” >
< opcja wartość = 'Jawa' >
< opcja wartość = 'Pyton' >
lista danych >

W powyższym fragmencie kodu:

  • Najpierw dodaj „ ”, który wyświetla tekst wraz z elementem HTML.
  • Następnie użyj „ ”, który jest uzupełniany ręcznie przez użytkownika lub może być uzupełniany automatycznie za pomocą opcji dostępnych na liście autouzupełniania.
  • Następnie skorzystaj z opcji „ ” i ustaw jego „ ID ” wartość atrybutu równa wartości „ lista ” atrybut „ ”znacznik.
  • Następnie użyj „ ” wewnątrz tagu „”, aby utworzyć pozycję dla listy autouzupełniania.

Po wykonaniu powyższego fragmentu kodu strona wygląda następująco:

Dane wyjściowe pokazują, że lista autouzupełniania jest tworzona przy użyciu „ ” tag z kombinacją „ ' I ' ” tagi.

Wniosek

„ Znacznik ” umożliwia programiście tworzenie opcji dla listy opcji, z której użytkownik może wybrać dowolną opcję. Ten znacznik „” może być używany z „ ' I ' ” tagi zgodnie z potrzebą projektu strony internetowej. Aby utworzyć efekt listy rozwijanej, znacznik „