Checkbox HTML: como utilizar este recurso em seu formulário

Checkbox HTML

Ao criar um formulário no HTML, podemos incluir nele diversos campos, dentre os quais uma opção muito utilizada é o checkbox. Neste artigo, vamos explicar como funciona o checkbox e como utiliza-lo no seu código HTML.

Os tópicos deste tutorial são:

O que é um checkbox

O checkBox ou caixa de checagem nada mais é que um tipo de campo que já contém informações predefinidas e que o usuário deverá marcar, tendo a opção de selecionar uma ou mais caixas. É parecido com o campo do tipo Radio, porém a principal diferença é a possibilidade de marcar mais do que uma opção. O checkbox tem como estilo padrão uma caixa quadrada que fica marcada quando selecionada, conforme exemplo abaixo:

checkbox HTML

Como inserir seu primeiro HTML checkbox

O checkbox é um tipo de campo de formulário, portanto é um dos valores definidos através do atributo Type da tag <input>. Dessa forma, incluímos um input do type=”checkbox” dentro do nosso código para poder gerar um novo camp, conforme mostra o exemplo a seguir:

Com o código acima, teremos como resultado:

Exemplo 1 de checkbox HTML

Vamos agora para um exemplo com diversos checkbox:

O resultado do código acima será:

Exemplo 2 de checkbox HTML

Porém, ao utilizar apenas o atributo type, ao clicar nos checkbox, o usuário vai ver a seleção, mas ainda assim, não será retornado nenhum valor. Por isso, vamos ver agora como acrescentar valores às caixas de checagem.

Atribuindo valores para o checkbox HTML

Vamos agora entender como atribuir um valor ao elemento checkbox. Isso é muito importante, pois caso não seja definido, ao receber um formulário que contenha checkbox, você não terá como saber quais foram selecionados ou não. Ainda é importante também para quem precisa fazer modificações na DOM através da seleção de cada checkbox. Portanto, sem o valor, o checkbox não é nada além de uma caixinha na sua página.

Para atribuir um valor, basta acrescentar o atributo value=”…”. Assim você define qual será o valor de cada checkbox. Vejamos então o exemplo utilizado anteriormente, mas agora com o atributo value:

Dessa forma, o resultado visual será o mesmo do anterior, porém, agora, ao ser selecionado, receberemos um valor de cada um com seus respectivos values.

Grupos de checkbox

Além de incluir um valor para cada checkbox, você ainda pode atribuir um grupo a eles. Dessa forma, os checkbox ficam com dois valores, sendo o primeiro o valor do grupo e o segundo, o valor individual.  Para isso, basta incluir o atributo name=”…”. Dentro do nome, vamos colocar um mesmo nome para todos os checkbox pertencentes a um único grupo. Digamos por exemplo que você queira criar um grupo de cores, utilizando ainda o exemplo anterior:

O resultado visual, assim como ao atribuir o valor individual, será o mesmo, porém agora, receberá os valores de name e de value.

Vejamos agora o exemplo abaixo, onde além de cores, acrescentaremos outro grupo de checkbox HTML chamado de animal:

Desta forma, o resultado será:

Exemplo 3 de checkbox HTML

Visualmente, não ha nenhuma diferenciação visual entre os grupos, somente nos valores que retornam quando o formulário é preenchido.

Checkbox HTML pré-selecionado

Outro atributo que podemos incluir ao checkbox HTML é o atributo checked. Os checkbox possuem valores boleanos, ou seja: “verdadeiro” ou “falso”. Dessa forma, ao atribuir o checked a um checkbox, o mesmo passa a ter um valor verdadeiro, inicialmente. Com isso, podemos deixar alguns checkbox pré-selecionados. Vejamos no exemplo a seguir onde deixaremos os checkbox referente às cores amarelo e vermelho já pré-selecionados:

O resultado visual do código anterior será:

Exemplo 4 com pré-seleção

Este recurso é muito utilizado nos checkbox HTML para estratégias de marketing.

Utilizando labels em conjunto com o checkbox

Algo muito utilizado em formulários é a tag <label>, onde podemos inserir o atributo for que irá se referir a um id de outro elemento. Nesse caso, devemos acrescentar ao nosso checkbox um id, e após isso, incluir um label com o atributo for. Se deixarmos sem o for, o label aparecerá da mesma forma, mas ao ser clicado, não irá alterar nosso valor do checkbox. Com o for, podemos alterar o valor do checkbox clicando no próprio label, e não ficando restrito apenas à caixa.

Veja o exemplo abaixo, onde vamos aplicar um label para cada checkbox com o atributo for utilizando o valor da id do checkbox:

O resultado será então:

Exemplo 5 com label

Ao escrever o código acima, experimente então clicar no label e não diretamente no checkbox. Assim você entenderá na prática a funcionalidade do atributo for para o label.

Estudos e funcionalidades do checkbox

Com todas as informações apresentadas até agora nesse artigo, você já deve ser capaz de incluir checkbox em suas páginas HTML.

Porém, vale a pena se aprofundar em outras funcionalidades que esse elemento possibilita. Os checkbox podem ser utilizados não apenas para formulários estáticos, mas podem integrar sistemas mais complexos incluindo, por exemplo, funcionalidades que só serão executadas conforme a seleção do checkbox.

Enfim, na programação é possível realizar diversas funções em conjunto ao checkbox HTML. Recomendamos o estudo e prática de tudo que foi apresentado aqui, além disso, caso já tenha conhecimentos básico de CSS, pode estilizar os seus checkbox. Em conjunto com JavaScript, PHP ou outras linguagens, você pode criar sistemas de validação para seus checkbox, e assim inserir funcionalidades apenas quando uma caixa for marcada. Experimente seguir esses passos e logo mais você estará criando diversos sistemas complexos através das checkbox!

Publicado por

Rafael Marques

Desenvolvedor Web especialista em Front End apaixonado por tecnologia! www.instagram.com/rm.developer/ linkedin.com/in/rafamarquesrmb/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

hhchat