How to implement RadioButton in HTML-HTML Tutorial-php.cn

How to implement RadioButton in HTML

不言

Release： 2018-12-10 09:23:29

Original

9765 people have browsed it

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.

How to implement How to implement How to implement RadioButton in HTML in HTML in HTML

Let’s first look at the format of the input tag

<input id="(id)" name="(组名称)" type="radio"></input>

Copy after login

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>

Copy after login

Running results

When using a web browser to open the above HTML file , the effect shown below will be displayed.

How to implement How to implement How to implement RadioButton in HTML in HTML in HTML

Click to change the selected state of a radio button

How to implement How to implement RadioButton in HTML in HTML

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>

Copy after login

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.

How to implement How to implement RadioButton in HTML in HTML

Each group is separate and the radio button selections are independent.

How to implement How to implement How to implement RadioButton in HTML in HTML in HTML

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!