How to create radio button in an HTML page

HTML Radio Button in a Form

In HTML, a radio button is used to allow users to make a single selection from a list of options.

Radio buttons are used in groups, where each button represents a different choice option. Users can select only one option at a time within the group.

How to Create a Group of Radio Buttons

Create an HTML <input> element inside an HTML form element.

Add type="radio" (type attribute with value 'radio') to the <input> element. Type attribute value is set to 'radio' to define the input element as a Radio button.

Add name="program" (name attribute with value 'program') to the <input> element.

The name attribute (program) will link all radio buttons together into a group.

Add value="Python" (value attribute with value 'Python') to the <input> element. The value attribute here sets the option value of the radio button.

Add a label ( <label>Python</label> ) next to the radio button to display the text "Python" next to the radio button.

Add two more radio buttons following the above instructions with value="Java" and value="C#" and add two labels with text "Java" and "C#".

Have a look at the following example:

Example of Radio Button in a Form

Output of the above code example

Example of Radio Button in a Form in an HTML Page

Please select a program and click "Submit Program" button to see the message with your selection. JavaScript function is used to dispaly the message.

Live Code Playground

In the following HTML code editor, you can practice the above code by creating new radio buttons. Click on the 'Run Code' button to render the code; the rendered page will be displayed in the following HTML Code Output frame. Practice until you become comfortable and proficient with your code.

HTML Online Editor

<!DOCTYPE html>
<html>
<head>
    <title>Radio button in a form in a HTML page</title> 
</head>
<body>
    <h4>Example of Radio Button in a Form in an HTML Page</h4>
    <hr />
    <form>
        <input type="radio" id="option1" name="program" value="Python"><label for="option1">Python</label>
        <input type="radio" id="option2" name="program" value="Java"><label for="option2">Java</label>
        <input type="radio" id="option3" name="program" value="C#"><label for="option3">C#</label>
        <input type="submit" id="btnSubmit" value="Submit Program" />
    </form>
    
    <script>
        var btnSubmit = document.querySelector("#btnSubmit");
        btnSubmit.addEventListener('click', function (e) {
            e.preventDefault();
            var name = document.getElementsByName("program");
            for (var i = 0; i < name.length; i++) {
                if (name[i].checked) {
                    alert("You have selected " + name[i].value);
                    break;
                }
            }

})
    </script>
</body>
</html>

HTML Code Output

More Code Examples:

Python Code Examples

JavaScript Code Examples

Java Code Examples

C# Code Examples

C Code Examples

C++ Code Examples