HTML Form Radio Input & Attributes

HTML form radio input is used to create a group of mutually exclusive options, where only one option in the group can be selected at a time. The attributes for radio inputs are similar to other input types, with some specific to the functionality of radio buttons.


Attributes of <input type="radio">

type: Specifies the type of input. For radio buttons, this value is always "radio".

<input type="radio" id="option1" name="options" value="Option1">
<label for="option1">Option 1</label>


name: Assigns a name to the input field, which groups radio buttons together. Radio buttons with the same name attribute value are part of the same group, and only one can be selected at a time.

<input type="radio" id="option1" name="gender" value="Option1">
<label for="option1">Male</label>


id: Assigns a unique identifier to the input field, which can be used to target the element with CSS or JavaScript.

<input type="radio" id="male" name="gender">
<label for="male">Male</label>


class: Assigns one or more class names to the input field for styling purposes.

<input type="radio" class="gender-radio" id="gender">
<label for="gender">Male</label>


value: Sets the value of the radio button, which is sent to the server when the form is submitted if this radio button is selected.

<input type="radio" value="male" id="gender">
<label for="gender">Male</label>


checked: Specifies that the radio button should be pre-selected when the page loads.

<input type="radio" id="gender" checked>
<label for="gender">Male</label>


disabled: Disables the radio button, making it unresponsive and preventing it from being selected.

<input type="radio" id="gender" disabled>
<label for="gender">Male</label>


required: Indicates that at least one radio button in the group must be selected before submitting the form.

<input type="radio" id="gender" required>
<label for="gender">Male</label>


Example with Radio Input

Here's an example of an HTML form with radio input fields:

<!DOCTYPE html>
<html>
<head>
    <title>Radio Input Example</title>
</head>
<body>
    <form action="/submit-gender" method="POST">
        <label for="male">Male:</label>
        <input type="radio" id="male" name="gender" value="male" required>
        <br>
        <label for="female">Female:</label>
        <input type="radio" id="female" name="gender" value="female" required>
        <br>
        <label for="other">Other:</label>
        <input type="radio" id="other" name="gender" value="other" required>
        <br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>


In this example:

  • The name attribute groups the radio buttons together, so only one can be selected at a time.
  • The value attribute sets the value sent to the server when the form is submitted.
  • The required attribute ensures that the user must select one of the radio buttons before submitting the form.


Note on Placeholder

The placeholder attribute is not applicable to radio inputs. Placeholders are typically used with text inputs to provide a hint or example of what can be entered into the field. For radio buttons, labels are used to describe the options.