Appearance
How to Assign a Checked Initial Value to the Radio Button
Solution with the checked attribute
If you want to assign a checked initial value to your radio button, you can use the HTML checked attribute. In the example below, we use a <form> tag and add <div> elements within it. Inside our <div> elements, we add <input> and <label> tags and then use checked="checked" for the <input> that we want to be initially checked.
Example of assigning a checked value by using checked="checked":
Example of assigning a checked value by using checked="checked":
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Which is your favorite fruit?</p>
<form action="/form/submit" method="get">
<div>
<input type="radio" id="apple" name="fruite" value="apple" checked="checked" />
<label for="apple">Apple</label>
</div>
<div>
<input type="radio" id="banana" name="fruite" value="banana" />
<label for="banana">Banana</label>
</div>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Result
Which is your favorite fruit? <form action-xhr="/form/submit" method="post">
<div> <input checked="checked" id="apple" name="fruite" type="radio" value="apple"></input> <div> <input id="banana" name="fruite" type="radio" value="banana"></input> </div> <input type="submit" value="Submit"></input> </form> </div></div>Or you can just use the checked attribute without any value like the following.
Example of assigning a checked value by using the checked attribute without a value:
Example of assigning a checked value by using the checked attribute without a value:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Which is your favorite fruit?</p>
<form action="/form/submit" method="get">
<div>
<input type="radio" id="pineapple" name="fruite" value="pineapple" />
<label for="pineapple">Pineapple</label>
</div>
<div>
<input type="radio" id="orange" name="fruite" value="orange" checked />
<label for="orange">Orange</label>
</div>
<div>
<input type="radio" id="kiwi" name="fruite" value="kiwi" />
<label for="kiwi">Kiwi</label>
</div>
<div>
<input type="radio" id="mango" name="fruite" value="mango" />
<label for="mango">Mango</label>
</div>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>