Como criar listagem suspensa de campos em HTML5

Listas suspensas em formulários em seu website são uma ótima maneira de dar aos usuários muitas opções em uma pequena quantidade de espaço na tela. Você usa duas tags HTML para criar uma lista drop-down:

• cria a lista.

  Use um nome atributo com o elemento para nomear sua lista.

• Uma coleção de elementos identifica opções de lista individuais.

  o valor atributo atribui um valor único para cada elemento.

Aqui está um exemplo de marcação para uma lista drop-down:

O navegador transforma essa marcação em uma lista drop-down com três itens, como mostrado na figura.

Você também pode permitir que os usuários selecionar mais de um item de uma lista drop-down, alterando as configurações padrão de sua lista:

• Se você quer que seus usuários possam escolher mais de uma opção (pressionando as teclas Ctrl [Windows] ou a tecla Command [Mac] enquanto clica opções na lista), adicione o múltiplo atributo para a marca. O valor de múltiplo é múltiplo.

  Se você dá um stand-alone atribuir um valor, esse valor deve ser o mesmo que o nome para o próprio atributo (isto é, tanto múltiplo e multiple = "múltiplos" são legais).

• Por padrão, o navegador exibe apenas uma opção até que o usuário clica na seta do menu drop-down para exibir o resto da lista. Use o tamanho atributo com o tag para especificar quantas opções para mostrar.

  Se você especificar menos do que o número total de opções, o navegador inclui uma barra de rolagem com a lista drop-down.

Você pode especificar que uma das opções na lista drop-down já ser selecionado quando o navegador carrega a página, assim como você pode especificar uma caixa de seleção ou botão de opção a ser selecionado. Basta adicionar o selecionado atributo para a tag que você deseja como padrão. Utilize esta opção quando uma escolha é muito provável, sabendo que os usuários podem substituir a seleção padrão rápida e facilmente.