Introdução à lista suspensa em HTML
A lista suspensa em HTML é um elemento importante para fins de criação de formulários ou para mostrar a lista de seleção na qual o usuário pode selecionar um ou vários valores. Esse tipo de lista de seleção em HTML é conhecido como lista suspensa. É criado usando tag com valor. Ele permite que o usuário escolha qualquer opção conforme sua escolha. É sempre uma boa prática usar a lista suspensa quando você conhece o valor da opção, para que você possa definir qualquer valor como um atributo padrão e outros como valores da opção.
Vamos ver como a lista suspensa será criada:
Sintaxe:
option1
option2
option3
option3
Exemplo:
Red
Purple
Conforme mostrado na sintaxe acima, é uma tag usada para criar a lista suspensa. A etiqueta incluída na tag select é um valor de atributo ou atributos para a lista de seleção; o valor será para mostrar que a opção de clima está selecionada, desativada ou com qualquer outra propriedade.opção1, 2… .será o nome. Com a ajuda do CSS, podemos dar efeitos à nossa lista de seleção, capaz de definir posições como relativa, absoluta, etc., capaz de definir a largura e executar muitas outras funções.
Definindo a cor de fundo ou cor para o foco, usando o código:
.dropdown a:hover(
Background-color: color_name;
)
A posição da lista suspensa é definida em dois valores: posição: relativo, que é usado para exibir o conteúdo da lista exatamente logo abaixo do botão da lista de seleção. Com a ajuda da posição: absoluta;
Largura mínima é uma das propriedades usadas para atribuir uma largura específica à lista suspensa. Podemos configurá-lo contanto que nosso botão suspenso defina a largura como 100%. A sintaxe acima é definida para a seleção de atributo único. Agora, veremos como várias opções serão selecionadas na lista de itens.
Sintaxe:
option1
option2
Exemplo:
Math
English
Science
Biology
Como a lista suspensa funciona em HTML?
Depois de estudar a sintaxe agora, veremos exatamente como a lista suspensa funcionará em HTML. Existem alguns atributos usados na tag, que são os seguintes:
- Nome: Este atributo é útil para atribuir um nome ao controle que será enviado ao servidor para ser identificado e levar o valor necessário.
- Múltiplo: se o atributo estiver definido como "múltiplo", o usuário poderá selecionar vários valores na lista de seleção.
- Tamanho: o atributo Tamanho é usado para definir uma caixa de rolagem de tamanho específico em torno da lista suspensa. Também é útil para exibir várias opções visíveis da lista.
- Valor: este atributo mostrará uma opção na lista de seleção selecionada.
- Selecionado: os atributos selecionados são ativados nos pontos iniciais de carregamento da página para mostrar o item de lista já selecionado da lista.
- Etiqueta: os atributos da etiqueta funcionam como outra abordagem para o valor das opções de etiqueta.
- Desativado: se queremos mostrar uma lista suspensa com uma opção de desativação, é possível usar o atributo desativado na lista de seleção HTML.
- onChange: sempre que o usuário seleciona alguém a opção da lista suspensa, o evento é acionado na seleção do item.
- onFocus: sempre que o usuário passa o mouse na lista de seleção para selecionar uma opção da lista, ele dispara um evento para selecionar o item.
- Formulário: este atributo é usado para definir um ou vários formulários relacionados ao campo de seleção.
- disabled: Devemos manter nossa lista suspensa desativada do usuário com a ajuda deste atributo.
- obrigatório: sempre que preencher um formulário, queremos mostrar que esse campo é necessário para selecionar qualquer valor da sua lista antes do formulário de envio real; portanto, nesse caso, definimos que o usuário deve selecionar qualquer valor da lista.
Exemplos de código HTML
Os exemplos a seguir mostram como exatamente a lista suspensa será usada:
Exemplo 1
Código:
DropDown List
Sete maravilhas do mundo
Taj Mahal
Muralha da China
Cristo Redentor Satue
Machu Picchu
Chichen Itza
O Coliseu Romano
Petra
O exemplo acima contém opções diferentes, como desativado, selecionado, necessário, etc., que são mostradas na tela de saída.
Resultado:
Exemplo 2
Código:
Mumbai
Pune
Nagpur
Solapur
Latur
É possível selecionar várias opções aqui. Pressione a tecla ctrl e selecione várias opções de cada vez.
função multipleFunc () (document.getElementById ("multiselectdd"). multiple = true;
)
Como mostrado na captura de tela abaixo, para selecionar várias opções da lista suspensa, pressione o botão fornecido e, pressionando CTRL, selecione várias opções.
Resultado:
Exemplo 3
Código:
.dropdownbtn (
background-color: black;
color: white;
padding: 12px;
font-size: 12px;
)
.dropdowndemo(
position:fixed;
display: block;
)
.dropdownlist-content (
display: none;
position: absolute;
background-color: greenyellow;
min-width: 120px;
z-index: 1;
)
.dropdownlist-content a (
color: darkblue;
padding: 14px 18px;
display: block;
)
.dropdownlist-content a:hover (background-color: lightcyan;)
.dropdowndemo:hover .dropdownlist-content (display: block;)
.dropdowndemo:hover .dropdownbtn (background-color: blue;)
Demonstração suspensa ao passar o mouse
Elemento de formulários HTML
Ligações
Lista suspensa
Campo de entrada
Botão
Botões do rádio
A lista suspensa será aberta com efeito de foco.
Resultado:
Conclusão
Podemos concluir que a lista suspensa é usada para selecionar uma opção da lista de seleção. É usado para selecionar opções únicas ou múltiplas por vez. Os usuários podem selecionar uma opção da lista conforme sua escolha, para que ela se torne mais amigável. Os atributos listados acima são usados com as tags de seleção para executar várias operações de seleção com a lista suspensa.
Artigo recomendado
Este é um guia para a lista suspensa em HTML. Aqui discutimos como a lista suspensa funciona em HTML e seus exemplos com implementação de código. Você também pode consultar nossos outros artigos relacionados para saber mais -
- Visão geral do atributo de estilo HTML
- As 10 principais vantagens do HTML
- Diferentes tipos de quadros HTML com sintaxe
- Os 8 principais elementos de layout HTML
- Como criar um RadioButton?