HTML <input type=”radio”> Last Updated : 09 Dec, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report HTML <input type="radio"> is used to define a radio button, where only one option in a group can be selected at a time. Buttons in the same group have the same name attribute, so selecting one automatically deselects the others. Multiple radio button groups can exist with different names.Note: The value attribute gives each radio button a unique identifier, helping identify the selected option upon form submission.Syntax<input type="radio">Example 1: The HTML <input type="radio"> creates a set of radio buttons for selecting a technology brand. Only one option can be selected at a time, with "Microsoft" pre-selected using the checked attribute. HTML <!DOCTYPE html> <html lang="en"> <body> <p>Select a Technology Brand:</p> <div> <input type="radio" id="Netflix" name="brand" value="Netflix"> <label for="Netflix">Netflix</label> </div> <div> <input type="radio" id="Audi" name="brand" value="Audi"> <label for="Audi">Audi</label> </div> <div> <input type="radio" id="Microsoft" name="brand" value="Microsoft" checked> <label for="Microsoft">Microsoft</label> </div> </body> </html> OutputHTML Example OutputExample 2: The HTML <input type="radio"> is used to create multiple radio buttons, allowing users to choose one option. All options share the same name attribute, ensuring that only one can be selected at a time. HTML <!DOCTYPE html> <html lang="en"> <body> <h2><input type="radio"></h2> <h3>Choose an Option:</h3> <label> <input type="radio" name="option" value="option1"> Option 1 </label> <label> <input type="radio" name="option" value="option2"> Option 2 </label> <label> <input type="radio" name="option" value="option3"> Option 3 </label> </body> </html> OutputHTML Example OutputUse casesAdding Radio Buttons in a Form: Use the <input type="radio"> element within <form> tags, ensuring each radio button has the same name attribute to group them together.Getting the Selected Radio Button Value: Access the value property of the selected radio button to retrieve the chosen option.Checking if a Radio Button is Selected: Use the checked property of the radio button to check whether it is selected or not.Styling Labels for Selected Radio Buttons: Use the :checked pseudo-class in CSS to style the label associated with the selected radio button.Creating Custom Radio Buttons: Hide the default radio button input and use CSS to create a custom appearance, styling it to reflect the checked state when selected.Supported BrowsersGoogle Chrome 1 Microsoft Edge 12Firefox 1 Opera 15Safari 1 Comment More infoAdvertise with us M manaschhabra2 Follow Improve Article Tags : Web Technologies HTML HTML-Attributes Similar Reads HTML <input type = "button"> The HTML <input type="button"> element creates a clickable button that can be customized with text or an image. It does not have any default behavior but can be used to perform actions using JavaScript. It makes versatile for various interactive purposes in web forms and applications. Syntax 1 min read HTML <input type="checkbox"> The HTML <input type="checkbox"> creates a checkbox input element. It displays as a square box, checked when activated. Checkboxes enable users to select one or more options from a limited set of choices. Syntax <input type="checkbox"> Example: In this example, we will demonstrate using 1 min read HTML <input type="color"> The HTML <input type="color"> element is used to define a color picker. The value should be a seven-character hexadecimal notation representing RGB values in hexadecimal format. Its default value is #000000 (black). Syntax<input type="color"> Example: In this example, we will demonstrate 1 min read HTML <input type="date"> The HTML <input type="date"> element provides a date picker interface for selecting dates. It allows users to input dates using a calendar widget, ensuring standardized date input across different browsers and devices. Syntax<input type="date">Example: In this example, the HTML <inpu 1 min read HTML <input type="email"> The HTML <input type="email"> is used to create an input field specifically for email addresses. It automatically validates the input to ensure it follows the correct email format. Adding the "multiple" attribute allows the user to input multiple email addresses, separated by commas.Syntax< 1 min read HTML <input type="file"> The HTML <input type="file"> element is used to create a file input box in forms. It allows users to browse and select files to upload from the devices. When the form is submitted, the selected file(s) can be uploaded to the server. Syntax<input type="file"> Example: In this example, we 1 min read HTML <input type="hidden"> The HTML <input type="hidden"> element defines a hidden input field. Hidden fields store data that are not visible or modifiable by users when they submit a form. They are useful for including data that needs to be sent with the form but does not need to be displayed. Syntax<input type="hid 1 min read HTML <input type="image"> The HTML <input type="image"> element defines an image as a submit button within a form. When the image is clicked, the form is submitted, similar to a regular submit button. It allows for more visually appealing form submissions, as the image can serve as the button instead of a plain text or 2 min read HTML <input type="month"> The HTML <input type="month"> element creates a month picker, allowing users to select a specific month and year without specifying a day. It provides a standardized way to input month-based data to enhance user experience. Syntax<input type="month"> Example: This example demonstrate the 1 min read HTML <input type="number"> The HTML <input type="number"> element creates an input field for entering numeric values. It allows for easy input of numbers with optional restrictions such as minimum, maximum, and step values. This element enhances form validation by ensuring only numeric input is accepted, improving user 1 min read Like