HTML Radio INPUT element

 HTML Radio INPUT element

  • The HTML `<input>` element with `type=" radio"` is used to create radio buttons.
  • Radio buttons are typically used in groups, where only one option can be selected at a time.

  Syntax:

<input type="radio" name="groupName" value="optionValue1" id="option1">

<label for="option1">Option 1</label>

 

<input type="radio" name="groupName" value="optionValue2" id="option2">

<label for="option2">Option 2</label>

 

  • - `type="radio"`: Specifies that the input should be rendered as a radio button.
  • - `name="groupName"`: Specifies the name attribute, which groups the radio buttons together. Only one radio button with the same name can be selected at a time.
  • - `value="optionValue1"`: Specifies the value that will be sent to the server if this radio button is selected.
  • - `id="option1"`: Provides a unique identifier for the radio button, which is associated with the `<label>` using the `for` attribute.

 

 Example:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Radio Button Example</title>

</head>

<body>

    <form action="process_form.php" method="post">

        <input type="radio" name="gender" value="male" id="male">

        <label for="male">Male</label>

 

        <input type="radio" name="gender" value="female" id="female">

        <label for="female">Female</label>

 

        <input type="submit" value="Submit">

    </form>

</body>

</html>


  • Make sure to adjust the form action (`action="process_form.php"`) to the actual URL or script that will process the form data on the server. 
  • Additionally, you can customize the radio button labels and attributes based on your specific requirements.

-------------------------------------------------------------------------  

Post a Comment

0 Comments