Tag HTML <opção>
Veremos a opção Tag HTML com exemplos neste post. Deve atender às necessidades de aprendizagem.
A tag <option> em HTML é usada para definir uma opção em uma lista suspensa, que geralmente é colocada dentro de uma tag <select> . O conteúdo da tag <option> é o texto exibido ao usuário na lista suspensa.
Existem seis opções na lista suspensa:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
for="laptops"Choose a Laptop:
id="laptops"
value="dell"Dell
value="hp"HP
value="apple"Apple
value="lenovo"Lenovo
value="alienware"Alienware
value="asus"Asus
O uso de um <option> dentro de um elemento <datalist> é o seguinte:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
id="compiler "
value="Sublime Text"
value="Atom"
value="Visual Studio Code"
value="Notepad++"
value="Bluefish"
value="Brackets"
value="Codeshare.io"
value="VIM"
for="browser"Choose your code editor from the list
list="compiler " name="compiler " id="compiler "
A implementação de <option> em elementos <optgroup> é a seguinte:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
for="laptops"Choose a Laptop:
name="laptops" id="laptops"
label="United States Laptops"
value="dell"Dell
value="HP"HP
label="Taiwan laptops"
value="acer"Acer
value="asus"Asus
Aqui está outro exemplo da tag <option>:
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
<!DOCTYPE html>
label="Europe"
value="france"France
value="germany"Germany
value="italy"Italy
value="spain"Spain
label="North America"
value="canada"Canada
value="mexico"Mexico
value="usa"USA
label="South America"
value="argentina"Argentina
value="brazil"Brazil
value="chile"Chile
CSS também pode ser aplicado à tag <option> aqui está como:
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>
select {
width: 300px;
padding: 8px;
border-radius: 8px;
font-size: 20px;
}
optgroup {
font-weight: bolder;
}
option {
color: rgb(0, 20, 237);
}
label="Europe"
value="france"France
value="germany"Germany
value="italy"Italy
value="spain"Spain
label="North America"
value="canada"Canada
value="mexico"Mexico
value="usa"USA
label="South America"
value="argentina"Argentina
value="brazil"Brazil
value="chile"Chile
Índice-
Uso da opção de marcação
A opção Tag <option> especifica uma opção em uma lista de seleção .
Os elementos <option> estão contidos em um elemento <select> , <optgroup> ou <datalist> .
IMPORTANTE: Embora a tag <option> possa ser aplicada com ou sem atributos, normalmente é necessário utilizar o atributo value, que determina o que é transmitido ao servidor quando um formulário é submetido.
Uso regular da etiqueta de opção
Aqui estão alguns usos regulares da tag <option> em atividades diárias de desenvolvimento web:
- A tag <option> é usada para definir cada opção em um menu suspenso. Os usuários podem selecionar uma opção da lista clicando nela.
- A tag <option> pode ser usada para definir uma opção padrão selecionada na lista suspensa. Isso é feito adicionando o atributo selecionado à opção desejada.
- A tag <option> pode ser agrupada usando a tag <optgroup>. Isso é útil quando você deseja categorizar opções na lista suspensa.
- A tag <option> também pode ser usada para vincular dados a cada opção. Isso é feito usando o atributo value, que especifica o valor associado a cada opção. Este valor pode ser usado para identificar a opção selecionada no lado do servidor quando o formulário é enviado.
Conselho: Quando você tem muitas opções, pode agrupá-las usando a tag <optgroup> .
Atributos
Global
A opção Tag <option> inclui os Atributos Globais em HTML.
Evento
A opção Tag <option> inclui os atributos do evento em HTML.
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. |
| selecionado | selecionado | Uma opção pré-selecionada é exibida quando a página é carregada. |
| valor | texto | Fornece ao servidor o valor que ele deve enviar. |
Compatibilidade do navegador
| Elemento |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <opção> | Sim | Sim | Sim | Sim | Sim |
<opção> Vantagens da etiqueta
Aqui estão algumas vantagens de usar a tag <option> em HTML:
- A tag “opção” permite que você crie uma ampla variedade de opções que os usuários podem escolher, facilitando a personalização do elemento selecionado para atender às suas necessidades.
- A tag “opção” facilita a leitura e compreensão das opções disponíveis, o que pode ajudar os usuários a tomar decisões informadas.
- A tag “option” fornece informações valiosas para leitores de tela e outras tecnologias assistivas, tornando seu site mais acessível para pessoas com deficiência.
- O uso da tag “option” pode ajudar a garantir consistência em diferentes navegadores e dispositivos, tornando seu site mais fácil de usar.
- Usar a tag “option” pode tornar seu código mais eficiente, reduzindo o tempo de carregamento e melhorando o desempenho.
- A tag “option” pode ser customizada usando CSS, permitindo que você estilize as opções de acordo com o design do seu site.
Deixe sua reação abaixo como uma fonte de encorajamento ou para sugerir algum feedback valioso para a melhoria deste site.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
