Exemplo " Nota: devido a de várias maneiras selecionando vários itens e notificando adicionalmente os usuários de que várias opções estão disponíveis, é recomendado usar caixas de seleção em vez de uma lista suspensa.
Nome: Define o nome da lista suspensa. Ele pode ser usado para acessar dados do formulário após seu envio ou para fazer referência a um elemento em JavaScript.
tamanho: especifica o número de opções visíveis na lista suspensa. Se o valor do atributo size for maior que 1, mas menor que o número total de opções na lista, o navegador adicionará automaticamente uma barra de rolagem para indicar que há mais opções para visualizar.
Última atualização: 08/04/2016
O elemento select cria uma lista. Dependendo das configurações, pode ser uma lista suspensa para selecionar um elemento ou uma lista expandida na qual você pode selecionar vários elementos de uma vez.
Vamos criar uma lista suspensa:
Enviar
iPhone 6s
maçã
iPhone 6s
Lumia 950
nexo 5x
Com o atributo selecionado podemos definir o elemento selecionado padrão - não precisa ser o primeiro elemento da lista:
Outro atributo, desabilitado, pode ser utilizado para evitar que um elemento específico seja selecionado. Normalmente, elementos com este atributo são usados para criar títulos:
iPhone 6s
Lumia 950
nexo 5x
Selecione o modelo
Vamos criar uma lista suspensa:
Para criar uma lista de múltipla escolha, você precisa adicionar o atributo multiple ao elemento select:
Mantendo pressionada a tecla Ctrl, podemos selecionar vários elementos dessa lista:
:
Vamos criar uma lista suspensa:
Lumia 650
O uso de grupos de itens se aplica a listas suspensas e de seleção múltipla. Muitas vezes, ao se cadastrar ou pesquisar em sites, você é solicitado a fazer algo seleção na lista suspensa . Por exemplo, selecione seu país entre muitos outros países. Todos estes são elementos diferentes do formulário, podem ser desenhados de diferentes maneiras: desde simples HTML5 complexo .
CSS3 Hoje veremos um exemplo de design de um campo de seleção usando HTML/CSS e um ícone Fonte incrível
. Mas começaremos, como sempre, com a marcação do documento.
Código HTML Dentro de uma etiqueta selecione existem itens da lista suspensa opção Dentro de uma etiqueta . Por sua vez, tags E forma aninhado em um contêiner comum divisão E . Marcação
Posicionando o contêiner com a classe caixa no centro da janela.
Caixa(
Conectamos a fonte do ícone antes da tag de fechamento com antecedência cabeça .
Estilizando o seletor
Definimos as dimensões do campo de seleção - 250x50 pixels e fazemos os campos dos itens com 10 pixels em todos os lados.
Seleção de caixa (
Removendo a moldura e o traço:
Fronteira: nenhuma;
Especificamos a cor de fundo roxa, título, cor e tamanho da fonte para listas.
Antecedentes: #ab05af;
Crie uma sombra ao redor do campo.
Sombra da caixa: 0 5px 20px rgba (0,0,0,.3);
Geralmente caixa de seleção pronto e funcionando, mas parece chato, e o triângulo que você precisa acertar com o mouse é muito pequeno. E se eu pensei assim, então o designer pensará o mesmo, precisamos nos preparar com antecedência para as diferentes opções.
Muito provavelmente, o designer substituirá o pequeno triângulo por um ícone da fonte e um ícone .
Parece muito melhor assim, mas o código ainda precisa ser escrito por um designer de layout. Qual poderia ser a solução aqui? Não vamos tocar Código HTML e use um pseudoelemento antes .
Antes do pseudoelemento para .box
A primeira coisa a fazer é anotar o código do ícone e o nome da fonte "Fonte incrível 5 grátis" . Escolha no site fontawesome.com o ícone desejado indicando “seleção” e copie seu código.
A seguir posicionamos de forma absoluta, especificamos as dimensões 50x50, a cor do ícone é branca, o fundo é roxo claro. Definimos uma propriedade muito importante eventos de ponteiro: nenhum . Isso significa que o pseudoelemento antes não é o objeto do evento do mouse, mas o valor nenhum diz ao evento "seleção do mouse" para ir para a camada inferior e acessar o elemento abaixo dela - aquele pequeno triângulo. O triângulo não desapareceu, está apenas abaixo do pseudoelemento antes , servindo apenas como decoração. Ao clicar no ícone bonito, o triângulo “feio” realmente funciona e fazemos a nossa escolha.
Olá, queridos leitores do blog. Como parte de nosso estudo de complexidades, como próxima tarefa, continuaremos analisando os detalhes da criação de formulários no site usando os apropriados.
Hoje veremos como criar listas suspensas (suspensas) , incluindo múltipla escolha, com ajude a selecionar e opção, como construir campo de texto via textarea, e também falar sobre a possibilidade de ampliar a funcionalidade dos formulários através do uso de tags conjunto de campos, rótulo e legenda .
Deixe-me lembrar que qualquer formulário presente na página é criado usando e tem como objetivo 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 permitem processar diretamente essas informações, então usando HTML nós apenas criamos aparência formulários, e os dados necessários são enviados para processamento. Para tanto, um arquivo especial é criado propositalmente no servidor web, escrito em uma das linguagens do servidor (na maioria das vezes, PHP). Digamos para opinião você pode criar um arquivo mail.php, que será o manipulador.
Ao utilizar na prática as informações obtidas 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, inclusive os formulários, estão sempre localizados dentro da tag body.
Esta informação é extremamente necessária, pois mesmo que você utilize todas as modernas ferramentas de desenvolvedor integradas a elas (deixe-me lembrá-lo, o primeiro sinal na implementação desta funcionalidade foi), você deve entender claramente o mecanismo de utilização das tags principais, então editar o código HTML, cuja necessidade surge de vez em quando, se tornará uma atividade prazerosa.
2. Múltiplo — este atributo, que não possui parâmetros, permite seleção múltipla, diferentemente do exemplo acima, onde é possível selecionar apenas um elemento (linha). Tente destacar em esta lista com o mouse várias linhas ao mesmo tempo (uma de cada vez em qualquer lugar, mantendo pressionada a tecla Ctrl ou usando Shift seguindo uma após a outra):
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 valor do 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:
4. Obrigatório (não possui parâmetros) — define que uma seleção deve ser feita antes de enviar dados ao manipulador. Se um elemento da lista não for selecionado, os dados do formulário não serão enviados:
5. Foco automático (não importa) - define o foco para a lista imediatamente após o carregamento da página. Além disso, se o usuário está acostumado a realizar a maioria das ações usando teclas, então esse foco pré-configurado ajudará a fazer seleções na lista usando as setas do teclado sem usar o mouse:
6. Desabilitado (sem parâmetros) - bloqueia o acesso à lista (desabilita). Na prática, geralmente é usado em conjunto com scripts nos casos em que você precisa habilitar uma lista suspensa somente quando determinadas condições forem atendidas:
7. Forma — comunica a lista com um ou mais formulários aos quais ela pertence, mas está localizada fora do contêiner
. Neste caso, o parâmetro é escrito como o valor do atributo do formulário ID do atributo global que é adicionado à tag do formulário:
Não confunda o atributo select tag com a tag principal do formulário. No exemplo acima, o atributo id="data" foi adicionado à tag form e form="data" foi adicionado à tag select, o que possibilitou associar a lista suspensa a um formulário específico.
Atributos de tag de opção
1. Valor — define o valor da lista suspensa que será enviado ao servidor (processador de formulários). Na verdade, o manipulador recebe um nome, que é especificado pelo atributo name da tag select, e valor valor (Para este exemplo — 1, 2, 3, 4, 5), correspondente à linha selecionada da lista suspensa:
2. Desabilitado — bloqueia a seleção de um item da lista suspensa.
Como você pode ver no exemplo, a linha “Opção” está inativa e não pode ser selecionada.
3. Rótulo — exibe o conteúdo do texto (que é seu valor) de um elemento específico da lista. Se o rótulo estiver presente, uma linha idêntica ao valor deste atributo será exibida e o conteúdo do texto dentro da tag de opção será ignorado. A mesma coisa acontece se o conteúdo entre . Por sua vez, tags completamente ausente.
Olhar. No exemplo acima, a primeira linha de option no código está vazia (no lado esquerdo da tabela), mas o parâmetro label="Option Tag" está escrito, como resultado, este exato texto aparece na lista (no o lado direito). A segunda linha do código contém o texto "Textarea Tag" como o conteúdo da tag de opção, mas o menu suspenso à direita mostra a palavra "Textarea" para corresponder ao valor de label="Textarea".
4. Selecionado — seleciona o item atual da lista suspensa:
Se o atributo múltiplo estiver presente, então é possível selecionar mais de um elemento:
Atributos da tag optgroup
Se a lista suspensa precisar ser classificada de alguma forma, por exemplo, dividida em grupos, então para cada um desses grupos será 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 configurar essa lista suspensa.
1. Rótulo — define o nome de cada grupo como parâmetro:
A mesma coisa, mas com múltiplos e size="7" da tag select:
2. Desabilitado (sem valores) - bloqueia a seleção dos elementos do grupo em relação ao qual está instalado, e os itens inativos costumam ser destacados em cinza:
Um pequeno vídeo será útil aqui:
Campo de texto em um formulário usando textarea
Outro elemento de formulário do site que consideraremos é um campo com a capacidade de inserir texto de várias linhas. Ele pode ser criado usando a tag textarea. Sem os atributos padrão, a aplicação desta tag produzirá o seguinte resultado:
É possível realizar quebras de linha no campo, e o texto será transferido para o processador no servidor, levando em consideração as alterações realizadas. O campo pode ser esticado em largura e comprimento clicando no canto inferior direito, que está marcado com duas listras diagonais.
Vamos agora tentar adicionar vários atributos com parâmetros ao código original:
1. Nome - define o nome da área de texto como um valor para identificá-la após o envio dos dados do formulário quando estes são processados no servidor.
2. Colunas — largura do campo, que é especificada como parâmetro pelo número de caracteres idênticos adjacentes 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 inseridas 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, nenhuma entrada adicional será possível.
Abaixo está um exemplo com todos os atributos acima, o efeito de cada um dos quais você mesmo pode verificar simplesmente colocando o número necessário de letras e linhas na área de texto (você pode simplesmente inserir o mesmo caractere várias vezes):
5. Comprimento mínimo — 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 pequena mensagem com informações que conterão a menção da necessidade de complementar o conteúdo do formulário e quantos caracteres já foram inseridos.
7. Somente leitura (sem parâmetros) - se você anexar este atributo à textarea, o campo de texto não será editável pelos usuários e será somente leitura. Mas você pode focar nele (mova o cursor até o campo e clique com o botão esquerdo), bem como selecionar e copiar (parcial ou totalmente) o texto:
Mais alguns atributos que implementam funcionalidades adicionais ao preencher campos:
8. Preenchimento automático — especifica se o navegador deve fornecer dicas quando o usuário preencher um formulário com base em dados inseridos anteriormente e fornece a capacidade de inserir automaticamente o texto apropriado.
Tem apenas dois parâmetros : sobre (habilitado) e desligado (desligado). Aqui está um exemplo de código:
Este atributo com valor “on” funciona apenas quando o preenchimento automático dos campos do formulário está habilitado no navegador de um determinado usuário.
9. Enrolar - define as regras do navegador para quebras de linha na área de texto usando três valores:
Macio — um conjunto de caracteres que não cabe na largura do campo é automaticamente transferido para nova linha . Neste caso, o processador o texto será enviado como uma linha . Se o usuário transferir o texto em qualquer local desejado usando a tecla “Enter”, essa transferência será salva ao enviar o formulário web.
Duro — os hifens são feitos automaticamente se o texto não couber na largura do campo e, quando enviados ao processador, os locais desses hifens serão salvos. Esta opção é usada apenas em em conjunto com o atributo cols :
Desligado — desabilitar quebras de linha. Se você imprimir 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á:
10. Foco automático (não possui parâmetros) - inicia o foco no campo de texto ao carregar a página com o formulário.
11. Desabilitado - ao contrário do atributo readonly (que também proíbe a edição do conteúdo do campo, mas permite focar nele), bloqueia completamente o acesso à área de texto, que geralmente é cinza:
Projetado para criar uma lista de itens sugeridos da qual o usuário pode selecionar um ou mais. …
Limitado a tags Atributos de etiqueta ...
...
... foco automático Recebe foco automaticamente quando a página é carregada. O valor pode ser definido de três maneiras: ...
...
... desativado Desativa a seleção na lista. O valor pode ser definido de três maneiras: multiple Permite selecionar vários itens da lista ao mesmo tempo. Observe que com a seleção múltipla, pode haver várias variáveis com o mesmo nome no fluxo de dados de um formulário.
Seu programa de processamento deve antecipar tais situações e tratá-las corretamente. ... nome Nome da lista. Atributo obrigatório.
Limitado a tags obrigatório Um item com valor não vazio deve ser selecionado. Caso isso não seja feito, o navegador exibirá uma mensagem e o formulário não será enviado ao servidor. A aparência e o conteúdo da mensagem dependem do navegador e não podem ser alterados pelo usuário (não funciona no IE e Safari). size Tamanho vertical da caixa de listagem. .
Se o atributo for omitido ou seu valor for 1, uma lista pop-up de itens será exibida. Se for especificado um número maior que 1, os itens da lista serão exibidos em uma janela com uma barra de rolagem. Se o valor do atributo for maior que o número real de itens da lista, serão adicionados itens vazios. Quando o usuário os seleciona, campos vazios são retornados.
Item da lista
Chá
café
Chá
leite
Leite ... presunto
Presunto
Queijo
Chá
Além disso, para maior clareza, cada grupo com usando CSS você pode pintá-lo em sua própria cor.
Exemplo de destaque de grupos de itens de lista com cores
Chá
HTML3.2 HTML4.0 HTML5 CSS1 CSS2 CSS3 JavaScript DHTML
