Pole wyboru są komponentami wejściowymi, które utrzymują wartości logiczne. Korzystając z niego, użytkownik może wybrać wiele opcji z listy opcji. Podczas opracowywania strony internetowej dodanie pola wyboru jest doskonałą opcją, jeśli chcesz, aby odwiedzający wybrali kilka elementów z menu. Jednak pola wyboru działają przeciwnie do przycisków radiowych, co umożliwia tylko jeden wybór z listy.

Aby zmienić stan pola wyboru z niesprawdzonego na sprawdzone, użytkownik musiałby z nim interakcja.

Niniejszy podręcznik poprowadzi Cię o polu wyboru HTML, jego stanach i składni i zademonstruje praktyczny przykład związany z dodaniem pola wyboru w HTML.

Jakie są stany wyboru w HTML?

Pole wyboru ma trzy możliwe stany:

• PRAWDA: Ten stan wskazuje, że pole wyboru jest zaznaczone.
• FAŁSZ: Ten stan wskazuje, że pole wyboru nie jest sprawdzone.
• mieszany: Czy pole wyboru jest sprawdzone, czy nie, jest niezdefiniowane.

Składnia

W HTML znacznik służy do dodawania elementów wejściowych. Aby uzyskać pole wyboru, ustaw typ wejściowy jako „pole wyboru".

Składnia

Przejdźmy do praktycznego przykładu, w którym utworzymy pole wyboru. A więc zacznijmy.

Przykład: Dodanie pola wyboru w HTML

W HTML utworzymy kontener i przypisamy nazwę klasy jako „div". Wewnątrz znacznika dodamy nagłówek za pomocą

. Następnie utwórz podajnik, aby dodać pola wyboru i etykiety.

Tutaj użyjemy znacznika do ustawienia etykiety pola wyboru i znacznika, aby dodać element wejściowy. Następnie ustaw typ wejściowy jako „pole wyboru„Po zamknięciu znacznika dodamy tag Break
znacznik, aby ustawić pole wyboru w następnym wierszu ekranu wyświetlania. Tutaj dodaliśmy dodanie czterech pola wyboru:

Typ wejściowy „pole wyboru”

Kraje, które chcesz odwiedzić:


Hiszpania


Indyk


Japonia


Chiny

Możesz zobaczyć, że pole wyboru typu wejściowego utworzone pomyślnie:

Możesz także stylizować „pole wyboru”Postępując zgodnie z poniżej podaną składnią.

Krok 1: Style Div

Tutaj użyjemy „.div„Aby uzyskać dostęp do utworzonego pojemnika w HTML i ustaw jego wysokość jako„250px". Następnie użyj „kolor tła„Właściwość, aby ustawić kolor tła Div i przypisać wartość koloru jako„RGB (185, 255, 176)". Następnie stygnij DIV, używając „granica„Własność, aby ustawić granicę wokół Div. Szerokość granicy to „5px„Styl jako„przeszyty”I kolor jako„RGB (24, 58, 20)".

CSS

.div
Wysokość: 250px;
Tło: RGB (185, 255, 176);
granica: 5px przerywany RGB (24, 58, 20);

Można zauważyć, że pojemnik z powodzeniem jest stylami:

Krok 2: pole wyboru stylu

Teraz użyjemy „wejście”Aby uzyskać dostęp do danych utworzonych w HTML. Następnie użyj „margines lewic„Właściwość, aby ustawić margines z lewej strony pola wyboru i ustawić wartość jako„30px". Aby ustawić dolny margines, użyj „-but-ds”Właściwość i ustaw wartość jako„15px”:

wejście
margines lewica: 30px;
BARGO-Bottom: 15px;

Poniższy obraz podgrywany oznacza, że ​​wartość właściwości dodanej marginesu jest pomyślnie stosowana do pól wyboru:

Otóż ​​to! Wyjaśniliśmy szczegółowo na temat typu wejściowego „pole wyboru".

Wniosek

A "pole wyboru”To element typu wejściowego HTML, który pozwala użytkownikowi wybrać między dwiema lub więcej możliwych opcji. Pozwala użytkownikowi wybrać wiele wartości z predefiniowanej listy. Pole wyboru ma trzy stany: prawda, fałsz i mieszany. W tym przewodniku szczegółowo wyjaśniliśmy pole wyboru typu wejściowego i podaliśmy przykład związany z dodaniem pola wejściowego i stylizacji.