Html radio button | radio button html styling
Radio button Introduction
Radio button in HTML is not like a real-life musical radio. Radio buttons are a type of input in HTML forms. Radio buttons are something like checkboxes but are a little different.
Basic Code of radio button
Since the radio button is a type of input as mentioned earlier, we need to use the <input> tag to enable it. Use the code below to add a basic HTML radio button first.
The output would be a radio button below which you can click.
If clicked, the output is
Now let's see how to make an example form using a radio button which you would probably use.
Example Form using Html
First, add the HTML code below. Inside it we have <form> tag. Inside the <form> tag, we have the input type of radio:
<!DOCTYPE html>
<html>
<body>
<h1>Display Radio Buttons</h1>
<form action="/action_page.php">
<p>Please select your favorite Web language:</p>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
<br>
<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Your output would be:
Styling Radio Buttons html
People sometimes think that styling radio buttons is hard but it's actually very easy. You can style it in CSS by setting input as the selector or by giving a class for your radio button and styling that class.
Do check out the article in our blog here on how to style radio buttons here
And now you've successfully learned how to add HTML radio buttons and style them!
written by @codingporium
Thanks for reading! Do contact me via the methods below if you have to say anything:
Post a Comment