Marca HTML <optgroup>

Este post irá explicar o optgroup HTML Tag com exemplos para ajudar com os requisitos de aprendizagem.

A tag <optgroup> em HTML é usada para agrupar opções relacionadas em uma lista de seleção. É um elemento filho da tag <select> e pode conter um ou mais elementos <option> .

Agrupamento de opções com tags <optgroup> :

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
<label for="laptops">Choose a Laptop:</label>
<select name="laptops" id="laptops">
<optgroup label="United States Laptops">
<option value="dell">Dell</option>
<option value="HP">HP</option>
</optgroup>
<optgroup label="Taiwan laptops">
<option value="acer">Acer</option>
<option value="asus">Asus</option>
</optgroup>
</select>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está o outro exemplo da tag <optgroup> :

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>
<select>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</optgroup>
<optgroup label="Vegetables">
<option value="carrot">Carrot</option>
<option value="potato">Potato</option>
<option value="tomato">Tomato</option>
</optgroup>
</select>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo da tag optgroup com CSS aplicado a ela:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 200px;
padding: 10px;
border-radius: 5px;
font-size: 16px;
}
optgroup {
font-weight: bold;
}
option {
color: gray;
}
</style>
</head>
<body>
<select>
<optgroup label="Europe">
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="italy">Italy</option>
<option value="spain">Spain</option>
</optgroup>
<optgroup label="North America">
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
<option value="usa">USA</option>
</optgroup>
<optgroup label="South America">
<option value="argentina">Argentina</option>
<option value="brazil">Brazil</option>
<option value="chile">Chile</option>
</optgroup>
</select>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca HTML <optgroup>:

Uso de tag optgroup

Um Tag optgroup <optgroup> é usado para agrupar opções relacionadas dentro de um elemento <select> (lista drop-down).

Um usuário pode lidar com uma longa lista de opções mais rapidamente se agrupadas de acordo com seu significado.

A tag <optgroup> em HTML é usada para agrupar opções relacionadas em uma lista suspensa. Ele é usado em combinação com a tag <select> para fornecer uma lista de opções para o usuário escolher. A tag <optgroup> é usada para agrupar opções relacionadas, permitindo que o usuário identifique e selecione rapidamente a opção apropriada.

A tag <optgroup> normalmente é usada quando há um grande número de opções disponíveis e elas podem ser categorizadas em diferentes grupos. Por exemplo, se você estiver criando um formulário para um usuário selecionar seu país, talvez queira agrupar os países em regiões como Ásia, Europa, América do Norte, etc. Isso torna mais fácil para o usuário encontrar o país em que está procurando por.

Atributos

Global

Em HTML, a Tag <optgroup> também aceita Atributos Globais .

Evento

Em HTML, a tag <optgroup> também aceita atributos de evento .

Lista de Atributos

Atributo	Valor	Visão geral
desabilitado	desabilitado	Isso indica que um grupo de opções deve ser desabilitado.
rótulo	texto	Fornece um rótulo para um grupo de opções.

Compatibilidade do navegador

Elemento
<optgroup>	Sim	Sim	Sim	Sim	Sim

Marcar vantagens optgroup

As vantagens de usar a tag “ optgroup ” em HTML incluem:

A tag “optgroup” ajuda a organizar as opções dentro de um elemento select, tornando mais fácil para os usuários encontrarem a opção que precisam.
Ao agrupar as opções relacionadas, a tag “optgroup” pode tornar o elemento de seleção mais fácil de ler e entender.
O uso da tag “optgroup” pode ajudar a garantir consistência em diferentes navegadores e dispositivos, tornando seu site mais fácil de usar.
A tag “optgroup” fornece informações valiosas para leitores de tela e outras tecnologias assistivas, tornando seu site mais acessível para pessoas com deficiência.
A tag “optgroup” pode ser personalizada usando CSS, permitindo que você estilize as opções dentro de cada grupo para se adequar ao design do seu site.
Usar a tag “optgroup” pode tornar seu código mais eficiente, reduzindo o tempo de carregamento e melhorando o desempenho.

Se este artigo foi informativo o suficiente para aumentar suas habilidades educacionais, compartilhe essas informações significativas com seus amigos também clicando nos links abaixo.

Nós valorizamos o seu feedback.

Marca HTML <optgroup>

Example:

Example:

Example:

Uso de tag optgroup

Atributos

Global

Evento

Lista de Atributos

Compatibilidade do navegador

Marcar vantagens optgroup

Sentindo entediado?