Criando um formulário em HTML. Como é feita uma lista suspensa em html? Criando grupos de elementos suspensos de listas de formulários

Olá queridos leitores do blog. Como parte do estudo dos meandros, como próxima tarefa, continuaremos a analisar os detalhes da criação de formulários no site usando os apropriados.

Hoje vamos aprender a criar listas suspensas (drop-down), inclusive com múltipla escolha, usando select e option, como construir campo de texto através de textarea, e também falar sobre a possibilidade de estender a funcionalidade dos formulários usando tags conjunto de campos, rótulo e legenda.

Deixe-me lembrá-lo que qualquer formulário presente na página é criado usando e destina-se a inserir qualquer informação do usuário e enviá-la ao servidor (exemplo -).

Infelizmente, as ferramentas de linguagem de marcação de hipertexto não nos permitem processar essas informações diretamente, portanto, com o HTML, criamos apenas a aparência do formulário, e os dados necessários são enviados para processamento. Para isso, um arquivo especial escrito em uma das linguagens do servidor (na maioria das vezes PHP) é criado propositalmente no servidor web. Digamos, para feedback, você pode criar um arquivo mail.php, que será o manipulador.

No uso prático das informações recebidas nesta publicação, não se esqueça de como ela deve ficar, onde os códigos de todos os elementos visíveis da página, incluindo formulários, estão sempre dentro da tag body.

Essas informações são essenciais, pois mesmo que você use todas as ferramentas de desenvolvedor internas modernas (lembro que o primeiro login na implementação dessa funcionalidade foi), você deve entender claramente o mecanismo para usar as tags principais, depois editar o HTML código, cuja necessidade surge de tempos em tempos, se transforma em uma atividade divertida.

2. múltiplo- este atributo, que não possui parâmetros, permite seleção múltipla, diferentemente do exemplo acima, onde você pode selecionar apenas um elemento (linha). Tente selecionar várias linhas desta lista com o mouse de uma só vez (uma a uma em qualquer lugar, mantendo pressionada a tecla Ctrl, ou por meio de Shift seguindo uma linha uma a uma):

3. Tamanho- define a altura da lista suspensa, ou seja, o número de linhas exibidas. Se o atributo múltiplo estiver presente e o tamanho não for especificado (como no exemplo acima), então por padrão quatro linhas são exibidas, e, por exemplo, com size="5" cinco ficarão visíveis:

Legenda do conjunto de campos do rótulo da área de texto da opção

4. Requerido(não tem parâmetros) - especifica que uma escolha deve ser feita antes de enviar dados para o manipulador. Se um elemento da lista não for selecionado, os dados do formulário não serão enviados:

Legenda do conjunto de campos do rótulo da área de texto da opção

5. auto-foco(não importa) define o foco para a lista logo após a página ser carregada. Além disso, se o usuário estiver acostumado a fazer a maioria das ações com as teclas, apenas esse foco pré-configurado ajudará a fazer uma escolha da lista usando as setas do teclado sem usar o mouse:

6. Desativado(sem parâmetros) - bloqueia o acesso à lista (desativa). Na prática, geralmente é usado junto com scripts nos casos em que você precisa habilitar uma lista suspensa apenas se determinadas condições forem atendidas:

7. Forma— vincula a lista a um ou mais formulários aos quais ela pertence, mas está fora do contêiner

. Ao mesmo tempo, o parâmetro é escrito no papel do valor do atributo de formulário atributo de ID global, que é adicionado à tag de formulário:

Selecione na lista Opção Textarea Label Fieldset Legend

Não confunda o atributo da tag select com a tag principal para criar o formulário. No exemplo acima, o atributo id="data" é adicionado à tag form, e o atributo form="data" é adicionado à tag select, o que possibilitou associar a lista suspensa a um formulário específico.

atributos de tag de opção

1. valor- determina o valor da lista suspensa que será enviado ao servidor (manipulador de formulário). Na verdade, o nome é enviado para o manipulador, que é definido pelo atributo name da tag select, e valor(para este exemplo - 1, 2, 3, 4, 5), correspondente à linha selecionada da lista suspensa:

Legenda do conjunto de campos do rótulo da área de texto da opção

2. Desativado— bloqueia o elemento da lista suspensa para seleção.

Legenda do conjunto de campos do rótulo da área de texto da opção

Como você pode ver no exemplo, a linha "Option" está inativa e não pode ser selecionada.

3. rótulo- exibe o conteúdo do texto (que é seu valor) de um ou outro elemento da lista. Se o rótulo estiver presente, a string idêntica ao valor desse atributo será exibida e o conteúdo do texto dentro da tag de opção será ignorado. O mesmo acontece se o conteúdo entre está completamente ausente.

Tag de área de texto Tag de rótulo Tag de conjunto de campos Tag de legenda

Ver. No exemplo fornecido acima, a primeira linha para opção no código está vazia (no lado esquerdo da tabela), mas o parâmetro label="Option tag" é especificado, como resultado, este texto apareceu na lista (no O lado direito). A segunda linha de código contém o texto "Textarea Tag" como conteúdo da tag de opção, mas a lista suspensa à direita mostra a palavra "Textarea", que corresponde ao valor de label="Textarea".

4. Selecionado- destaca o item atual da lista suspensa:

Legenda do conjunto de campos do rótulo da área de texto da opção

Se o atributo múltiplo estiver presente, mais de um elemento poderá ser selecionado:

Legenda do conjunto de campos do rótulo da área de texto da opção

atributos da tag optgroup

Se a lista suspensa precisar ser classificada de alguma forma, por exemplo, dividida em grupos, para cada um desses grupos é usado um contêiner, consistindo nas tags optgroup de abertura e fechamento, que contém parte dos itens da lista suspensa. No entanto, existem dois atributos para personalizar essa lista suspensa.

1. rótulo- define o nome de cada grupo como parâmetro:

Legenda do conjunto de campos do rótulo da área de texto da opção

O mesmo, mas com multiple e size="7" da tag select:

Legenda do conjunto de campos do rótulo da área de texto da opção

2. Desativado(sem valores) - bloqueia a seleção de elementos do grupo em relação ao qual está definido, além disso, os itens inativos geralmente ficam em cinza:

Legenda do conjunto de campos do rótulo da área de texto da opção

Um pequeno vídeo seria muito útil aqui:

Campo de texto no formulário via textarea

Outro elemento de formulário para o site que consideraremos é um campo com a capacidade de inserir texto de várias linhas nele. Ele pode ser criado usando a tag textarea. Sem atributos padrão, aplicar essa tag produzirá o seguinte resultado:

Digite o texto:

Digite o texto:

No campo, você pode realizar quebras de linha, enquanto o texto será transferido para o manipulador no servidor, levando em consideração as alterações feitas. O campo pode ser esticado em largura e comprimento segurando o canto inferior direito, marcado com duas listras diagonais, com o mouse.

Agora vamos tentar adicionar vários atributos com parâmetros ao código original:

1. Nome- Especifica o nome da área de texto como um valor para identificá-la depois que os dados do formulário são enviados quando são processados ​​no servidor.

2. Colunas- largura do campo, que como parâmetro é definido pelo número de caracteres idênticos colocados lado a lado, colocados horizontalmente. O valor padrão é 20.

3. Linhas- a altura do campo de texto, determinada pelo número de linhas. Se o número de linhas de texto digitado pelo usuário for maior que o valor especificado por este atributo, uma barra de rolagem vertical aparecerá à direita.

4. Comprimento máximo- Especifica o número máximo de caracteres que podem ser colocados no campo de texto. Se o limite for excedido, não será possível inserir mais entradas.

Abaixo está um exemplo com todos os atributos acima, o efeito de cada um dos quais você pode verificar simplesmente colocando o número necessário de letras e linhas na área de texto (você pode simplesmente digitar o mesmo caractere várias vezes):

Digite o texto:

Digite o texto:

5. minlength- Especifica o número mínimo de caracteres que devem ser inseridos na área de texto. Caso o usuário tente enviar um texto com menos caracteres, o navegador exibirá uma mensagem curta com informações que mencionarão a necessidade de preenchimento do conteúdo do formulário e quantos caracteres já foram inseridos.

7. Somente leitura(sem parâmetros) - se este atributo estiver anexado à área de texto, o campo de texto ficará inacessível para os usuários alterarem e será somente leitura. Mas você pode focar nele (mova o cursor para o campo e clique com o botão esquerdo), bem como selecionar e copiar (parcial ou completamente) o texto:

Mais alguns atributos que implementam funcionalidades adicionais ao preencher campos:

8. autocompletar- indica se o navegador deve dar dicas quando o usuário preencher o formulário com base nos dados inseridos anteriormente e possibilita a inserção automática do texto apropriado.

Tem um total dois parâmetros: em(em e fora(desligado). Aqui está um código de exemplo:

Digite o texto:

Este atributo, definido como "on", só funciona quando o navegador da web do usuário possui campos de formulário de preenchimento automático habilitados.

9. Enrolar- define as regras de quebra de linha do navegador na área de texto usando três valores:

Suave- um conjunto de caracteres que não cabe no campo em largura é automaticamente quebrado em uma nova linha. Ao mesmo tempo, o processador o texto será enviado como uma única linha. Caso o usuário envolva o texto em qualquer local desejado usando a tecla "Enter", esse encapsulamento será salvo ao enviar o formulário da web.

Digite o texto:

Digite o texto:

Difícil- a hifenização é realizada automaticamente se o texto não couber na largura do campo e, quando enviado ao manipulador, os locais de tal hifenização serão salvos. Esta configuração só é usada em em conjunto com o atributo cols:

Digite o texto:

Digite o texto:

Fora- desativar quebras de linha. Se você digitar um fragmento de texto sem transferência mecânica usando a tecla "Enter", todo o texto será colocado em uma linha e uma barra de rolagem horizontal aparecerá:

Digite o texto:

Digite o texto:

10. auto-foco(sem parâmetros) - Inicia o foco no campo de texto quando a página com o formulário é carregada.

11. Desativado- ao contrário do atributo readonly (que também proíbe a edição do conteúdo do campo, mas permite focar nele), ele bloqueia completamente o acesso à área de texto, que geralmente é pintada de cinza:

Saudações a todos os leitores do meu blog. Hoje eu vou te dizer como fazer uma lista suspensa em html, quais tags e atributos você precisa usar, e também para quais propósitos você pode precisar.

A tag de seleção e a criação de uma lista suspensa

Assim, uma lista suspensa em html é criada usando uma tag de seleção pareada, na qual as tags de opção pareadas são colocadas. É neles que ficam registradas todas as opções que serão oferecidas ao clicar na lista. Exemplo:

Escolha um animal

Nesse caso, o que é exibido entre a parte de abertura e fechamento da opção, você verá na tela, e o valor contido no atributo value será enviado ao servidor ou processado por meio de um script.

A lista em html pode ser normal, e com múltipla escolha. Para possibilitar a seleção de vários itens, você precisa adicionar um atributo múltiplo vazio ao select . Para selecionar vários valores, segure ctrl e pressione o botão esquerdo do mouse.

Outro atributo útil é o tamanho. Ele permite que você escolha quantas linhas mostrar na lista suspensa.

Outro atributo está desabilitado. Isso torna a lista inacessível para clicar e visualizar itens, mas ao mesmo tempo fica visível na página.

Obrigatório é um atributo html5. Se definido, o formulário não será enviado a menos que um valor seja selecionado na lista suspensa. Em geral, torna-se uma escolha obrigatória. Enquanto o atributo não funciona em todos os navegadores.

atributos de tag de opção

Na verdade, select serve apenas como um container para itens de lista, eles próprios são definidos usando a tag option. Tem um parâmetro de valor, como já descobrimos, mas existem outros além deste. Por exemplo:
Desativado - torna o item da lista indisponível para seleção. Ele será exibido, mas você não pode clicar nele.

Selecionado - O elemento será selecionado por padrão. Em uma lista regular, esse atributo sem valor pode ser definido como apenas um item, em uma lista múltipla, para vários.

Esclarecimentos importantes para o correto funcionamento

Caso o resultado da seleção precise ser enviado ao servidor ou processado através de scripts, então coloque o select no formulário para que não ocorram erros. O fato é que a lista suspensa foi originalmente criada exatamente como um dos elementos do formulário.

Para que serve a seleção?

Normalmente, pode ser útil se você estiver se registrando em seu site ou quiser realizar uma pesquisa. O elemento tem uma desvantagem - ele não altera muito bem a aparência através do css.

Por padrão, quando você clica na lista, aparece um quadro azul, os itens da lista sobre os quais o cursor está passando são destacados na mesma cor. Para que quando você clicar o quadro não apareça, ou seja destacado em uma cor diferente, você pode escrever o seguinte seletor:

selecione: foco(
contorno: laranja sólido de 1px;
}

O quadro agora será laranja.

A opção também pode ser estilizada, mas quando você passa o mouse sobre um item, seu plano de fundo fica azul e, por algum motivo, isso não muda nos estilos.

Opção(
cor marrom
fundo: água;
}

A propósito, talvez um de vocês saiba como alterar a cor de fundo ao passar o mouse sobre um item usando css?

Isso, na verdade, é tudo sobre a tag select e sua aplicação. Nenhum recurso adicional em html é fornecido para ele. Todas as outras operações com ele podem ser feitas usando javascript e php. Por exemplo, se você precisa criar uma lista para escolher um ano de nascimento e pode haver 80-100 opções diferentes, você as escreveria manualmente?

Só para isso, você precisa usar programação, ou seja, o loop. Bom, tudo bem, isso é assunto para outra conversa, mas por hoje esta é toda a informação que eu queria te contar. Você pode se familiarizar com outras tags básicas em html.

A tag de opção HTML é usada para criar uma lista suspensa que permite ao usuário selecionar uma opção de um conjunto predefinido de valores.

O texto visível para o usuário pode ser diferente do texto especificado no atributo value. Veja como você pode criar uma lista suspensa:

  • A lista suspensa é criada usando a tag definir opções para selecionar usando uma tag
  • Na etiqueta

Você também pode definir uma classe CSS em vez de usar um ID para estilizar a lista suspensa.

Na próxima seção, mostrarei exemplos de como usar a lista suspensa HTML em JavaScript/JQuery. Os exemplos também mostrarão como estilizar

Usando o atributo de valor

Conforme mencionado anteriormente, o valor do atributo value pode ser diferente do texto exibido na página. Por exemplo, você pode exibir os nomes de países ou cores para usuários e usar códigos de acesso no atributo value.

No exemplo a seguir, criaremos uma lista suspensa com um atributo value:

Ver demonstração e código online

Para etiqueta

Um exemplo de acesso à opção selecionada em JavaScript

Agora vamos criar um exemplo de acesso ao valor da opção selecionada e realizar algumas ações. A mesma lista do exemplo acima, criamos com opções de cores. Uma vez selecionado, clique no botão para aplicar essa cor ao documento:

Ver demonstração e código online

O valor da opção HTML usa o seguinte código:

A seguinte linha de código é usada em JavaScript para acessar o valor do atributo value da opção o valor é diferente do texto. Depois de escolher uma cor, o jQuery exibe o texto visível no alerta. Código da etiqueta

Veja como esse valor é acessado em HTML selecionar opção JavaScript selecionado:

var selectedcolor = $("#jqueryselect option:selected").text();

Você também pode acessar o valor usando o método jQuery $.val():

var cor selecionada = $("#jqueryselect").val();

Substitua esta linha no exemplo acima e o código exibirá o valor shortcode/color no atributo value em vez do texto visível.

Um exemplo de obtenção de um valor em um script PHP

Neste exemplo de obtenção do valor da opção selecionada na lista suspensa, o formulário é criado usando a tag

E aqui está como o script PHP é usado para obter o valor da opção de seleção HTML:

".$_POST["selphp"].""; } ?>

Se o formulário tiver um método GET, use Matriz PHP $_GET[“”].

Definindo estilos suspensos com CSS

Agora vamos ver como estilizar a lista suspensa.

Neste exemplo, marcamos

No navegador fica assim:

Agrupando itens de menu

Vamos considerar a seguinte tag Um que é usado para agrupar dados relacionados em uma lista suspensa nome="preto&branco"> label="lista branca">

Neste exemplo, selecionamos 2 grupos com a tag . O atributo label do elemento especifica o nome do grupo selecionado em negrito:

No exemplo a seguir, usando o atributo booleano desativado, desabilitaremos um grupo (" Grupo B"):

</span> Um exemplo de uso do atributo disabled de uma tag HTML <optgroup><span>

O resultado do nosso exemplo:

Desativando a lista e a seleção múltipla

</span> Os atributos desabilitados e múltiplos da tag <select><span>

Neste exemplo, criamos duas listas suspensas. Para a primeira lista, usamos o atributo disabled, que impede a interação com a lista (desativa).

Para a segunda lista, usamos o atributo multiple, que indica que é permitido selecionar várias opções da lista de uma só vez (via ctrl no Windows e através comando no Mac).

No navegador fica assim:

Área de texto

O resultado do nosso exemplo:

Desativando a área de texto

Por analogia com os elementos considerados anteriormente, a tag


type = "submit" name = "submitInfo" value = "(!LANG:submit" > !}

Neste exemplo, criamos duas áreas de texto (elemento