Ao criar um formulário, podemos incluir nele diversos campos, dentre os quais uma opção muito utilizada é o checkbox HTML. Neste artigo, vamos explicar como funciona o checkbox e como utilizá-lo no seu código HTML.
Conteúdo
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:
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:
<p>Meu Checkbox:</p> <input type="checkbox" />
Com o código acima, teremos como resultado:
Vamos agora para um exemplo com diversos checkbox:
<p><b>Quais cores você gosta?</b></p> Azul: <input type="checkbox"> <br/> Amarelo: <input type="checkbox"> <br/> Vermelho: <input type="checkbox">
O resultado do código acima será:
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:
<p><b>Quais cores você gosta?</b></p> Azul: <input type="checkbox" value="azul"> <br/> Amarelo: <input type="checkbox" value="amarelo"> <br/> Vermelho: <input type="checkbox" value="vermelho">
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:
<p><b>Quais cores você gosta?</b></p> Azul: <input type="checkbox" name="cor" value="azul"> <br/> Amarelo: <input type="checkbox" name="cor" value="amarelo"> <br/> Vermelho: <input type="checkbox" name="cor" value="vermelho">
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:
<p><b>Qual suas cores e animais preferidos?</b></p> Azul: <input type="checkbox" name="cor" value="azul"> <br/> Amarelo: <input type="checkbox" name="cor" value="amarelo"> <br/> Vermelho: <input type="checkbox" name="cor" value="vermelho"> Coelho: <input type="checkbox" name="animal" value="coelho"> Cachorro: <input type="checkbox" name="animal" value="cachorro"> Gato: <input type="checkbox" name="animal" value="gato">
Desta forma, o resultado será:
Visualmente, não ha nenhuma diferenciação visual entre os grupos, somente nos valores que retornam quando o formulário é preenchido.
Como deixar um checkbox HTML marcado?
É muito comum deixarmos um checkbox marcado de forma antecipada. 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:
Azul: <input type="checkbox" name="cor" value="azul"> <br/> Amarelo: <input type="checkbox" name="cor" value="amarelo" checked> <br/> Vermelho: <input type="checkbox" name="cor" value="vermelho" checked>
O resultado visual do código anterior será:
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:
<p><b>Quais suas linguagens de programação preferidas?</b></p> <input type="checkbox" id="php" name="linguagens" value="phplang"> <label for="php">PHP</label> <br> <input type="checkbox" id="js" name="linguagens" value="jslang"> <label for="js">JavaScript</label> <br> <input type="checkbox" id="csharp" name="linguagens" value="csharplang"> <label for="csharp">C#</label>
O resultado será então:
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!
Atributos de um checkbox
Em HTML, um elemento de checkbox é criado usando a tag <input> com o atributo type definido como “checkbox”. Além disso, existem alguns atributos opcionais que podem ser utilizados para personalizar e controlar o comportamento do checkbox. Os atributos mais comuns são:
name: especifica o nome do campo de dados quando o formulário é enviado para o servidor.value: define o valor associado ao checkbox quando ele está marcado e é enviado para o servidor.checked: indica se o checkbox está inicialmente marcado quando a página é carregada. Pode ter o valor “checked” para marcar o checkbox por padrão.disabled: desabilita o checkbox, tornando-o não interativo.required: indica que o checkbox é obrigatório, impedindo o envio do formulário se não for marcado.readonly: torna o checkbox somente leitura, impedindo que o usuário o altere.
Esses são alguns dos atributos mais comuns, mas existem outros atributos disponíveis para personalizar ainda mais o estilo e o comportamento do checkbox, como class, id, style, entre outros.
Como customizar o estilo de um checkbox com CSS
Para personalizar o estilo de um checkbox em HTML, você pode usar CSS para modificar sua aparência. Aqui estão algumas maneiras de fazer isso:
- Utilizando CSS Puro: Você pode utilizar as propriedades CSS para modificar o estilo do checkbox. Por exemplo, você pode alterar a cor, tamanho, forma, fundo, borda e outros aspectos visuais. Isso é feito selecionando o elemento
<input type="checkbox">usando o seletor CSS e aplicando estilos personalizados a ele. - Utilizando Frameworks CSS: Existem vários frameworks CSS, como Bootstrap, Materialize CSS e Foundation, que fornecem estilos predefinidos para checkboxes, bem como outros componentes de interface do usuário. Esses frameworks facilitam a personalização do estilo do checkbox, fornecendo classes CSS específicas para isso. Alguns exemplos são o SemanticUI e o Pure.
- Utilizando Bibliotecas JavaScript: Algumas bibliotecas JavaScript, como o jQuery UI e o FontAwesome, oferecem recursos avançados para personalizar a aparência dos checkboxes. Essas bibliotecas geralmente fornecem temas, ícones e animações que podem ser aplicados aos checkboxes.
Lembre-se de que a personalização do estilo de um checkbox é feita principalmente por meio de CSS, portanto, é necessário ter conhecimentos básicos de CSS para realizar essas modificações.
Como receber o conteúdo de um checkbox em PHP?
Para receber o conteúdo de um checkbox em PHP, você precisa verificar se o checkbox foi selecionado (marcado) antes de processar os dados do formulário.
Ao enviar um formulário com um checkbox, você pode acessar seu estado através do array $_POST ou $_GET, dependendo do método de envio especificado no formulário (method="post" ou method="get").
Por exemplo, se você tem um checkbox com o nome “meuCheckbox” em um formulário, você pode verificar se ele foi selecionado da seguinte maneira em PHP:
if(isset($_POST['meuCheckbox'])) {
// O checkbox foi selecionado
// Faça o que for necessário com os dados do checkbox
} else {
// O checkbox não foi selecionado
// Faça algo diferente ou ignore
}
A função isset() é usada para verificar se a variável $_POST['meuCheckbox'] existe. Se existir, significa que o checkbox foi marcado e você pode realizar as ações desejadas. Caso contrário, significa que o checkbox não foi marcado.
Certifique-se de substituir “meuCheckbox” pelo nome real do seu checkbox no código acima.
Lembre-se de que, se o formulário estiver usando o método POST, você deve verificar $_POST['meuCheckbox']. Se estiver usando o método GET, verifique $_GET['meuCheckbox'].
Como deixar um checkbox marcado em JavaScript e Jquery?
Para marcar um checkbox usando jQuery, você pode usar o método .prop() ou .attr() para definir a propriedade “checked” como true. Aqui está um exemplo de como marcar um checkbox usando jQuery:
// Usando o método .prop()
$('#meuCheckbox').prop('checked', true);
// Usando o método .attr()
$('#meuCheckbox').attr('checked', 'checked');
No exemplo acima, #meuCheckbox é o seletor do elemento checkbox. Ao chamar .prop('checked', true) ou .attr('checked', 'checked'), você está definindo a propriedade “checked” do checkbox como true, o que o marcará visualmente.
Certifique-se de substituir #meuCheckbox pelo seletor correto para o seu elemento checkbox.
Lembre-se de que, ao marcar o checkbox usando jQuery, você também pode querer atualizar o valor enviado no formulário, se aplicável. Para fazer isso, você pode definir o atributo “value” do checkbox usando o método .val():
$('#meuCheckbox').val('valor-do-checkbox');
Dessa forma, substitua 'valor-do-checkbox' pelo valor que deseja enviar quando o checkbox estiver marcado.
Perguntas frequentes
Em quais versões do HTML o checkbox é suportado?
O elemento <input type="checkbox"> é suportado em todas as versões do HTML, começando pelo HTML 4 até as versões mais recentes, como HTML5. A tag <input> é um elemento fundamental do HTML e oferece diferentes tipos de input, incluindo checkbox, radio, text, etc. Portanto, independentemente da versão do HTML que você esteja utilizando, é possível usar checkboxes em seus formulários.
Posso usar um checkbox fora de um formulário HTML?
Sim, é possível utilizar um elemento <input type="checkbox"> fora de um formulário HTML. Embora seja comum usar checkboxes dentro de formulários para coletar dados dos usuários, o elemento <input type="checkbox"> em si não requer necessariamente a presença de um formulário. Você pode usar um checkbox isoladamente em uma página HTML sem problemas. No entanto, é importante lembrar que, ao usar checkboxes fora de um formulário, eles não serão automaticamente enviados ou processados como parte de uma submissão de formulário.
