Home > Article > Web Front-end > How to implement RadioButton in HTML
How to implement RadioButton in HTML
- 不言Original
- 2018-12-05 11:20:229700browse
To use HTML to implement How to implement How to implement How to implement RadioButton in HTML in HTML in HTML, you need to use the input tag, in which type is specified as radio. We will talk about the detailed content in the following article.
Let’s first look at the format of the input tag
<input id="(id)" name="(组名称)" type="radio"></input>
Note: For values that need to be selected for retrieval, you can use form submission Or get it using JavaScript.
Let’s look at a specific example
The code is as follows
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form name="form1" action="">
<input id="Radio1" name="RadioGroup1" type="radio" /><label for="Radio1">单选按钮 元素1</label><br/>
<input id="Radio2" name="RadioGroup1" type="radio" /><label for="Radio2">单选按钮 元素2</label><br />
<input id="Radio3" name="RadioGroup1" type="radio" /><label for="Radio3">单选按钮 元素3</label><br />
</form>
<div id="output"></div>
</body>
</html>Running results
When using a web browser to open the above HTML file , the effect shown below will be displayed.
Click to change the selected state of a radio button
When using How to implement How to implement How to implement RadioButton in HTML in HTML in HTML in multiple groups
The code is as follows
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form name="form1" action="">
<div style="margin:16px;border:dotted 1px #202020;">
<input id="Radio1" name="group01" type="radio" /><label for="Radio1">单选项目1</label><br />
<input id="Radio2" name="group01" type="radio" /><label for="Radio2">单选项目2</label><br />
<input id="Radio3" name="group01" type="radio" /><label for="Radio3">单选项目3</label><br />
</div>
<div id="output1"></div>
<div style="margin:16px;border:dotted 1px #202020;">
<input id="Radio4" name="group02" type="radio" /><label for="Radio4">单选项目4</label><br />
<input id="Radio5" name="group02" type="radio" /><label for="Radio5">单选项目5</label><br />
<input id="Radio6" name="group02" type="radio" /><label for="Radio6">单选项目6</label><br />
</div>
<div id="output2"></div>
</form>
</body>
</html>Instructions:
To divide the radio buttons into multiple groups, set the name attribute of each group to a different name. In the above example, the name attribute of Radio 1, Radio 2, and Radio 3 is group 1. The name attribute of Radio 4, Radio 5, and Radio 6 is group 2.
Run results
When you open the above HTML file with a web browser, the effect shown below will be displayed.
Each group is separate and the radio button selections are independent.
The above is the detailed content of How to implement RadioButton in HTML. For more information, please follow other related articles on the PHP Chinese website!