Tag <selecionar> em Html

Neste artigo, veremos a seleção de tags e forneceremos alguns exemplos para ajudá-lo a aprender melhor.

A tag <select> em HTML é usada para criar uma lista suspensa de opções para os usuários selecionarem. É um elemento de controle de formulário comumente usado em formulários da Web para permitir que os usuários selecionem uma ou mais opções de uma lista.

Criando uma lista suspensa com opções usando select:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<select>
<option value="AI">Artificial Intelligence</option>
<option value="VR">Virtual Reality</option>
<option value="IoT">Internet of Things</option>
<option value="Blockchain">Blockchain</option>
<option value="5G">5G</option>
<option value="Cloud">Cloud Computing</option>
<option value="BigData">Big Data</option>
<option value="CyberSecurity">Cyber Security</option>
</select>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Índice-

Marca <selecione> Usos

Uma lista suspensa é gerada utilizando o elemento <select> .

Mais comumente, o campo <select> é usado em formulários para coletar informações dos usuários.

O uso do atributo name fará referência aos dados do formulário após o envio do formulário (sem o atributo name, a lista suspensa não enviará dados).

Sempre que usamos Tag Select , o atributo id é necessário para vincular a lista suspensa a um rótulo. As opções na lista suspensa são determinadas pelas tags <option> contidas no elemento select.

Conselho: Para garantir a usabilidade ideal, sempre adicione a tag <label> .

Aqui está um exemplo de uma lista suspensa para selecionar um país:

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
<!DOCTYPE html>
<html>
<body>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
</select>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS também pode ser aplicado a <select> 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
<!DOCTYPE html>
<html>
<head>
<style>
select {
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: none;
background-color: #f2f2f2;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
</style>
</head>
<body>
<select>
<option value="AX">Aland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
</select>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você pode implementar CSS para tornar seu menu atraente:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Box</title>
<style>
body {
background:#2d2d2d;
display:flex;
/*justify-content: center;*/
/*align-items:center;*/
flex-wrap:wrap;
padding:0;
margin:0;
height:100vh;
width:100vw;
font-family: sans-serif;
color:#FFF;
}
.select {
display:flex;
flex-direction: column;
position:relative;
width:250px;
height:40px;
margin-left:130px;
margin-top:50px;
}
.option {
padding:0 30px 0 10px;
min-height:40px;
display:flex;
align-items:center;
background:#333;
border-top:#222 solid 1px;
position:absolute;
top:0;
width: 100%;
pointer-events:none;
order:2;
z-index:1;
transition:background .4s ease-in-out;
box-sizing:border-box;
overflow:hidden;
white-space:nowrap;
}
.option:hover {
background:#666;
}
.select:focus .option {
position:relative;
pointer-events:all;
}
input {
opacity:0;
position:absolute;
left:-99999px;
}
input:checked + label {
order: 1;
z-index:2;
background:#666;
border-top:none;
position:relative;
}
input:checked + label:after {
content:";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
position:absolute;
right:10px;
top:calc(50% -- 2.5px);
pointer-events:none;
z-index:3;
}
input:checked + label:before {
position:absolute;
right:0;
height: 40px;
width: 40px;
content: ";
background:#666;
}
</style>
</head>
<body>
<div class="select" tabindex="1">
<input class="selectopt" name="test" type="radio" id="opt1" checked>
<label for="opt1" class="option" selected>Programming Languages</label>
<input class="selectopt" name="test" type="radio" id="opt2">
<label for="opt2" class="option">Java</label>
<input class="selectopt" name="test" type="radio" id="opt3">
<label for="opt3" class="option">Python</label>
<input class="selectopt" name="test" type="radio" id="opt4">
<label for="opt4" class="option">PHP</label>
<input class="selectopt" name="test" type="radio" id="opt5">
<label for="opt5" class="option">Node Js</label>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Importância da marca de seleção de HTML

A tag <select> em HTML é um importante elemento de formulário usado para criar menus suspensos em páginas da web. Ele permite que os usuários selecionem uma ou mais opções de uma lista de opções predefinidas.

A principal importância da tag <select> é que ela fornece uma maneira amigável para os visitantes interagirem com o site. Menus suspensos criados com a tag <select> são fáceis de usar e podem economizar muito espaço na página em comparação com listar todas as opções separadamente.

A tag <select> também é útil em formulários da web onde os usuários precisam selecionar uma ou mais opções de uma lista. Ele permite que os proprietários de sites coletem dados de maneira padronizada, facilitando o processamento e a análise das informações.

Além disso, a tag <select> pode ser personalizada usando CSS para combinar com o design e a marca do site, tornando-a uma ferramenta essencial para criar interfaces visualmente atraentes e fáceis de usar.

Atributos

Global

O Tag select <select> é compatível com Atributos Globais em HTML.

Evento

O Tag select <select> também é compatível com Atributos de Evento em HTML.

Lista de Atributos

Atributos Valor Visão geral
auto-foco auto-foco Indica que, assim que a página for carregada, a lista suspensa deve receber o foco.
desabilitado desabilitado Isso permite a desativação de uma lista suspensa.
forma form_id Determina a forma da lista suspensa.
múltiplo múltiplo Permite que várias opções sejam selecionadas simultaneamente.
nome nome Fornece um nome para o menu suspenso.
obrigatório obrigatório Certifique-se de que um valor deve ser selecionado antes de enviar um formulário.
tamanho número Especifica quantas opções estão visíveis em um menu suspenso.

Compatibilidade do navegador

Elemento
<selecione> Sim Sim Sim Sim Sim

Selecione os principais benefícios da tag

Aqui estão alguns dos principais benefícios:

  • A tag <select> fornece uma maneira fácil e intuitiva para os usuários selecionarem opções de uma lista. Isso pode ajudar a melhorar a experiência do usuário em formulários da Web e outras interfaces, facilitando o fornecimento das informações necessárias pelos usuários.
  • A tag <select> é acessível a usuários com deficiências, incluindo aqueles que usam tecnologias assistivas, como leitores de tela. Isso pode ajudar a melhorar a acessibilidade de formulários da Web e outras interfaces para uma ampla gama de usuários.
  • Ao usar a tag <select> , os desenvolvedores da Web podem criar uma interface de usuário consistente em seu site ou aplicativo. Isso pode ajudar a melhorar a experiência do usuário, facilitando a navegação e a interação dos usuários com a interface.
  • O uso da tag <select> garante que seu código HTML seja válido e esteja em conformidade com os padrões da web. Isso pode ajudar a melhorar a qualidade e a capacidade de manutenção do seu código, tornando mais fácil modificá-lo e atualizá-lo no futuro.
  • Quando um formulário é enviado com um elemento <select> , o valor da opção selecionada é enviado ao servidor. Isso torna mais fácil para os desenvolvedores coletar e processar dados do usuário e pode ser usado para uma ampla variedade de propósitos, como armazenar dados em um banco de dados ou enviar e-mails.
Se este artigo foi informativo o suficiente para satisfazer seus desejos educacionais, compartilhe informações significativas com seus amigos clicando nas mídias sociais abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.