HTML radio buttons allow users to select one option at a time and are commonly used in user input forms. They can be customized with CSS and JavaScript and have a name and value field. They are similar to checkboxes but only allow one selection.
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 in that they offer the user several options but allow only one of the provided options to be selected at a time. One of the most common uses of HTML radio buttons is to capture a choice within user input forms, although they can also cause their select and deselect events to be intercepted by scripts or other programs, allowing them to take action 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 where HTML radio buttons can be used include selecting a gender, which can only have one value between two different options, or choosing a single shipping address when multiple addresses are listed.
In some respects, HTML radio buttons are similar to HTML checkboxes. Each button is assigned an image or text label that appears where the button is located within a layout. Next to this label is a circle that is blank 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 the circle to select it; The unique thing about HTML radio buttons is that when a button is selected, all other buttons in the same group are deselected, allowing you to choose only one item at a time. This is different from checkboxes, which are similar but allow you to select any number of options at once.
There are two values within HTML radio button properties that are important to their use. The first is the name field which 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 for different sets of radio buttons within the same document. The value tag is the actual return value for the radio button when selected and sent to a script or program for processing.
The display of HTML radio buttons can be changed in a few ways. Through the use of standard HTML and CSS alignment values, buttons can be dynamically arranged within a document in much the same way as an image is aligned. The appearance of the buttons, especially the circle and selected circle images, can be fully customized 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.
Protect your devices with Threat Protection by NordVPN
