{"id":3855,"date":"2023-06-17T11:03:22","date_gmt":"2023-06-17T14:03:22","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=3855"},"modified":"2024-01-09T07:05:44","modified_gmt":"2024-01-09T10:05:44","slug":"checkbox-html","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/","title":{"rendered":"Checkbox HTML: como utilizar em seu formul\u00e1rio"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Ao criar um formul\u00e1rio, podemos incluir nele diversos campos, dentre os quais uma op\u00e7\u00e3o muito utilizada \u00e9 o checkbox HTML. Neste artigo, vamos explicar como funciona o checkbox e como utiliz\u00e1-lo no seu c\u00f3digo <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\">HTML<\/a>.<\/p>\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#O_que_e_um_checkbox\" title=\"O que \u00e9 um checkbox\">O que \u00e9 um checkbox<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#Como_inserir_seu_primeiro_HTML_checkbox\" title=\"Como inserir seu primeiro HTML checkbox\">Como inserir seu primeiro HTML checkbox<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#Atribuindo_valores_para_o_checkbox_HTML\" title=\"Atribuindo valores para o checkbox HTML\">Atribuindo valores para o checkbox HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#Grupos_de_checkbox\" title=\"Grupos de checkbox\">Grupos de checkbox<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#Como_deixar_um_checkbox_HTML_marcado\" title=\"Como deixar um checkbox HTML marcado?\">Como deixar um checkbox HTML marcado?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#Utilizando_labels_em_conjunto_com_o_checkbox\" title=\"Utilizando labels em conjunto com o checkbox\">Utilizando labels em conjunto com o checkbox<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#Estudos_e_funcionalidades_do_checkbox\" title=\"Estudos e funcionalidades do checkbox\">Estudos e funcionalidades do checkbox<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#Atributos_de_um_checkbox\" title=\"Atributos de um checkbox\">Atributos de um checkbox<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#Como_customizar_o_estilo_de_um_checkbox_com_CSS\" title=\"Como customizar o estilo de um checkbox com CSS\">Como customizar o estilo de um checkbox com CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#Como_receber_o_conteudo_de_um_checkbox_em_PHP\" title=\"Como receber o conte\u00fado de um checkbox em PHP?\">Como receber o conte\u00fado de um checkbox em PHP?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#Como_deixar_um_checkbox_marcado_em_JavaScript_e_Jquery\" title=\"Como deixar um checkbox marcado em JavaScript e Jquery?\">Como deixar um checkbox marcado em JavaScript e Jquery?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#Perguntas_frequentes\" title=\"Perguntas frequentes\">Perguntas frequentes<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<p class=\"wp-block-paragraph\"><a name=\"topico01\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-o-que-e-um-checkbox\"><span class=\"ez-toc-section\" id=\"O_que_e_um_checkbox\"><\/span>O que \u00e9 um checkbox<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O checkbox ou caixa de checagem nada mais \u00e9 que um tipo de campo que j\u00e1 cont\u00e9m informa\u00e7\u00f5es predefinidas e que o usu\u00e1rio dever\u00e1 marcar, tendo a op\u00e7\u00e3o de selecionar uma ou mais caixas. \u00c9 parecido com o campo do tipo <strong>Radio<\/strong>, por\u00e9m, a principal diferen\u00e7a \u00e9 a possibilidade de marcar mais do que uma op\u00e7\u00e3o. O checkbox tem como <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/estilos-html\/\">estilo<\/a> padr\u00e3o uma caixa quadrada que fica marcada quando selecionada, conforme exemplo abaixo:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox1.png\" alt=\"checkbox HTML\" title=\"checkbox HTML\" class=\"wp-image-3862\" width=\"179\" height=\"148\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox1.png 179w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox1-1x1.png 1w\" sizes=\"(max-width: 179px) 100vw, 179px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a name=\"topico02\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-como-inserir-seu-primeiro-html-checkbox\"><span class=\"ez-toc-section\" id=\"Como_inserir_seu_primeiro_HTML_checkbox\"><\/span>Como inserir seu primeiro HTML checkbox<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O checkbox \u00e9 um tipo de campo de formul\u00e1rio, portanto \u00e9 um dos valores definidos atrav\u00e9s do atributo <strong>Type<\/strong> da&nbsp;<strong><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/input-html\/\">tag &lt;input&gt;<\/a><\/strong>. Dessa forma, inclu\u00edmos um input do <strong>type=&#8221;checkbox&#8221;<\/strong> dentro do nosso c\u00f3digo para poder gerar um novo camp, conforme mostra o exemplo a seguir:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;Meu Checkbox:&lt;\/p&gt;\n&lt;input type=\"checkbox\" \/&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Com o c\u00f3digo acima, teremos como resultado:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox2.png\" alt=\"Exemplo 1 de checkbox HTML\" title=\"Exemplo 1 de checkbox HTML\" class=\"wp-image-3863\" width=\"648\" height=\"148\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox2.png 648w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox2-300x69.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox2-1x1.png 1w\" sizes=\"(max-width: 648px) 100vw, 648px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos agora para um exemplo com diversos checkbox:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;&lt;b&gt;Quais cores voc\u00ea gosta?&lt;\/b&gt;&lt;\/p&gt;\nAzul: &lt;input type=\"checkbox\"&gt; &lt;br\/&gt;\nAmarelo: &lt;input type=\"checkbox\"&gt; &lt;br\/&gt;\nVermelho: &lt;input type=\"checkbox\"&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O resultado do c\u00f3digo acima ser\u00e1:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox4.png\" alt=\"Exemplo 2 de checkbox HTML\" title=\"Exemplo 2 de checkbox HTML\" class=\"wp-image-3864\" width=\"648\" height=\"210\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox4.png 648w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox4-300x97.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox4-1x1.png 1w\" sizes=\"(max-width: 648px) 100vw, 648px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Por\u00e9m, ao utilizar apenas o atributo type, ao clicar nos checkbox, o usu\u00e1rio vai ver a sele\u00e7\u00e3o, mas ainda assim, n\u00e3o ser\u00e1 retornado nenhum valor. Por isso, vamos ver agora como acrescentar valores \u00e0s caixas de checagem.<br><a name=\"topico03\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-atribuindo-valores-para-o-checkbox-html\"><span class=\"ez-toc-section\" id=\"Atribuindo_valores_para_o_checkbox_HTML\"><\/span>Atribuindo valores para o checkbox HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos agora entender como atribuir um valor ao elemento checkbox. Isso \u00e9 muito importante, pois caso n\u00e3o seja definido, ao receber um formul\u00e1rio que contenha checkbox, voc\u00ea n\u00e3o ter\u00e1 como saber quais foram selecionados ou n\u00e3o. Ainda \u00e9 importante tamb\u00e9m para quem precisa fazer modifica\u00e7\u00f5es na DOM atrav\u00e9s da sele\u00e7\u00e3o de cada checkbox. Portanto, sem o valor, o checkbox n\u00e3o \u00e9 nada al\u00e9m de uma caixinha na sua p\u00e1gina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para atribuir um valor, basta acrescentar o atributo <strong>value=&#8221;&#8230;&#8221;<\/strong>. Assim voc\u00ea define qual ser\u00e1 o valor de cada checkbox. Vejamos ent\u00e3o o exemplo utilizado anteriormente, mas agora com o atributo <strong>value:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;&lt;b&gt;Quais cores voc\u00ea gosta?&lt;\/b&gt;&lt;\/p&gt; \nAzul: &lt;input type=\"checkbox\" value=\"azul\"&gt; &lt;br\/&gt;\nAmarelo: &lt;input type=\"checkbox\" value=\"amarelo\"&gt; &lt;br\/&gt; \nVermelho: &lt;input type=\"checkbox\" value=\"vermelho\"&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa forma, o resultado visual ser\u00e1 o mesmo do anterior, por\u00e9m, agora, ao ser selecionado, receberemos um valor de cada um com seus respectivos values.<br><a name=\"topico04\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-grupos-de-checkbox\"><span class=\"ez-toc-section\" id=\"Grupos_de_checkbox\"><\/span>Grupos de checkbox<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m de incluir um valor para cada checkbox, voc\u00ea 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.&nbsp; Para isso, basta incluir o atributo <strong>name=&#8221;&#8230;&#8221;<\/strong>. Dentro do nome, vamos colocar um mesmo nome para todos os checkbox pertencentes a um \u00fanico grupo. Digamos, por exemplo, que voc\u00ea queira criar um grupo de <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/\">cores<\/a>, utilizando ainda o exemplo anterior:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;&lt;b&gt;Quais cores voc\u00ea gosta?&lt;\/b&gt;&lt;\/p&gt; \nAzul: &lt;input type=\"checkbox\" name=\"cor\" value=\"azul\"&gt; &lt;br\/&gt; \nAmarelo: &lt;input type=\"checkbox\" name=\"cor\" value=\"amarelo\"&gt; &lt;br\/&gt; \nVermelho: &lt;input type=\"checkbox\" name=\"cor\" value=\"vermelho\"&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O resultado visual, assim como ao atribuir o valor individual, ser\u00e1 o mesmo, por\u00e9m agora, receber\u00e1 os valores de <strong>name<\/strong> e de <strong>value.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vejamos agora o exemplo abaixo, onde al\u00e9m de cores, acrescentaremos outro grupo de checkbox HTML chamado de animal:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;&lt;b&gt;Qual suas cores e animais preferidos?&lt;\/b&gt;&lt;\/p&gt;\n\nAzul: &lt;input type=\"checkbox\" name=\"cor\" value=\"azul\"&gt; &lt;br\/&gt;\nAmarelo: &lt;input type=\"checkbox\" name=\"cor\" value=\"amarelo\"&gt; &lt;br\/&gt;\nVermelho: &lt;input type=\"checkbox\" name=\"cor\" value=\"vermelho\"&gt;\n\nCoelho: &lt;input type=\"checkbox\" name=\"animal\" value=\"coelho\"&gt;\nCachorro: &lt;input type=\"checkbox\" name=\"animal\" value=\"cachorro\"&gt;\nGato: &lt;input type=\"checkbox\" name=\"animal\" value=\"gato\"&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Desta forma, o resultado ser\u00e1:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox-5.png\" alt=\"Exemplo 3 de checkbox HTML\" title=\"Exemplo 3 de checkbox HTML\" class=\"wp-image-3865\" width=\"648\" height=\"283\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox-5.png 648w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox-5-300x131.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox-5-1x1.png 1w\" sizes=\"(max-width: 648px) 100vw, 648px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Visualmente, n\u00e3o ha nenhuma diferencia\u00e7\u00e3o visual entre os grupos, somente nos valores que retornam quando o formul\u00e1rio \u00e9 preenchido.<br><a name=\"topico05\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-como-deixar-um-checkbox-html-marcado\"><span class=\"ez-toc-section\" id=\"Como_deixar_um_checkbox_HTML_marcado\"><\/span>Como deixar um checkbox HTML marcado?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 muito comum deixarmos um <strong>checkbox marcado<\/strong> de forma antecipada. Outro atributo que podemos incluir ao checkbox HTML \u00e9 o atributo <strong>checked.<\/strong> Os checkbox possuem valores boleanos, ou seja: &#8220;verdadeiro&#8221; ou &#8220;falso&#8221;. 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\u00e9-selecionados. Vejamos no exemplo a seguir onde deixaremos os checkbox referente \u00e0s cores amarelo e vermelho j\u00e1 pr\u00e9-selecionados:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Azul: &lt;input type=\"checkbox\" name=\"cor\" value=\"azul\"&gt; &lt;br\/&gt; \nAmarelo: &lt;input type=\"checkbox\" name=\"cor\" value=\"amarelo\" checked&gt; &lt;br\/&gt; \nVermelho: &lt;input type=\"checkbox\" name=\"cor\" value=\"vermelho\" checked&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O resultado visual do c\u00f3digo anterior ser\u00e1:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox3.png\" alt=\"Exemplo 4 com pr\u00e9-sele\u00e7\u00e3o\" title=\"Exemplo 4 de checkbox HTML\" class=\"wp-image-3866\" width=\"648\" height=\"148\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox3.png 648w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox3-300x69.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox3-1x1.png 1w\" sizes=\"(max-width: 648px) 100vw, 648px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Este recurso \u00e9 muito utilizado nos checkbox HTML para estrat\u00e9gias de marketing.<br><a name=\"topico06\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-utilizando-labels-em-conjunto-com-o-checkbox\"><span class=\"ez-toc-section\" id=\"Utilizando_labels_em_conjunto_com_o_checkbox\"><\/span>Utilizando labels em conjunto com o checkbox<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Algo muito utilizado em formul\u00e1rios \u00e9 a<a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/labels-html\/\" target=\"_blank\" rel=\"noreferrer noopener\"> tag <strong>&lt;label&gt;<\/strong><\/a>, onde podemos inserir o atributo for que ir\u00e1 se referir a um id de outro elemento. Nesse caso, devemos acrescentar ao nosso checkbox um <strong>id,<\/strong> e ap\u00f3s isso, incluir um label com o atributo <strong>for.<\/strong> Se deixarmos sem o for, o label aparecer\u00e1 da mesma forma, mas ao ser clicado, n\u00e3o ir\u00e1 alterar nosso valor do checkbox. Com o for, podemos alterar o valor do checkbox clicando no pr\u00f3prio label, e n\u00e3o ficando restrito apenas \u00e0 caixa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veja o exemplo abaixo, onde vamos aplicar um label para cada checkbox com o atributo for utilizando o valor da id do checkbox:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;&lt;b&gt;Quais suas linguagens de programa\u00e7\u00e3o preferidas?&lt;\/b&gt;&lt;\/p&gt;\n&lt;input type=\"checkbox\" id=\"php\" name=\"linguagens\" value=\"phplang\"&gt;\n&lt;label for=\"php\"&gt;PHP&lt;\/label&gt;\n&lt;br&gt;\n&lt;input type=\"checkbox\" id=\"js\" name=\"linguagens\" value=\"jslang\"&gt;\n&lt;label for=\"js\"&gt;JavaScript&lt;\/label&gt;\n&lt;br&gt;\n&lt;input type=\"checkbox\" id=\"csharp\" name=\"linguagens\" value=\"csharplang\"&gt;\n&lt;label for=\"csharp\"&gt;C#&lt;\/label&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O resultado ser\u00e1 ent\u00e3o:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox-final.png\" alt=\"Exemplo 5 com label\" class=\"wp-image-3867\" width=\"648\" height=\"210\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox-final.png 648w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox-final-300x97.png 300w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/checkbox-final-1x1.png 1w\" sizes=\"(max-width: 648px) 100vw, 648px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ao escrever o c\u00f3digo acima, experimente ent\u00e3o clicar no label e n\u00e3o diretamente no checkbox. Assim voc\u00ea entender\u00e1 na pr\u00e1tica a funcionalidade do atributo <strong>for<\/strong> para o label.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a name=\"topico07\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-estudos-e-funcionalidades-do-checkbox\"><span class=\"ez-toc-section\" id=\"Estudos_e_funcionalidades_do_checkbox\"><\/span>Estudos e funcionalidades do checkbox<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Com todas as informa\u00e7\u00f5es apresentadas at\u00e9 agora nesse artigo, voc\u00ea j\u00e1 deve ser capaz de incluir checkbox em suas <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-basico\/\" target=\"_blank\" rel=\"noopener\">p\u00e1ginas HTML<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por\u00e9m, vale a pena se aprofundar em outras funcionalidades que esse elemento possibilita. Os checkbox podem ser utilizados n\u00e3o apenas para formul\u00e1rios est\u00e1ticos, mas podem integrar sistemas mais complexos incluindo, por exemplo, funcionalidades que s\u00f3 ser\u00e3o executadas conforme a sele\u00e7\u00e3o do checkbox.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Enfim, na programa\u00e7\u00e3o \u00e9 poss\u00edvel realizar diversas fun\u00e7\u00f5es em conjunto ao checkbox HTML. Recomendamos o estudo e pr\u00e1tica de tudo que foi apresentado aqui, al\u00e9m disso, caso j\u00e1 tenha conhecimentos b\u00e1sico de CSS, pode estilizar os seus checkbox. Em conjunto com JavaScript, <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/o-que-e-php\/\">PHP<\/a> ou outras linguagens, voc\u00ea pode criar sistemas de valida\u00e7\u00e3o para seus checkbox, e assim inserir funcionalidades apenas quando uma caixa for marcada. Experimente seguir esses <a href=\"https:\/\/www.homehost.com.br\/blog\/internet\/3-passos-de-como-criar-site-atrativo-para-seu-publico-alvo\/\">passos e logo mais voc\u00ea estar\u00e1 criando<\/a> diversos sistemas complexos atrav\u00e9s das checkbox!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-atributos-de-um-checkbox\"><span class=\"ez-toc-section\" id=\"Atributos_de_um_checkbox\"><\/span>Atributos de um checkbox<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Em HTML, um elemento de checkbox \u00e9 criado usando a tag <code>&lt;input&gt;<\/code> com o atributo <code>type<\/code> definido como &#8220;checkbox&#8221;. Al\u00e9m disso, existem alguns atributos opcionais que podem ser utilizados para personalizar e controlar o comportamento do checkbox. Os atributos mais comuns s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><strong>name<\/strong><\/code>: especifica o nome do campo de dados quando o formul\u00e1rio \u00e9 enviado para o servidor.<\/li>\n\n\n\n<li><code><strong>value<\/strong><\/code>: define o valor associado ao checkbox quando ele est\u00e1 marcado e \u00e9 enviado para o servidor.<\/li>\n\n\n\n<li><code><strong>checked<\/strong><\/code>: indica se o checkbox est\u00e1 inicialmente marcado quando a p\u00e1gina \u00e9 carregada. Pode ter o valor &#8220;checked&#8221; para marcar o checkbox por padr\u00e3o.<\/li>\n\n\n\n<li><code><strong>disabled<\/strong><\/code>: desabilita o checkbox, tornando-o n\u00e3o interativo.<\/li>\n\n\n\n<li><code><strong>required<\/strong><\/code>: indica que o checkbox \u00e9 obrigat\u00f3rio, impedindo o envio do formul\u00e1rio se n\u00e3o for marcado.<\/li>\n\n\n\n<li><code><strong>readonly<\/strong><\/code>: torna o checkbox somente leitura, impedindo que o usu\u00e1rio o altere.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Esses s\u00e3o alguns dos atributos mais comuns, mas existem outros atributos dispon\u00edveis para personalizar ainda mais o estilo e o comportamento do checkbox, como <code>class<\/code>, <code>id<\/code>, <code>style<\/code>, entre outros.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_customizar_o_estilo_de_um_checkbox_com_CSS\"><\/span>Como customizar o estilo de um checkbox com CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para personalizar o estilo de um checkbox em HTML, voc\u00ea pode usar CSS para modificar sua apar\u00eancia. Aqui est\u00e3o algumas maneiras de fazer isso:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Utilizando CSS Puro<\/strong>: Voc\u00ea pode utilizar as propriedades CSS para modificar o estilo do checkbox. Por exemplo, voc\u00ea pode alterar a cor, tamanho, forma, fundo, borda e outros aspectos visuais. Isso \u00e9 feito selecionando o elemento <code>&lt;input type=\"checkbox\"&gt;<\/code> usando o seletor CSS e aplicando estilos personalizados a ele.<\/li>\n\n\n\n<li><strong>Utilizando Frameworks CSS<\/strong>: Existem v\u00e1rios frameworks CSS, como Bootstrap, Materialize CSS e Foundation, que fornecem estilos predefinidos para checkboxes, bem como outros componentes de interface do usu\u00e1rio. Esses frameworks facilitam a personaliza\u00e7\u00e3o do estilo do checkbox, fornecendo classes CSS espec\u00edficas para isso. Alguns exemplos s\u00e3o o <a href=\"https:\/\/semantic-ui.com\/\">SemanticUI<\/a> e o <a href=\"https:\/\/purecss.io\/\">Pure<\/a>.<\/li>\n\n\n\n<li><strong>Utilizando Bibliotecas JavaScript<\/strong>: Algumas bibliotecas JavaScript, como o <a href=\"https:\/\/jqueryui.com\/\">jQuery UI<\/a> e o <a href=\"https:\/\/fontawesome.com\/\">FontAwesome<\/a>, oferecem recursos avan\u00e7ados para personalizar a apar\u00eancia dos checkboxes. Essas bibliotecas geralmente fornecem temas, \u00edcones e anima\u00e7\u00f5es que podem ser aplicados aos checkboxes.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Lembre-se de que a personaliza\u00e7\u00e3o do estilo de um checkbox \u00e9 feita principalmente por meio de CSS, portanto, \u00e9 necess\u00e1rio ter conhecimentos b\u00e1sicos de CSS para realizar essas modifica\u00e7\u00f5es.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_receber_o_conteudo_de_um_checkbox_em_PHP\"><\/span>Como receber o conte\u00fado de um checkbox em PHP?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para receber o conte\u00fado de um checkbox em <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/alterar-versao-php-cpanel\/\">PHP<\/a>, voc\u00ea precisa verificar se o checkbox foi selecionado (marcado) antes de processar os dados do formul\u00e1rio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ao enviar um formul\u00e1rio com um checkbox, voc\u00ea pode acessar seu estado atrav\u00e9s do array <code>$_POST<\/code> ou <code>$_GET<\/code>, dependendo do m\u00e9todo de envio especificado no formul\u00e1rio (<code>method=\"post\"<\/code> ou <code>method=\"get\"<\/code>).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo, se voc\u00ea tem um checkbox com o nome &#8220;meuCheckbox&#8221; em um formul\u00e1rio, voc\u00ea pode verificar se ele foi selecionado da seguinte maneira em PHP:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if(isset($_POST['meuCheckbox'])) {\n    \/\/ O checkbox foi selecionado\n    \/\/ Fa\u00e7a o que for necess\u00e1rio com os dados do checkbox\n} else {\n    \/\/ O checkbox n\u00e3o foi selecionado\n    \/\/ Fa\u00e7a algo diferente ou ignore\n}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A fun\u00e7\u00e3o <code>isset()<\/code> \u00e9 usada para verificar se a vari\u00e1vel <code>$_POST['meuCheckbox']<\/code> existe. Se existir, significa que o checkbox foi marcado e voc\u00ea pode realizar as a\u00e7\u00f5es desejadas. Caso contr\u00e1rio, significa que o checkbox n\u00e3o foi marcado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Certifique-se de substituir &#8220;meuCheckbox&#8221; pelo nome real do seu checkbox no c\u00f3digo acima.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lembre-se de que, se o formul\u00e1rio estiver usando o m\u00e9todo POST, voc\u00ea deve verificar <code>$_POST['meuCheckbox']<\/code>. Se estiver usando o m\u00e9todo GET, verifique <code>$_GET['meuCheckbox']<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_deixar_um_checkbox_marcado_em_JavaScript_e_Jquery\"><\/span>Como deixar um checkbox marcado em JavaScript e Jquery?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para marcar um checkbox usando jQuery, voc\u00ea pode usar o m\u00e9todo <code>.prop()<\/code> ou <code>.attr()<\/code> para definir a propriedade &#8220;checked&#8221; como true. Aqui est\u00e1 um exemplo de como marcar um checkbox usando jQuery:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Usando o m\u00e9todo .prop()\n$('#meuCheckbox').prop('checked', true);\n\n\/\/ Usando o m\u00e9todo .attr()\n$('#meuCheckbox').attr('checked', 'checked');\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">No exemplo acima, <code>#meuCheckbox<\/code> \u00e9 o seletor do elemento checkbox. Ao chamar <code>.prop('checked', true)<\/code> ou <code>.attr('checked', 'checked')<\/code>, voc\u00ea est\u00e1 definindo a propriedade &#8220;checked&#8221; do checkbox como true, o que o marcar\u00e1 visualmente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Certifique-se de substituir <code>#meuCheckbox<\/code> pelo seletor correto para o seu elemento checkbox.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lembre-se de que, ao marcar o checkbox usando jQuery, voc\u00ea tamb\u00e9m pode querer atualizar o valor enviado no formul\u00e1rio, se aplic\u00e1vel. Para fazer isso, voc\u00ea pode definir o atributo &#8220;value&#8221; do checkbox usando o m\u00e9todo <code>.val()<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$('#meuCheckbox').val('valor-do-checkbox');\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa forma, substitua <code>'valor-do-checkbox'<\/code> pelo valor que deseja enviar quando o checkbox estiver marcado.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Perguntas_frequentes\"><\/span>Perguntas frequentes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Em quais vers\u00f5es do HTML o checkbox \u00e9 suportado?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">O elemento <code>&lt;input type=\"checkbox\"&gt;<\/code> \u00e9 suportado em todas as vers\u00f5es do HTML, come\u00e7ando pelo HTML 4 at\u00e9 as vers\u00f5es mais recentes, como HTML5. A tag <code>&lt;input&gt;<\/code> \u00e9 um elemento fundamental do HTML e oferece diferentes tipos de input, incluindo checkbox, radio, text, etc. Portanto, independentemente da vers\u00e3o do HTML que voc\u00ea esteja utilizando, \u00e9 poss\u00edvel usar checkboxes em seus formul\u00e1rios.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Posso usar um checkbox fora de um formul\u00e1rio HTML?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Sim, \u00e9 poss\u00edvel utilizar um elemento <code>&lt;input type=\"checkbox\"&gt;<\/code> fora de um <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/formulario-html\/\">formul\u00e1rio HTML<\/a>. Embora seja comum usar checkboxes dentro de formul\u00e1rios para coletar dados dos usu\u00e1rios, o elemento <code>&lt;input type=\"checkbox\"&gt;<\/code> em si n\u00e3o requer necessariamente a presen\u00e7a de um formul\u00e1rio. Voc\u00ea pode usar um checkbox isoladamente em uma p\u00e1gina HTML sem problemas. No entanto, \u00e9 importante lembrar que, ao usar checkboxes fora de um formul\u00e1rio, eles n\u00e3o ser\u00e3o automaticamente enviados ou processados como parte de uma submiss\u00e3o de formul\u00e1rio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ao criar um formul\u00e1rio, podemos incluir nele diversos campos, dentre os quais uma op\u00e7\u00e3o muito utilizada \u00e9 o checkbox HTML. Neste artigo, vamos explicar como funciona o checkbox e como utiliz\u00e1-lo no seu c\u00f3digo HTML. O que \u00e9 um checkbox O checkbox ou caixa de checagem nada mais \u00e9 que um tipo de campo que [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":3857,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[3174,2621,3173,241],"class_list":["post-3855","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais","tag-checkbox","tag-html","tag-input","tag-tutoriais"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Checkbox HTML: como utilizar em seu formul\u00e1rio | Homehost<\/title>\n<meta name=\"description\" content=\"HTML checkbox: aprenda como funcionam e como utilizar as caixas de checagem no seu HTML e acrescente agora mesmo na sua p\u00e1gina!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Checkbox HTML: como utilizar em seu formul\u00e1rio | Homehost\" \/>\n<meta property=\"og:description\" content=\"HTML checkbox: aprenda como funcionam e como utilizar as caixas de checagem no seu HTML e acrescente agora mesmo na sua p\u00e1gina!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-17T14:03:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-09T10:05:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Checkbox_HTML.png\" \/>\n\t<meta property=\"og:image:width\" content=\"561\" \/>\n\t<meta property=\"og:image:height\" content=\"220\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rafael Marques\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rafael Marques\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/\",\"name\":\"Checkbox HTML: como utilizar em seu formul\u00e1rio | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Checkbox_HTML.png\",\"datePublished\":\"2023-06-17T14:03:22+00:00\",\"dateModified\":\"2024-01-09T10:05:44+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"description\":\"HTML checkbox: aprenda como funcionam e como utilizar as caixas de checagem no seu HTML e acrescente agora mesmo na sua p\u00e1gina!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Checkbox_HTML.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Checkbox_HTML.png\",\"width\":561,\"height\":220,\"caption\":\"Checkbox HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Checkbox HTML: como utilizar em seu formul\u00e1rio\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\",\"name\":\"Rafael Marques\",\"description\":\"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br\",\"sameAs\":[\"https:\/\/www.instagram.com\/rafamarquesrmb\/\",\"https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Checkbox HTML: como utilizar em seu formul\u00e1rio | Homehost","description":"HTML checkbox: aprenda como funcionam e como utilizar as caixas de checagem no seu HTML e acrescente agora mesmo na sua p\u00e1gina!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Checkbox HTML: como utilizar em seu formul\u00e1rio | Homehost","og_description":"HTML checkbox: aprenda como funcionam e como utilizar as caixas de checagem no seu HTML e acrescente agora mesmo na sua p\u00e1gina!","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2023-06-17T14:03:22+00:00","article_modified_time":"2024-01-09T10:05:44+00:00","og_image":[{"width":561,"height":220,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Checkbox_HTML.png","type":"image\/png"}],"author":"Rafael Marques","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Rafael Marques","Est. tempo de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/","name":"Checkbox HTML: como utilizar em seu formul\u00e1rio | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Checkbox_HTML.png","datePublished":"2023-06-17T14:03:22+00:00","dateModified":"2024-01-09T10:05:44+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"description":"HTML checkbox: aprenda como funcionam e como utilizar as caixas de checagem no seu HTML e acrescente agora mesmo na sua p\u00e1gina!","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Checkbox_HTML.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Checkbox_HTML.png","width":561,"height":220,"caption":"Checkbox HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/checkbox-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Checkbox HTML: como utilizar em seu formul\u00e1rio"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e","name":"Rafael Marques","description":"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br","sameAs":["https:\/\/www.instagram.com\/rafamarquesrmb\/","https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/"]}]}},"modified_by":"ad_hmhst","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/Checkbox_HTML.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3855","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3855"}],"version-history":[{"count":21,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3855\/revisions"}],"predecessor-version":[{"id":13065,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3855\/revisions\/13065"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/3857"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}