{"id":80271,"date":"2020-08-04T14:58:12","date_gmt":"2020-08-04T09:28:12","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=80271"},"modified":"2024-07-24T16:23:36","modified_gmt":"2024-07-24T10:53:36","slug":"html-checkbox","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-checkbox\/","title":{"rendered":"HTML Checkbox &#8211; How to Create Custom Check Box in HTML"},"content":{"rendered":"<p>Welcome back to <strong>DataFlair HTML Tutorial Series<\/strong>. In this article, we are going to learn about <strong>HTML Checkbox<\/strong> and various types and attributes of the same. So let&#8217;s start!!!<\/p>\n<p>&nbsp;<\/p>\n<h2>HTML Checkbox<\/h2>\n<p>HTML checkboxes are of the utmost importance when a user wants to select more than one option for a limited number of choices. For example, in a form, suppose you have to select your preferred social media handle. If checkboxes are used, you can select multiple preferences, unlike radio buttons.<\/p>\n<p>Another benefit of checkboxes is that a large amount of information of different types can be obtained in a flexible manner since the users can select multiple choices on checkboxes.<\/p>\n<p>The checkboxes are also defined using the &lt;input&gt; tag, like the radio button, as we have discussed in the previous article.<\/p>\n<h2>Best Practices for Checkbox Implementation:<\/h2>\n<ul>\n<li>Related checks must be put together in the field-set and a label should be given to it with a proper context.<\/li>\n<li>The checkbox must be large enough so that users with a touch device can easily select them<\/li>\n<li>The user should recieve a feedback whenever they check a checkbox.<\/li>\n<\/ul>\n<p><strong>Syntax-<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;input type= \u201ccheckbox\u201d name= \u201cnm\u201d value= \u201cval\u201d&gt;<\/pre>\n<h2>Attributes of HTML CheckBox<\/h2>\n<table style=\"height: 308px\" width=\"780\">\n<tbody>\n<tr>\n<td><b>Name<\/b><\/td>\n<td><b>Definition<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">type<\/span><\/td>\n<td><span style=\"font-weight: 400\">Specifies the type of input, in this case set as \u2018checkbox\u2019.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">value<\/span><\/td>\n<td><span style=\"font-weight: 400\">Specifies the value that will be sent to the server, if the checkbox is checked.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">name<\/span><\/td>\n<td><span style=\"font-weight: 400\">Specifies the name of the control that is delivered to the server.<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">checked<\/span><\/td>\n<td><span style=\"font-weight: 400\">Defines a by default checked checkbox. It is a boolean value.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Adding Multiple Checkbox in HTML<\/h2>\n<p>We can add multiple checkboxes to an HTML document using the above syntax.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;Preferred Social Media Handle&lt;\/h1&gt;\r\n&lt;form&gt;\r\n  &lt;input type=\"checkbox\" id=\"one\" name=\"vehicle1\" value=\"LinkedIn\"&gt;\r\n  &lt;label for=\"one\"&gt;LinkedIn&lt;\/label&gt;&lt;br&gt;\r\n  &lt;input type=\"checkbox\" id=\"two\" name=\"vehicle2\" value=\"Instagram\"&gt;\r\n  &lt;label for=\"two\"&gt;Instagram&lt;\/label&gt;&lt;br&gt;\r\n  &lt;input type=\"checkbox\" id=\"three\" name=\"vehicle3\" value=\"Facebook\"&gt;\r\n  &lt;label for=\"three\"&gt;Facebook&lt;\/label&gt;\r\n  &lt;br&gt;&lt;br&gt;\r\n  &lt;input type=\"submit\" value=\"Submit\"&gt;\r\n&lt;\/form&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image1-HTML-checkbox.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-80281\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image1-HTML-checkbox.png\" alt=\"\" width=\"548\" height=\"256\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image1-HTML-checkbox.png 548w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image1-HTML-checkbox-300x140.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image1-HTML-checkbox-150x70.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image1-HTML-checkbox-520x243.png 520w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/a><\/p>\n<p>We use the &lt;label&gt; element to increase the accessibility of checkboxes i.e., labels make it easier to select options on a small-screen device.<\/p>\n<h2>Adding CSS in CheckBox<\/h2>\n<p>We can style checkboxes using CSS3 and make them more aesthetic.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;&lt;style&gt;\r\n  p,\r\nlabel {\r\n    font: 1rem 'Fira Sans', sans-serif;\r\n}\r\n\r\ninput {\r\n    margin: .4rem;\r\n}\r\n&lt;\/style&gt;&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;Preferred Social Media Handle&lt;\/h1&gt;\r\n&lt;form&gt;\r\n  &lt;input type=\"checkbox\" id=\"one\" name=\"vehicle1\" value=\"LinkedIn\"&gt;\r\n  &lt;label for=\"one\"&gt;LinkedIn&lt;\/label&gt;&lt;br&gt;\r\n  &lt;input type=\"checkbox\" id=\"two\" name=\"vehicle2\" value=\"Instagram\"&gt;\r\n  &lt;label for=\"two\"&gt;Instagram&lt;\/label&gt;&lt;br&gt;\r\n  &lt;input type=\"checkbox\" id=\"three\" name=\"vehicle3\" value=\"Facebook\"&gt;\r\n  &lt;label for=\"three\"&gt;Facebook&lt;\/label&gt;\r\n  &lt;br&gt;&lt;br&gt;\r\n  &lt;input type=\"submit\" value=\"Submit\"&gt;\r\n&lt;\/form&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image2-HTML-checkbox.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-80282\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image2-HTML-checkbox.png\" alt=\"adding css in HTML checkbox\" width=\"547\" height=\"260\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image2-HTML-checkbox.png 547w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image2-HTML-checkbox-300x143.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image2-HTML-checkbox-150x71.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image2-HTML-checkbox-520x247.png 520w\" sizes=\"auto, (max-width: 547px) 100vw, 547px\" \/><\/a><\/p>\n<h2>HTML Custom Checkbox<\/h2>\n<p>We can also customize checkboxes using CSS3 and provide a better visual appeal.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;style&gt;\r\n.container {\r\n  display: block;\r\n  position: relative;\r\n  padding-left: 35px;\r\n  margin-bottom: 12px;\r\n  cursor: pointer;\r\n  font-size: 22px;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n.container input {\r\n  position: absolute;\r\n  opacity: 0;\r\n  cursor: pointer;\r\n  height: 0;\r\n  width: 0;\r\n}\r\n\r\n.checkmark {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  height: 25px;\r\n  width: 25px;\r\n  background-color: #eee;\r\n}\r\n\r\n\/* On mouse-over, a grey background color *\/\r\n.container:hover input ~ .checkmark {\r\n  background-color: #ccc;\r\n}\r\n\r\n\/* When the checkbox is checked , a blue background *\/\r\n.container input:checked ~ .checkmark {\r\n  background-color: #2196F3;\r\n}\r\n\r\n\/* Create the checkmark\/indicator (hidden when not checked) *\/\r\n.checkmark:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  display: none;\r\n}\r\n\r\n.container input:checked ~ .checkmark:after {\r\n  display: block;\r\n}\r\n.container .checkmark:after {\r\n  left: 9px;\r\n  top: 5px;\r\n  width: 5px;\r\n  height: 10px;\r\n  border: solid white;\r\n  border-width: 0 3px 3px 0;\r\n  -webkit-transform: rotate(45deg);\r\n  -ms-transform: rotate(45deg);\r\n  transform: rotate(45deg);\r\n}\r\n&lt;\/style&gt;\r\n&lt;body&gt;\r\n\r\n&lt;h1&gt;Preferred Social Media Handles&lt;\/h1&gt;\r\n&lt;label class=\"container\"&gt;LinkedIn\r\n  &lt;input type=\"checkbox\" checked=\"checked\"&gt;\r\n  &lt;span class=\"checkmark\"&gt;&lt;\/span&gt;\r\n&lt;\/label&gt;\r\n&lt;label class=\"container\"&gt;Instagram\r\n  &lt;input type=\"checkbox\"&gt;\r\n  &lt;span class=\"checkmark\"&gt;&lt;\/span&gt;\r\n&lt;\/label&gt;\r\n&lt;label class=\"container\"&gt;Facebook\r\n  &lt;input type=\"checkbox\"&gt;\r\n  &lt;span class=\"checkmark\"&gt;&lt;\/span&gt;\r\n&lt;\/label&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image3-HTML-checkbox.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-80283\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image3-HTML-checkbox.png\" alt=\"HTML Custom Checkbox\" width=\"561\" height=\"224\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image3-HTML-checkbox.png 561w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image3-HTML-checkbox-300x120.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image3-HTML-checkbox-150x60.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image3-HTML-checkbox-520x208.png 520w\" sizes=\"auto, (max-width: 561px) 100vw, 561px\" \/><\/a><\/p>\n<h2>HTML Checked Attribute<\/h2>\n<p>To check a checkbox by default, we use the checked attribute. It can also be checked after the page has been loaded using JavaScript.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;Preferred Social Media Handle&lt;\/h1&gt;\r\n&lt;form&gt;\r\n  &lt;input type=\"checkbox\" id=\"one\" name=\"vehicle1\" value=\"LinkedIn\" checked&gt;\r\n  &lt;label for=\"one\"&gt;LinkedIn&lt;\/label&gt;&lt;br&gt;\r\n  &lt;input type=\"checkbox\" id=\"two\" name=\"vehicle2\" value=\"Instagram\"&gt;\r\n  &lt;label for=\"two\"&gt;Instagram&lt;\/label&gt;&lt;br&gt;\r\n  &lt;input type=\"checkbox\" id=\"three\" name=\"vehicle3\" value=\"Facebook\"&gt;\r\n  &lt;label for=\"three\"&gt;Facebook&lt;\/label&gt;\r\n  &lt;br&gt;&lt;br&gt;\r\n  &lt;input type=\"submit\" value=\"Submit\"&gt;\r\n&lt;\/form&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image4HTML-checkbox.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-80284\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image4HTML-checkbox.png\" alt=\"HTML Checked attribute\" width=\"542\" height=\"237\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image4HTML-checkbox.png 542w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image4HTML-checkbox-300x131.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image4HTML-checkbox-150x66.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image4HTML-checkbox-520x227.png 520w\" sizes=\"auto, (max-width: 542px) 100vw, 542px\" \/><\/a><\/p>\n<h2>JavaScript and Checkboxes<\/h2>\n<p>We can display text when a particular checkbox has been checked, using JavaScript.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n&lt;p&gt;JavaScript and Checkboxes&lt;\/p&gt;\r\n&lt;label for=\"myCheck\"&gt;Select&lt;\/label&gt; \r\n&lt;input type=\"checkbox\" id=\"myCheck\" onclick=\"change()\"&gt;\r\n&lt;p id=\"text\" style=\"display:none\"&gt;Checkbox has been checked.&lt;\/p&gt;\r\n&lt;script&gt;\r\nfunction change() {\r\n  var checkBox = document.getElementById(\"myCheck\");\r\n  var text = document.getElementById(\"text\");\r\n  if (checkBox.checked == true){\r\n    text.style.display = \"block\";\r\n  } else {\r\n     text.style.display = \"none\";\r\n  }\r\n}\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Output<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image5HTML-Checkbox.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-80285\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image5HTML-Checkbox.png\" alt=\"javascript and HTML Checkbox\" width=\"285\" height=\"158\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image5HTML-Checkbox.png 285w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/Image5HTML-Checkbox-150x83.png 150w\" sizes=\"auto, (max-width: 285px) 100vw, 285px\" \/><\/a><\/p>\n<h2>Summary<\/h2>\n<p>In this article, we\u2019ve discussed the HTML checkbox. Checkboxes come handy when a user can choose multiple options from a limited number of choices. For example, choosing among different hobbies, it is possible to have more than one hobby. The attributes used for HTML checkboxes are type, name, value, and checked. We\u2019ve also looked at customizing checkboxes using CSS3 and displaying text when a particular checkbox has been selected, using JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome back to DataFlair HTML Tutorial Series. In this article, we are going to learn about HTML Checkbox and various types and attributes of the same. So let&#8217;s start!!! &nbsp; HTML Checkbox HTML checkboxes&#46;&#46;&#46;<\/p>\n","protected":false},"author":10,"featured_media":80273,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22400],"tags":[22843],"class_list":["post-80271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-html-checkbox"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML Checkbox - How to Create Custom Check Box in HTML - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn about HTML Checkbox - Various types of checkbox and their attributes, How to define multiple checkboxes, use CSS and javascript for checkboxes in HTML\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/html-checkbox\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Checkbox - How to Create Custom Check Box in HTML - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn about HTML Checkbox - Various types of checkbox and their attributes, How to define multiple checkboxes, use CSS and javascript for checkboxes in HTML\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/html-checkbox\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-04T09:28:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-24T10:53:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/html-checkbox-DF.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Checkbox - How to Create Custom Check Box in HTML - DataFlair","description":"Learn about HTML Checkbox - Various types of checkbox and their attributes, How to define multiple checkboxes, use CSS and javascript for checkboxes in HTML","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:\/\/data-flair.training\/blogs\/html-checkbox\/","og_locale":"en_US","og_type":"article","og_title":"HTML Checkbox - How to Create Custom Check Box in HTML - DataFlair","og_description":"Learn about HTML Checkbox - Various types of checkbox and their attributes, How to define multiple checkboxes, use CSS and javascript for checkboxes in HTML","og_url":"https:\/\/data-flair.training\/blogs\/html-checkbox\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-08-04T09:28:12+00:00","article_modified_time":"2024-07-24T10:53:36+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/html-checkbox-DF.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/html-checkbox\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/html-checkbox\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33"},"headline":"HTML Checkbox &#8211; How to Create Custom Check Box in HTML","datePublished":"2020-08-04T09:28:12+00:00","dateModified":"2024-07-24T10:53:36+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-checkbox\/"},"wordCount":458,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-checkbox\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/html-checkbox-DF.jpg","keywords":["HTML Checkbox"],"articleSection":["HTML Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/html-checkbox\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/html-checkbox\/","url":"https:\/\/data-flair.training\/blogs\/html-checkbox\/","name":"HTML Checkbox - How to Create Custom Check Box in HTML - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-checkbox\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-checkbox\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/html-checkbox-DF.jpg","datePublished":"2020-08-04T09:28:12+00:00","dateModified":"2024-07-24T10:53:36+00:00","description":"Learn about HTML Checkbox - Various types of checkbox and their attributes, How to define multiple checkboxes, use CSS and javascript for checkboxes in HTML","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/html-checkbox\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/html-checkbox\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/html-checkbox\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/html-checkbox-DF.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/08\/html-checkbox-DF.jpg","width":1200,"height":628,"caption":"html checkbox"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/html-checkbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"HTML Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/html\/"},{"@type":"ListItem","position":3,"name":"HTML Checkbox &#8211; How to Create Custom Check Box in HTML"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.","url":"https:\/\/data-flair.training\/blogs\/author\/dfadteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/80271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=80271"}],"version-history":[{"count":7,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/80271\/revisions"}],"predecessor-version":[{"id":142867,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/80271\/revisions\/142867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/80273"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=80271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=80271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=80271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}