Pole kombi HTML z opcją wpisania wpisu

Aby opracować formularze HTML, zwykle wykorzystywana jest kombinacja HTML. Użytkownik może wybrać decyzję z listy opcji, wykorzystując ten komponent. Korzystanie z pola kombinacji jest podobne do używania tagu wybranego. Dodatkowo prosi użytkowników o wybranie elementu menu z listy zgodnie z ich wyborem.

Ten post pokazuje metodę tworzenia i stylizowania pole kombinacji z atrybutem opcji, aby wpisać wpis.

Jak utworzyć pole kombi z atrybutem opcji, aby wpisać wpis?

Funkcjonalność pole kombinacji jest zasadniczo dostarczana przez grupowanie pola wejściowego HTML dla tekstu i pola wyboru HTML. Mówiąc dokładniej, użytkownicy mogą wprowadzić tekst do kontroli wejściowej za pomocą kontroli Wybierz lub prosto w polu tekstowym.

Aby utworzyć pole kombi z atrybutem opcji, aby wpisać wpis, wypróbuj podane instrukcje.

Krok 1: Utwórz kontener Div

Najpierw utwórz kontener DIV i wstaw „klasa" atrybut. Podaj także nazwę klasy zgodnie z wyborem.

Krok 2: Dodaj tag „”

Następnie skorzystaj z „”Tag i określ nazwę rozwijanej listy.

Krok 3: Wstaw metkę „”

Następnie wstaw „„Tag pomiędzy tagiem. Następnie dodaj „wartość”Atrybut wewnątrz znacznika i przypisz wartość. Dodaj tekst dla opcji między znacznikiem.

Krok 4: Utwórz pole dla wpisu wpisu

Teraz skorzystaj z „”Tag i ustaw„typ”Atrybut jako„tekst". Dodaj także atrybut nazwy i przypisz wartość do tego atrybutu:

Wybierz płeć

Mężczyzna
Kobieta
Inny

W rezultacie utworzono pole kombi z opcją wpisania wpisu:

Krok 5: Uzyskaj klasę kontenerów Div Div

Uzyskaj dostęp do klasy kontenerów Div, wykorzystując selektor o nazwie klasy „.COMBO-box".

Krok 6: Zastosuj właściwości CSS

Po uzyskaniu dostępu do zajęć zastosuj nieruchomości poniżej listy:

.combo-box
granica: 2px stały niebieski;
Wysokość: 70px;
szerokość: 170px;
Margines: 50px;
Wyściółka: 30px;
kolor tła: bisque;

Tutaj:

• "granica„Właściwość służy do ustawiania granicy wokół elementu.
• Ustaw "wysokość”Granicy do określania wysokości do określonej wartości.
• "szerokość„Właściwość jest wykorzystywana do określenia szerokości elementu.
• "margines”Przydziela przestrzeń kosmiczną określonego obszaru.
• "wyściółka”Służy do ustawienia przestrzeni wewnątrz zdefiniowanej granicy.
• "kolor tła”Właściwość ustawia kolor na tylnym lub tle elementu.

Wyjście

Można zauważyć, że utworzono pole kombi z opcją wpisania wpisu.

Wniosek

Aby utworzyć/stworzyć pole kombi z opcją wpisania wpisu, najpierw zrób kontener DIV za pomocą „”Element, a także dodaj atrybut„ klasy ”o określonej nazwie. Następnie wstaw „„Tag do tworzenia rozwijanej listy i dodaj„”Element dla różnych opcji. Następnie użyj „”Tag za pomocą„typ”Atrybut jako„tekst”Do tworzenia pola tekstowego. W tym poście pokazano metodę tworzenia pola kombi z opcją wpisania wpisu.