Forms with input checkbox and radio tag in HTML<\/title><br \/>\n<\/head><br \/>\n<body><\/p>\n<p>In this article we will talk about HTML forms and how to use tags <code>input<\/code> of type <code>check box<\/code> y <code>radio<\/code>. These elements are very useful for interaction with the user and allow us to obtain data in a simple way. Next, we'll show you how to work with them.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 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\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/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:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#Etiqueta_input_checkbox\" >input checkbox label<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#Etiqueta_input_radio\" >radio input label<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#Conclusiones\" >Conclusions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#%C2%BFComo_puedo_saber_si_una_casilla_de_verificacion_esta_marcada\" >How can I tell if a checkbox is checked?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#%C2%BFEs_posible_tener_varias_casillas_de_verificacion_marcadas_al_mismo_tiempo\" >Is it possible to have multiple checkboxes checked at the same time?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#%C2%BFComo_puedo_preseleccionar_una_opcion_de_radio\" >How can I preselect a radio option?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Etiqueta_input_checkbox\"><\/span>input checkbox label<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The label <code>input<\/code> of type <code>check box<\/code> It is used to create checkboxes, also known as checkboxes. These boxes allow the user to select one or more options from a set of possibilities.<\/p>\n<p>To use a checkbox, we must add the attribute <code>type="checkbox"<\/code> to the label <code>input<\/code>. Additionally, we can specify a value for the attribute <code>value<\/code> and add a descriptive text inside the label <code>labels<\/code>.<\/p>\n<pre>\n<input type=\"checkbox\" name=\"opcion1\" value=\"1\"><label for=\"opcion1\">Option 1<\/label>\n<\/pre>\n<p>When the user checks a box, the value specified in the attribute will be sent <code>value<\/code> to the server if the form is submitted. If the box is not checked, the corresponding value will not be sent. This is especially useful when we need the user to select multiple options.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Etiqueta_input_radio\"><\/span>radio input label<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The label <code>input<\/code> of type <code>radio<\/code> It is also used to create selection options, but unlike check boxes, only one option can be selected.<\/p>\n<p>As with checkboxes, we must add the attribute <code>type="radio"<\/code> to the label <code>input<\/code>. We can also specify a value for the attribute <code>value<\/code> and add a descriptive text inside the label <code>labels<\/code>.<\/p>\n<pre>\n<input type="radio" name="opcion" value="1">\n<label for="opcion1">Option 1<\/label>\n<br>\n<input type="radio" name="opcion" value="2">\n<label for="opcion2">Option 2<\/label>\n<\/pre>\n<p>It is important to note that, when using the label <code>input<\/code> of type <code>radio<\/code>, we must group the options that we want to be exclusive using the same value for the attribute <code>name<\/code>. This way, only one option can be selected within the group.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusiones\"><\/span>Conclusions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In short, the labels <code>input<\/code> of type <code>check box<\/code> y <code>radio<\/code> They are important elements in HTML forms. With them, we can obtain user information through checkboxes and exclusive selection, respectively. It is essential to know how to use these tags and take advantage of their functionalities in our projects.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_saber_si_una_casilla_de_verificacion_esta_marcada\"><\/span>How can I tell if a checkbox is checked?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To find out if a checkbox is checked, you can use JavaScript to access the attribute <code>checked<\/code> of the corresponding element. If the attribute has the value <code>true<\/code>, means the box is checked.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_posible_tener_varias_casillas_de_verificacion_marcadas_al_mismo_tiempo\"><\/span>Is it possible to have multiple checkboxes checked at the same time?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, it is possible to have multiple checkboxes checked at the same time. It is enough for the user to select the desired options. We can get the selected values on the server by properly processing the submitted form.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_preseleccionar_una_opcion_de_radio\"><\/span>How can I preselect a radio option?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To preselect a radio option, you must add the attribute <code>checked<\/code> to the corresponding element and set its value as <code>true<\/code>. This way, the option will be checked by default when the page loads.<\/p>\n<p><\/body><br \/>\n<\/html><\/p>","protected":false},"excerpt":{"rendered":"<p>Formularios con etiqueta input checkbox y radio en HTML En este art\u00edculo hablaremos sobre los formularios en HTML y c\u00f3mo utilizar las etiquetas input de tipo checkbox y radio. Estos elementos son muy \u00fatiles para la interacci\u00f3n con el usuario y nos permiten obtener datos de forma sencilla. A continuaci\u00f3n, te mostraremos c\u00f3mo trabajar con […]<\/p>","protected":false},"author":1,"featured_media":23081,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1124],"tags":[205,932,90,606,492,475,688,933],"class_list":["post-23080","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-html","tag-blog","tag-checkbox","tag-con","tag-etiqueta","tag-formularios","tag-html","tag-input","tag-radio"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=23080"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23080\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23081"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":23080,"date":"2024-03-01T14:02:01","date_gmt":"2024-03-01T13:02:01","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/formularios-con-etiqueta-input-checkbox-y-radio-en-html\/"},"modified":"2024-06-03T17:31:12","modified_gmt":"2024-06-03T16:31:12","slug":"formularios-con-etiqueta-input-checkbox-y-radio-en-html","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/","title":{"rendered":"Forms with input checkbox and radio tag in HTML"},"content":{"rendered":"

\n
\nForms with input checkbox and radio tag in HTML<\/title><br \/>\n<\/head><br \/>\n<body><\/p>\n<p>In this article we will talk about HTML forms and how to use tags <code>input<\/code> of type <code>check box<\/code> y <code>radio<\/code>. These elements are very useful for interaction with the user and allow us to obtain data in a simple way. Next, we'll show you how to work with them.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 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\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/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:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#Etiqueta_input_checkbox\" >input checkbox label<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#Etiqueta_input_radio\" >radio input label<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#Conclusiones\" >Conclusions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#%C2%BFComo_puedo_saber_si_una_casilla_de_verificacion_esta_marcada\" >How can I tell if a checkbox is checked?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#%C2%BFEs_posible_tener_varias_casillas_de_verificacion_marcadas_al_mismo_tiempo\" >Is it possible to have multiple checkboxes checked at the same time?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/forms-with-input-checkbox-and-radio-tag-in-html\/#%C2%BFComo_puedo_preseleccionar_una_opcion_de_radio\" >How can I preselect a radio option?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Etiqueta_input_checkbox\"><\/span>input checkbox label<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The label <code>input<\/code> of type <code>check box<\/code> It is used to create checkboxes, also known as checkboxes. These boxes allow the user to select one or more options from a set of possibilities.<\/p>\n<p>To use a checkbox, we must add the attribute <code>type="checkbox"<\/code> to the label <code>input<\/code>. Additionally, we can specify a value for the attribute <code>value<\/code> and add a descriptive text inside the label <code>labels<\/code>.<\/p>\n<pre>\n<input type=\"checkbox\" name=\"opcion1\" value=\"1\"><label for=\"opcion1\">Option 1<\/label>\n<\/pre>\n<p>When the user checks a box, the value specified in the attribute will be sent <code>value<\/code> to the server if the form is submitted. If the box is not checked, the corresponding value will not be sent. This is especially useful when we need the user to select multiple options.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Etiqueta_input_radio\"><\/span>radio input label<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The label <code>input<\/code> of type <code>radio<\/code> It is also used to create selection options, but unlike check boxes, only one option can be selected.<\/p>\n<p>As with checkboxes, we must add the attribute <code>type="radio"<\/code> to the label <code>input<\/code>. We can also specify a value for the attribute <code>value<\/code> and add a descriptive text inside the label <code>labels<\/code>.<\/p>\n<pre>\n<input type="radio" name="opcion" value="1">\n<label for="opcion1">Option 1<\/label>\n<br>\n<input type="radio" name="opcion" value="2">\n<label for="opcion2">Option 2<\/label>\n<\/pre>\n<p>It is important to note that, when using the label <code>input<\/code> of type <code>radio<\/code>, we must group the options that we want to be exclusive using the same value for the attribute <code>name<\/code>. This way, only one option can be selected within the group.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusiones\"><\/span>Conclusions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In short, the labels <code>input<\/code> of type <code>check box<\/code> y <code>radio<\/code> They are important elements in HTML forms. With them, we can obtain user information through checkboxes and exclusive selection, respectively. It is essential to know how to use these tags and take advantage of their functionalities in our projects.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_saber_si_una_casilla_de_verificacion_esta_marcada\"><\/span>How can I tell if a checkbox is checked?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To find out if a checkbox is checked, you can use JavaScript to access the attribute <code>checked<\/code> of the corresponding element. If the attribute has the value <code>true<\/code>, means the box is checked.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_posible_tener_varias_casillas_de_verificacion_marcadas_al_mismo_tiempo\"><\/span>Is it possible to have multiple checkboxes checked at the same time?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, it is possible to have multiple checkboxes checked at the same time. It is enough for the user to select the desired options. We can get the selected values on the server by properly processing the submitted form.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_preseleccionar_una_opcion_de_radio\"><\/span>How can I preselect a radio option?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To preselect a radio option, you must add the attribute <code>checked<\/code> to the corresponding element and set its value as <code>true<\/code>. This way, the option will be checked by default when the page loads.<\/p>\n<p><\/body><br \/>\n<\/html><\/p>","protected":false},"excerpt":{"rendered":"<p>Formularios con etiqueta input checkbox y radio en HTML En este art\u00edculo hablaremos sobre los formularios en HTML y c\u00f3mo utilizar las etiquetas input de tipo checkbox y radio. Estos elementos son muy \u00fatiles para la interacci\u00f3n con el usuario y nos permiten obtener datos de forma sencilla. A continuaci\u00f3n, te mostraremos c\u00f3mo trabajar con […]<\/p>","protected":false},"author":1,"featured_media":23081,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1124],"tags":[205,932,90,606,492,475,688,933],"class_list":["post-23080","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-html","tag-blog","tag-checkbox","tag-con","tag-etiqueta","tag-formularios","tag-html","tag-input","tag-radio"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=23080"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23080\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23081"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}