Como criar uma lista drop-down para seus HTML5 e CSS3 Baseadas Páginas da Web

A lista drop-down é uma ferramenta de seleção favorita dos desenvolvedores web HTML5 e CSS3. A lista drop-down tem alguns elementos muito úteis que o tornam uma multidão pleaser enorme desenvolvimento web:

  • Ele economiza espaço na tela. Apenas a seleção atual está mostrando. Quando o usuário clica na lista, uma série de escolhas cair para baixo e, em seguida, desaparecer novamente após a seleção é feita.

  • Limita entrada. As únicas coisas que o usuário pode escolher são as coisas que você colocou na lista. Isso torna muito mais fácil lidar com as entradas potenciais, porque você não precisa se preocupar com erros de digitação.

  • O valor pode ser diferente do que o usuário vê. Esta parece ser uma vantagem ímpar, mas não vir a ser muito útil às vezes.

    image0.jpg

O código para esta lista drop-down simples segue:

basicSelect.html 

O objeto é um pouco diferente de alguns dos outros elementos de entrada que você está acostumado, como

  • É cercado por apair. Essas marcas indicam a lista inteira.

  • TheObject tem anattribute. Embora o objeto tem muitas outras tags dentro, normalmente apenas o próprio objeto tem um atributo.

  • Ele contém uma série ofpairs. Cada seleção individual encontra-se num conjunto.

  • Eachtag tem um valor associado a ele. O valor é usado pelo código. O valor não é necessariamente o que o usuário vê.

  • O conteúdo betweenis visível para o utilizador. O conteúdo é o que o usuário realmente vê.

Caixas de seleção não requerem o comportamento drop-down. Se você quiser, você pode especificar o número de linhas a serem exibidas com o atributo. Neste caso, o número de linhas que você especificar será sempre visível na tela.

menu