How to Use Radio Buttons in HTML Forms

HTML Radio Buttons

What is Input Type Radio in HTML? Learn Easily

✷ In HTML, radio buttons are form elements that let users choose just one option from a list of options.

✷ They are frequently used in multiple option where the user is required to select only one of user must choose, such as choosing a subscription plan, payment method, or gender.

✷The <input> tag with the property type="radio" is used to construct radio buttons. Multiple radio buttons must have the same name attribute in order to be grouped together. This guarantees that the other options are automatically deselected when one is chosen.

✷ additionally, each radio button contains a value element that shows the information given to the server upon form submission. Each option is frequently described by a label, which improves the form's accessibility and usability.

Syntax :

<input type = "radio">

<input type="radio" name="group_name" value="optional">

<input>

HTML form element use to create input fields.
can create different types of input text,password,checkbox , radiio etc.

type="radio"

defines the input as radio button.
radio button allow users to select only one option from a group.

name="group_name"

name attribute groups radio button
all radio buttons with same name belong one group
only one option can be selected with group

value ="option"

value sent to the server when submitted form

 Radio Buttons in HTML Forms
Program 

<!DOCTYPE html>

<html>

<body>

<h2>Radio Buttons</h2>

<p>The <strong>input type="radio"</strong> defines radio button:</p>

<input type="radio" name="grade" value="First" checked> First<br>

<input type="radio" name="grade" value="Second"> Second<br>

<input type="radio" name="grade" value="Third"> Third<br>

</form>

</body>

</html>

Explain Program

Step 1 ]

<!Doctype html>
<!doctype html> always be the first line of any HTML document.

Step 2 ]

<html> and </html>
html is the root element.

Step 3 ]

<body> and </body>
body is main content area.
All visible content inside to the <body> tag

Step 4]

<p>The <strong>input type="radio"</strong> defines radio button:</p>

text input type="radio" , bold use <strong>

Step 5]

browser send the form data

Step 6]

<input type="radio" name="grade" value="First" checked> First<br>

<input type="radio" name="grade" value="Second"> Second<br>

<input type="radio" name="grade" value="Third"> Third<br>

1] radio button :- labeled :- first, Second, Third ,Fail

2] name :- grade :- radio button have same name

3] value :- value sent to server when form is submitted.

4] <br> :- line break

Step 7]

<in

put type="submit">

adds submit button to form

HTML Radio Buttons Example

Output

Related Post :-

Header Ads

How to Use Radio Buttons in HTML Forms

HTML Radio Buttons