{"id":79936,"date":"2020-07-27T16:22:29","date_gmt":"2020-07-27T10:52:29","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=79936"},"modified":"2024-07-24T16:28:16","modified_gmt":"2024-07-24T10:58:16","slug":"html-radio-button","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-radio-button\/","title":{"rendered":"HTML Radio Button – Radio Group and Attributes"},"content":{"rendered":"

HTML Radio button is typically used to select a particular option from a group of related options. To define a radio button, we use the <input> element of HTML. When a particular option is selected using a radio button, the other options are deselected i.e., one can only select a single option at a time. It lets the user select from a set of limited options.<\/p>\n

\"HTML<\/a><\/p>\n

Syntax of HTML Radio Button:<\/strong><\/p>\n

<input type= \u201cradio\u201d name= \u201crbutton\u201d value= \u201cval\u201d>\r\n<\/pre>\n
When it comes to integrating radio buttons it is imperative that they are made available to users that use screen readers. Radio buttons belonging to a particular category must have the same name. The value of each radio button is not shown to the user but is sent to the server after its selection by the user. Therefore, correct labeling and positioning of radio buttons makes them easy to use and offers easy command over them. It is a good practice to use a <label> tag along with radio buttons for better accessibility.<\/p>\n
Defining Radio Group in HTML<\/h2>\n
We can define a group for radio buttons by giving each radio button the same name. As and when the user selects a particular option from this group, other options are deselected.<\/p>\n
Following is an example of radio buttons with different names within a form.<\/p>\n
<html>\r\n<head>\r\n  <title>Radio Buttons<\/title>\r\n<\/head>\r\n<body>\r\n<form>\r\n  <p>Please select your preferred contact method<\/p>\r\n  <div>\r\n    <input type=\"radio\" id=\"contactChoice1\"\r\n     name=\"contact\" value=\"email\">\r\n    <label for=\"Choice1\">Email<\/label>\r\n    <input type=\"radio\" id=\"contactChoice2\"\r\n     name=\"contact\" value=\"phone\">\r\n    <label for=\"Choice2\">Phone<\/label>\r\n    <input type=\"radio\" id=\"contactChoice3\"\r\n     name=\"contact\" value=\"mail\">\r\n    <label for=\"Choice3\">Mail<\/label>\r\n  <\/div>\r\n  <div>\r\n    <button type=\"submit\">Submit<\/button>\r\n  <\/div>\r\n<\/form>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"HTML<\/a><\/p>\n
Attributes of HTML Radio Group<\/h2>\n\n\n\n\n\n\n\n
Name<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
type<\/td>\nSpecifies the type of input, in this case set as \u2018radio\u2019.<\/span><\/td>\n<\/tr>\n
name<\/td>\nSpecifies the name of the control that is delivered to the server.<\/span><\/td>\n<\/tr>\n
value<\/td>\nSpecifies the value that will be sent to the server, if the radio button is checked.<\/span><\/td>\n<\/tr>\n
checked<\/td>\nDefines a by default checked radio button.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Another best practice is to provide clear instructions on what each of the radio buttons represents. This will help the users to understand the options quickly and also make an informed decision.<\/p>\n
We should specify the value attribute so that the information is delivered to the server, on form submission. If the value attribute is not specified, the form data assigns a value \u2018on\u2019 to the entire radio group (this isn\u2019t a good practice).<\/p>\n
Selecting Radio Button by default<\/h2>\n
If no radio button is selected by the user, no information of the radio buttons is delivered to the server. Hence, it is recommended to use the \u2018checked\u2019 state of the radio button and eliminate inefficiency.<\/p>\n
<html>\r\n<head>\r\n  <title>Radio Buttons<\/title>\r\n<\/head>\r\n<body>\r\n<form>\r\n  <p>Please select your preferred contact method<\/p>\r\n  <div>\r\n    <input type=\"radio\" id=\"contactChoice1\"\r\n     name=\"contact\" value=\"email\" checked>\r\n    <label for=\"Choice1\">Email<\/label>\r\n    <input type=\"radio\" id=\"contactChoice2\"\r\n     name=\"contact\" value=\"phone\">\r\n    <label for=\"Choice2\">Phone<\/label>\r\n    <input type=\"radio\" id=\"contactChoice3\"\r\n     name=\"contact\" value=\"mail\">\r\n    <label for=\"Choice3\">Mail<\/label>\r\n  <\/div>\r\n  <div>\r\n    <button type=\"submit\">Submit<\/button>\r\n  <\/div>\r\n<\/form>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"selecting<\/a><\/p>\n
If \u2018checked\u2019 is put along with every button, the one put later overrides the ones put before it.<\/p>\n
CSS and Radio Buttons<\/h2>\n
We can style radio buttons using CSS3.<\/p>\n
<html>\r\n<head>\r\n  <title>Radio Buttons<\/title>\r\n  <style>\r\n    label {\r\n  margin-right: 15px;\r\n  line-height: 32px;\r\n}\r\n    input {\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n\r\n  border-radius: 50%;\r\n  width: 16px;\r\n  height: 16px;\r\n\r\n  border: 2px solid #999;\r\n  transition: 0.2s all linear;\r\n  margin-right: 5px;\r\n\r\n  position: relative;\r\n  top: 4px;\r\n}\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n<form> \r\n  <p>Please select your preferred contact method:<\/p>\r\n  <div>\r\n    <input type=\"radio\" id=\"contactChoice1\"\r\n           name=\"contact\" value=\"email\">\r\n    <label for=\"contactChoice1\">Email<\/label>\r\n    <input type=\"radio\" id=\"contactChoice2\"\r\n           name=\"contact\" value=\"phone\">\r\n    <label for=\"contactChoice2\">Phone<\/label>\r\n    <input type=\"radio\" id=\"contactChoice3\"\r\n           name=\"contact\" value=\"mail\">\r\n    <label for=\"contactChoice3\">Mail<\/label>\r\n  <\/div>\r\n  <div>\r\n    <button type=\"submit\">Submit<\/button>\r\n  <\/div>\r\n<\/form>\r\n<pre id=\"log\">\r\n<\/pre>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"\"<\/a><\/p>\n
JavaScript and Radio Buttons<\/h2>\n
We can add an event listener to the submit button of the form. Following is an example-<\/p>\n
<html>\r\n<head>\r\n  <title>Radio Buttons<\/title>\r\n  <script type=\"text\/javascript\">\r\nvar form = document.querySelector(\"form\");\r\nvar log = document.querySelector(\"#log\");\r\nform.addEventListener(\"submit\", function(event) {\r\n  var data = new FormData(form);\r\n  var output = \"\";\r\n  for (const entry of data) {\r\n    output = output + entry[0] + \"=\" + entry[1] + \"\\r\";\r\n  };\r\n  log.innerText = output;\r\n  event.preventDefault();\r\n}, false);\r\n  <\/script>\r\n<\/head>\r\n<body>\r\n<form> \r\n  <p>Please select your preferred contact method:<\/p>\r\n  <div>\r\n    <input type=\"radio\" id=\"contactChoice1\"\r\n           name=\"contact\" value=\"email\">\r\n    <label for=\"contactChoice1\">Email<\/label>\r\n    <input type=\"radio\" id=\"contactChoice2\"\r\n           name=\"contact\" value=\"phone\">\r\n    <label for=\"contactChoice2\">Phone<\/label>\r\n    <input type=\"radio\" id=\"contactChoice3\"\r\n           name=\"contact\" value=\"mail\">\r\n    <label for=\"contactChoice3\">Mail<\/label>\r\n  <\/div>\r\n  <div>\r\n    <button type=\"submit\">Submit<\/button>\r\n  <\/div>\r\n<\/form>\r\n<pre id=\"log\">\r\n<\/pre>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"Javascript<\/a><\/p>\n
Summary<\/h2>\n
In this article, we discussed HTML radio buttons, which are of the utmost importance when details are required from the user. Radio buttons enable the users to select options from a set of limited options, as provided by the developer or as per the form relevance. Radio buttons consist of \u2018name\u2019 and \u2018value\u2019 as its mandatory attributes. We have also looked at the usage of radio buttons with JavaScript and CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"
HTML Radio button is typically used to select a particular option from a group of related options. To define a radio button, we use the <input> element of HTML. When a particular option is...<\/p>\n","protected":false},"author":10,"featured_media":79939,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22400],"tags":[22807,22808],"class_list":["post-79936","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-html-radio-button","tag-javascript-and-radio-buttons"],"yoast_head":"\nHTML Radio Button - Radio Group and Attributes - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn about HTML Radio Button - Radio groups and attributes, CSS and Javascript for radio button and how to set default radio button with syntax and example\" \/>\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-radio-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Radio Button - Radio Group and Attributes - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn about HTML Radio Button - Radio groups and attributes, CSS and Javascript for radio button and how to set default radio button with syntax and example\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/html-radio-button\/\" \/>\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-07-27T10:52:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-24T10:58:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Radio-Buttons-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 Radio Button - Radio Group and Attributes - DataFlair","description":"Learn about HTML Radio Button - Radio groups and attributes, CSS and Javascript for radio button and how to set default radio button with syntax and example","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-radio-button\/","og_locale":"en_US","og_type":"article","og_title":"HTML Radio Button - Radio Group and Attributes - DataFlair","og_description":"Learn about HTML Radio Button - Radio groups and attributes, CSS and Javascript for radio button and how to set default radio button with syntax and example","og_url":"https:\/\/data-flair.training\/blogs\/html-radio-button\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-07-27T10:52:29+00:00","article_modified_time":"2024-07-24T10:58:16+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Radio-Buttons-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-radio-button\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/html-radio-button\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33"},"headline":"HTML Radio Button – Radio Group and Attributes","datePublished":"2020-07-27T10:52:29+00:00","dateModified":"2024-07-24T10:58:16+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-radio-button\/"},"wordCount":526,"commentCount":1,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-radio-button\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Radio-Buttons-DF.jpg","keywords":["HTML radio button","javascript and radio buttons"],"articleSection":["HTML Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/html-radio-button\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/html-radio-button\/","url":"https:\/\/data-flair.training\/blogs\/html-radio-button\/","name":"HTML Radio Button - Radio Group and Attributes - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-radio-button\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-radio-button\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Radio-Buttons-DF.jpg","datePublished":"2020-07-27T10:52:29+00:00","dateModified":"2024-07-24T10:58:16+00:00","description":"Learn about HTML Radio Button - Radio groups and attributes, CSS and Javascript for radio button and how to set default radio button with syntax and example","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/html-radio-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/html-radio-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/html-radio-button\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Radio-Buttons-DF.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Radio-Buttons-DF.jpg","width":1200,"height":628,"caption":"HTML Radio Buttons"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/html-radio-button\/#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 Radio Button – Radio Group and Attributes"}]},{"@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\/79936","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=79936"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/79936\/revisions"}],"predecessor-version":[{"id":142870,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/79936\/revisions\/142870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/79939"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=79936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=79936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=79936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}