Caixa de seleção HTML
Objetivo de caixas de seleção em html
As caixas de seleção e os botões de rádio são usados para fornecer várias opções para escolher para o usuário. No entanto, pode -se perguntar onde esses dois elementos HTML diferem então? Bem, um botão de rádio é sempre usado em situações em que você deseja restringir o usuário a escolher exatamente uma opção e não mais do que isso. Por outro lado, uma caixa de seleção é usada quando você deseja permitir que o usuário escolha mais de uma opção. Portanto, sempre que você quiser obter as opções máximas possíveis da lista fornecida, sempre usa as caixas de seleção em HTML. Para entender esse uso em detalhes, você terá que ler a próxima seção deste tutorial.
Código HTML para criar caixas de seleção
Você pode criar caixas de seleção em html muito rapidamente. Tudo o que você precisa fazer é seguir os dois exemplos abaixo para aprender este hack:
Exemplo 1: buscar a ocupação de uma pessoa
Já mencionamos que as caixas de seleção em HTML e qualquer outro idioma são sempre usadas sempre que você tiver a liberdade de escolher mais de uma opção. Portanto, nesse cenário, estaremos projetando um script html para buscar a ocupação de uma pessoa. Agora, essa pessoa pode ser um "aluno", um "professor" ou ambos. No caso da última opção, queremos dar à pessoa a liberdade de selecionar as duas caixas de seleção de uma só vez. Para elaborar essa funcionalidade, projetamos o seguinte script HTML:
Depois de usar a declaração de declaração do tipo de documento, usamos as tags "" e "" para que possamos escrever nosso script html. Então, nós usamos o “
”Bandeira do cabeçalho para especificar o título de nossa página da web. Isto é seguido pelo sinalizador "Tipo de entrada" que usamos para notificar que vamos criar uma caixa de seleção em HTML. Então, criamos um "id" e "nome" para esta caixa de seleção. Também atribuímos uma etiqueta a esta caixa de seleção. Depois disso, usamos a tag "Label" para mencionar a etiqueta contra cada uma de nossas caixas de seleção HTML. Da mesma maneira, projetamos a outra caixa de seleção. Depois disso, também criamos um botão "enviar" apenas para fazer a aparência da nossa página da web legal.
Depois de salvar e executar esse script HTML com o Google Chrome, a página da web mostrada na imagem abaixo apareceu em nosso navegador:
Agora, você pode selecionar quantas opções desta página da web quiser. Na imagem a seguir, selecionamos apenas uma das duas caixas de seleção.
Na imagem mostrada abaixo, selecionamos as duas caixas de seleção.
Para aprimorar a funcionalidade deste script HTML, você pode até projetar uma página de ação usando o PHP para que, quando pressionar o botão "Enviar" depois de selecionar a caixa de seleção desejada (s), ações relevantes são tomadas contra ele.
Exemplo 2: Selecionando o sabor favorito do milk -shake:
Às vezes, você pode até optar por projetar uma página da web muito simples enquanto estiver usando as caixas de seleção HTML sem nenhum botão de ação. Por exemplo, você pode simplesmente apresentar algumas caixas de seleção ao usuário por escolher seu sabor favorito de milk -shake. No entanto, você não quer que ele faça mais nada depois de fazer esta seleção. Tais instâncias são muito raras. Normalmente, você pede ao usuário que tome qualquer ação depois de selecionar como clicar em um botão. No entanto, ainda gostaríamos de mostrar um exemplo desse tipo. Para ilustrar este exemplo, projetamos o seguinte script HTML para você:
Neste script HTML, os essenciais do script são: a declaração do tipo de documento, as tags "" e "" são as mesmas e seus propósitos também são exatamente iguais que descrevemos em nosso primeiro exemplo. Em seguida, usamos uma etiqueta de parágrafo para exibir uma mensagem para o usuário pedindo que ele escolha seu sabor favorito de milk -shake. Um usuário pode escolher convenientemente mais de um sabor de sua escolha, se desejar. Em seguida, definimos os rótulos para essas caixas de seleção seguidas pela respectiva declaração das caixas de seleção. Você precisa notar aqui que desta vez, não usamos a tag HTML "Label" para especificar o rótulo. Pelo contrário, acabamos de definir os rótulos como é. Isso significa que é outra maneira pela qual você pode criar rótulos para suas caixas de seleção apenas para simplificar seu script html. Depois de escrever completamente este script, simplesmente salvamos este arquivo no bloco de notas com o “.Extensão HTML ”para que possa ser executada facilmente com qualquer navegador de nossa escolha.
Executamos esse script HTML enquanto usamos o Google Chrome e ele exibiu a página da web mostrada na imagem abaixo em nosso navegador:
Agora, você pode selecionar convenientemente quantas dessas caixas de seleção quiser. Isso é mostrado na imagem a seguir:
Conclusão
Com este tutorial, queríamos compartilhar com você o uso das caixas de seleção HTML da maneira mais fácil. Para isso, primeiro apresentamos você ao objetivo básico deste elemento HTML. Depois disso, explicamos dois exemplos diferentes para você que fizeram uso deste elemento HTML. Ao passar por essas explicações, você pode facilmente começar a usar as caixas de seleção HTML sempre que desejar fornecer aos usuários a flexibilidade de escolher mais de uma opção de qualquer lista de opções.