A lista suspensa mais simples em HTML é fácil de criar usando a tag de seleção. Essa é uma tag de contêiner, as tags de opção são incorporadas a ela - elas especificam os itens da lista.
Existem várias opções para listas que você podefaça usando a tag de seleção: uma lista suspensa (as opções são removidas após clicar no campo principal ou apontar o cursor para ele) e uma lista de múltipla escolha - nele o usuário pode selecionar vários itens. Os primeiros são mais comuns, eles são um elemento importante da navegação de sites modernos. Uma lista suspensa de várias seleções pode ser aplicada, por exemplo, em diretórios nos quais várias características do produto precisam ser selecionadas.
Você pode alterar a aparência e as propriedades das listas usando atributos universais e especiais.
Os atributos da tag de seleção
1. Múltipla - define a múltipla escolha.
2Tamanho - especifica o número de linhas visíveis na lista, isto é, a altura. E então tudo depende se o atributo é múltiplo ou não. Se sim, e você não especificar o tamanho, então, se houver múltiplos, o usuário verá todas as opções possíveis, mas se múltiplo estiver ausente, apenas uma linha será exibida, e o restante do visitante poderá ler quando pressionar o ícone do elevador no lado direito. Se a altura do tamanho for especificada e for menor que o número de opções, uma barra de rolagem aparecerá à direita.
3. Nome é o nome. Uma lista suspensa pode passar sem ela, mas pode ser necessário interagir com um manipulador no servidor. Por via de regra, o nome ainda indica.
A tag de seleção não possui atributos obrigatórios, ao contrário da tag de opção.
Atributos da tag de opção aninhada
- Selecionado - é para destacar um item da lista. O usuário pode selecionar mais de um item se o atributo múltiplo for especificado (veja acima).
- Valor é o valor. Este atributo é obrigatório. O servidor da Web deve entender quais itens o usuário selecionou.
- Rótulo.Com esse atributo, você pode reduzir os itens da lista que são muito longos. Por exemplo, a tela exibirá "Milão", em vez da opção "Milão - o centro administrativo da Lombardia" especificada na tag. Norte da Itália ". Este atributo também é usado para agrupar itens na lista.
Quanto à largura da lista, ela é definida por padrão de acordo com o comprimento do texto mais largo da lista. Claro, a largura pode ser alterada usando estilos HTML.
Lista suspensa de outras formas
Isso pode ser feito usando CSS, por exemplo,lista irá aparecer quando você passa o mouse sobre um item de página. Excelentes oportunidades para a criação de listas dá JavaScript, o que simplifica o trabalho da biblioteca jQuery. A lista drop-down que está conectado com esta biblioteca, pode ser muito complexo, como uma cascata. Ou seja, quando você seleciona um item em uma lista aparecerá a seguinte lista, por exemplo, não há menu "roupas femininas" (quando você passa tipos gota de roupas), então quando uma das espécies, por exemplo, "Tops" lista drop-down com os elementos: jaquetas, parques, revestimentos, revestimentos e assim por diante. n.
Listamos superficialmente os principais métodos paracom o qual você pode criar uma lista suspensa. Obviamente, existem inúmeras nuances em HTML, CSS e JavaScript que permitem alterar a funcionalidade e a aparência das listas.
