Using the <input> element with type="radio", we can create a radio button. Radio buttons allow users to select one option from a group of choices.
How to group the radio buttons together?
To group the radio buttons together, you assign the same name attribute to each button.
radio-buttons.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Radio Buttons Example</title> </head> <body> <form action="https://httpbin.org/post" method="post"> <label> <input type="radio" name="gender" value="male"> Male </label><br> <label> <input type="radio" name="gender" value="female"> Female </label><br> <label> <input type="radio" name="gender" value="other"> Other </label><br> <input type="submit" value="Submit"> </form> </body> </html>
Above snippet generate below screen.
In this example,
1. Each <input type="radio"> has the same name attribute, meaning only one can be selected at a time.
2. The value attribute defines the option associated with each button. This value is sent to the server upon form submission.
3. The <label> element makes it easier to click on the radio buttons by associating the text with the input.
No comments:
Post a Comment