Radio buttons allow users to select only one option from a predefined set of mutually exclusive choices. They are essential for forms where a single selection is required, enhancing user experience and data integrity.

Example 1: Basic Radio Button Group

<form>
  <p>Select your favorite color:</p>
  <input type="radio" id="red" name="fav_color" value="red">
  <label for="red">Red</label><br>
  <input type="radio" id="blue" name="fav_color" value="blue">
  <label for="blue">Blue</label><br>
  <input type="radio" id="green" name="fav_color" value="green">
  <label for="green">Green</label>
</form>

Explanation This example demonstrates a basic set of radio buttons for selecting a favorite color. All radio buttons share the same name attribute (fav_color), which groups them together, ensuring only one can be selected. The id and for attributes link the label to its respective radio button for accessibility.

Example 2: Pre-selected Radio Button

<form>
  <p>Choose your preferred contact method:</p>
  <input type="radio" id="email" name="contact_method" value="email">
  <label for="email">Email</label><br>
  <input type="radio" id="phone" name="contact_method" value="phone" checked>
  <label for="phone">Phone</label><br>
  <input type="radio" id="mail" name="contact_method" value="mail">
  <label for="mail">Mail</label>
</form>

Explanation Here, the checked attribute is used on the "Phone" radio button. This makes "Phone" the default pre-selected option when the page loads, which is useful for common choices or to guide users.

Example 3: Radio Buttons with Fieldset and Legend for Accessibility

<form>
  <fieldset>
    <legend>Select your preferred operating system:</legend>
    <input type="radio" id="windows" name="os_choice" value="windows">
    <label for="windows">Windows</label><br>
    <input type="radio" id="macos" name="os_choice" value="macos">
    <label for="macos">macOS</label><br>
    <input type="radio" id="linux" name="os_choice" value="linux">
    <label for="linux">Linux</label>
  </fieldset>
</form>

Explanation Using <fieldset> and <legend> semantically groups related radio buttons and provides a clear caption for the group. This significantly improves accessibility for users navigating with screen readers.

Example 4: Disabled Radio Button

<form>
  <p>Membership Level:</p>
  <input type="radio" id="bronze" name="membership_level" value="bronze">
  <label for="bronze">Bronze</label><br>
  <input type="radio" id="silver" name="membership_level" value="silver" disabled>
  <label for="silver">Silver (Unavailable)</label><br>
  <input type="radio" id="gold" name="membership_level" value="gold">
  <label for="gold">Gold</label>
</form>

Explanation The disabled attribute is applied to the "Silver" radio button, making it unselectable and visually distinct. This is useful for options that are temporarily unavailable or not applicable under certain conditions.

Example 5: Radio Buttons for Form Submission

<form action="/submit-survey" method="post">
  <p>How do you prefer to receive updates?</p>
  <input type="radio" id="newsletter" name="update_preference" value="newsletter">
  <label for="newsletter">Email Newsletter</label><br>
  <input type="radio" id="sms" name="update_preference" value="sms">
  <label for="sms">SMS Alerts</label><br>
  <input type="radio" id="none" name="update_preference" value="none" checked>
  <label for="none">No Updates</label><br><br>
  <input type="submit" value="Submit Preference">
</form>

Explanation This example integrates radio buttons into a complete form with a submission button. When the form is submitted, the value of the selected radio button within the update_preference group will be sent to the server.