Como criar campos de lista suspensa na 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 de uma lista drop-down:

Video: Curso HTML 5 - Aula 9 - Criar formulario html (select, textarea e fieldset) - Parte 2



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

Video: DATALIST - Criar uma lista alternativa para campos de texto no formulário

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ê deseja que seus usuários para ser capaz de escolher mais de uma opção (mantendo pressionada a tecla Ctrl [Windows] ou a tecla Command [Mac] enquanto clica opções na lista), adicione o múltiplo atribuir ao tag. O valor de múltiplo é múltiplo.

    Se você dá um stand-alone atribuir um valor, esse valor deve ser o mesmo como o nome para a própria atributo (isto é, tanto múltiplo e múltipla =”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 o 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 de forma rápida e facilmente.


Publicações relacionadas