HTML Radio Buttons

« Prev Next »

Radio buttons in HTML allow users to choose only one option from a set of options. They are created with the <input type="radio"> element.

Syntax

<input type="radio" name="group_name" value="option_value"> Label

html-radio button

  • Group radio buttons with the name attribute.
  • The value attribute sends the selected button's value to the server when the form is submitted.
  • Only one button per group can be selected at once.

Example

<form>
  <p>Select your gender:</p>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>

  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>

  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>
Run ›

Key Attributes

Attribute Description
type Must be "radio" to define a radio button
name Groups radio buttons together
value Defines the value sent to the server when selected
checked Pre-selects the radio button
required Makes selecting an option mandatory
disabled Disables the radio button

With checked and required

<p>Choose a payment method:</p>
<input type="radio" name="payment" value="credit" checked> Credit Card
<input type="radio" name="payment" value="paypal"> PayPal
<input type="radio" name="payment" value="upi" required> UPI
Run ›
  • checked will make “Credit Card” selected by default.
  • required forces the user to select an option before submitting.
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.