We are independent & ad-supported. We may earn a commission for purchases made through our links.
Advertiser Disclosure
Our website is an independent, advertising-supported platform. We provide our content free of charge to our readers, and to keep it that way, we rely on revenue generated through advertisements and affiliate partnerships. This means that when you click on certain links on our site and make a purchase, we may earn a commission. Learn more.
How We Make Money
We sustain our operations through affiliate commissions and advertising. If you click on an affiliate link and make a purchase, we may receive a commission from the merchant at no additional cost to you. We also display advertisements on our website, which help generate revenue to support our work and keep our content free for readers. Our editorial team operates independently of our advertising and affiliate partnerships to ensure that our content remains unbiased and focused on providing you with the best information and recommendations based on thorough research and honest evaluations. To remain transparent, we’ve provided a list of our current affiliate partners here.
Software

Our Promise to you

Founded in 2002, our company has been a trusted resource for readers seeking informative and engaging content. Our dedication to quality remains unwavering—and will never change. We follow a strict editorial policy, ensuring that our content is authored by highly qualified professionals and edited by subject matter experts. This guarantees that everything we publish is objective, accurate, and trustworthy.

Over the years, we've refined our approach to cover a wide range of topics, providing readers with reliable and practical advice to enhance their knowledge and skills. That's why millions of readers turn to us each year. Join us in celebrating the joy of learning, guided by standards you can trust.

What Are HTML Radio Buttons?

By Eugene P.
Updated: May 16, 2024
Views: 6,392
References
Share

In a HyperText Markup Language (HTML) document, radio buttons are a type of visual element that can be selected by a user. HTML radio buttons are unique, because they offer the user several options but only allow one of the given options to be selected at any one time. One of the most common uses for HTML radio buttons is to capture a choice within user input forms, although they also can have their selection and de-selection events intercepted by scripts or other programs, allowing them to act as instant selectors for other elements on a web page. Through the use of cascading style sheets (CSS) and JavaScript®, HTML radio buttons can use custom images for display, overriding their default appearance. Examples of situations in which HTML radio buttons could be used include selecting a gender, which can only have one value from two different options, or choosing a single shipping address when multiple addresses are listed.

In some aspects, HTML radio buttons are similar to HTML checkboxes. Each button is assigned an image or text label that is displayed where the button is located within a layout. Next to this label is a circle that is empty when the radio button is not selected and has a dot or other fill pattern inside it when it is selected. A user can click on the circle to select it; the unique aspect of HTML radio buttons is that, when a button is selected, all other buttons in the same group are de-selected, allowing only one item to be chosen at a time. This is unlike checkboxes, which are similar but allow any number of options to be selected at once.

There are two values within the properties of HTML radio buttons that are important to their use. The first is the name field that identifies the group to which a radio button belongs within an HTML document, and the second is the value field. When a button is selected, all other radio buttons with the same name, also called their group, are deselected. Using different group names allows different sets of radio buttons to exist within the same document. The value tag is the actual return value for the radio button when it is selected and submitted to a script or program for processing.

The visual display of HTML radio buttons can be modified in a few ways. Through the use of standard HTML and CSS alignment values, the buttons can be dynamically arranged within a document in much the same way that an image is aligned. The appearance of the buttons, specifically the circle and selected circle images, can be customized completely and replaced with user-generated images by manipulating the document object model (DOM) with CSS and JavaScript®, although browser support is not always consistent from one application to another.

Share
EasyTechJunkie is dedicated to providing accurate and trustworthy information. We carefully select reputable sources and employ a rigorous fact-checking process to maintain the highest standards. To learn more about our commitment to accuracy, read our editorial process.
Link to Sources
Discussion Comments
Share
https://www.easytechjunkie.com/what-are-html-radio-buttons.htm
Copy this link
EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.

EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.