Html radio button | radio button html styling - codewithrandom

Html radio button | radio button html styling

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.


<input type="radio">

The output would be a radio button below which you can click.

If clicked, the output is

Html radio button | radio button html styling



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:
Html radio button | radio button html styling



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!


Post a Comment

Previous Post Next Post