Radio button

In this article we are going to learn about radio buttons in html, how to create buttons that provides lists of more than one choices for users to choose or select.

We learnt about html in general, learning the structure of hypertext markup language, text in html, lists in html, links in html, inputs in html, buttons in html, forms in html, html elements, tables in html, marquee in html, horizontal line in html and textarea in html so, now we will be focusing on radio buttons.

Radio button

Radio button is a button that a user can use to choose or select one possible choice on limited list of choices in webpages.

Let us create two radio buttons, copy and paste below code.

<!DOCTYPE html>

<body>

<input type="radio" name="me"/>

<br/>

<input type="radio" name="me"/>

</body>

</html>


So, we should have the following results and if you click on each of them the button will be selected with a filled color.



Let us create another two radio buttons with text label, copy and paste below code.

<!DOCTYPE html>

<body>

<label>

<input type="radio"/> HTML tutorial

</label>

<br/>

<label>

<input type="radio" name="CSS"/> CSS tutorial

</label>

</body>

</html>


So, we should have the following results and the radio buttons have text labels that a user can choose.



Let us create a list of items with radio buttons labeled, copy and paste below code.

<!DOCTYPE html>

<body>

<ol>

<li>

<label>

<input type="radio" name="HTML"/> HTML tutorial

</label>

</li>

<li>

<label>

<input type="radio" name="CSS"/> CSS tutorial

</label>

</li>

<li>

<label>

<input type="radio" name="PHP"/> PHP tutorial

</label>

</li>

<li>

<label>

<input type="radio" name="JAVA"/> JAVA tutorial

</label>

</li>

</ol>

</body>

</html>


So, we should have the following results and we have a list with four radio buttons labeled.


Let us create a form with radio buttons labeled, copy and paste below code.

<!DOCTYPE html>

<body>

<form>

<div>

<label>

Name:

<input type="text" name="name" placeholder="type name"/>

</label>

</div>

<div>

<label>

Surname:

<input type="text" name="surname" placeholder="type surname"/>

</label>

</div>

<div>

<label>

Gender:

<input type="radio" name="male"/> Male

<input type="radio" name="female"/> Female

</label>

</div>

</form>

</body>

</html>


So, we should have the following results and we have a form with radio buttons labeled.


Conclusion

In this article we learnt about radio buttons in html with examples, how to create buttons that provides lists of more than one choices for users to choose or select.