Como criar uma lista suspensa em um formulário HTML5

listas suspensas são uma característica comum em páginas da web e HTML5 faz criá-los muito infalível. listas suspensas permitem que você, o programador, para especificar um número de opções que os visitantes do seu site pode fazer sem digitar (a lista é mostrado na figura). listas suspensas são especialmente agradáveis ​​porque eles não requerem uma grande quantidade de tela imobiliário - as opções são visíveis apenas enquanto o usuário está selecionando-os.

image0.jpg

listas suspensas têm um atributo incrivelmente valioso na medida em que evitar certos tipos de erros. As opções limitadas fazer a resposta muito previsível porque você predeterminar todas as respostas possíveis. Você não tem que lidar com todas as coisas loucas usuários podem digitar em uma caixa de texto.

Em HTML5 / XHTML, listas suspensas são criados por dois tipos de objeto. A estrutura geral usa as marcas, enquanto cada uma das possíveis escolhas tem a sua própria marca, como o código para uma página web com uma lista drop-down mostra:

formDemo.html
Demonstração Form

A lista de seleção é um verdadeiro poço de energia, de modo que você deve saber como fazê-lo:

  1. Criar o primeiro elemento.

    O recipiente para a lista é um elemento. A lista completa é envolto no par.

  2. Dê o selecionar elemento de um ID.

    Você vai usar esse ID para se referir ao elemento no código.

  3. Adicionar um opção elemento para o elemento select.

    Ela ajuda a recuar as opções para lembrar-se de que eles são parte do selecionar objeto.

  4. Dê a cada opção de um valor.

    O valor é a resposta enviada de um programa quando o utilizador escolhe uma opção. O usuário não será necessariamente ver o valor.

  5. Indicar o texto que o usuário verá entre o e etiquetas.

    Isto pode ser diferente do valor, ou ao mesmo. (Isso fará mais sentido depois de fazer alguma codificação javascript.)

  6. Adicione tantas opções como você quer.

    Criar um novo objeto opção para cada escolha que você quer ter disponível na lista.

Caixas de seleção não ter para ter o comportamento drop-down. Se você quer a caixa para ocupar mais espaço vertical na página, basta especificar o número de linhas com o tamanho atributo.

Semelhante

menu