How to implement the selection box effect of a form in html? Implementation of radio button and multi-select box (code example)-HTML Tutorial-php.cn

How to implement the selection box effect of a form in html? Implementation of radio button and multi-select box (code example)

青灯夜游

Release： 2018-09-12 11:16:45

Original

17308 people have browsed it

When using a form to submit data, in order to reduce some user operations, it is a good idea to use a selection box. This chapter will introduce to you how to implement the selection box effect of the form in HTML? Implementation of radio buttons and check boxes (code example). Through radio button code and check box code examples, the radio button style and multi-select box style are implemented, which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Selection box types and syntax

#There are two types of selection boxes in html, namely radio button boxes and check boxes. The difference is that the user can only select one option in the radio button box, while the user can select multiple options in the check box, or even select all.

Grammar:

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

Copy after login

2. html radio button style

html radio button Code:
##

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单选框</title>
	</head>
	<body>
		<form name="form" method="post" action="">
		              你是否喜欢运动？<br />
		     <input type="radio" name="radio" value="喜欢"/>喜欢
		     <input type="radio" name="radio" value="不喜欢"/>不喜欢
		     <input type="radio" name="radio" value="无所谓"/>无所谓
		</form>
	</body>
</html>

Copy after login

Rendering:

How to implement the selection box effect of a form in html? Implementation of radio button and multi-select box (code example)

As can be seen from the above example:

When type="radio", the selection box is defined as a radio button;

name attribute: Defines the name of the radio button. Radio buttons are used in groups. Radio options in the same group must use the same name;

value attribute: Defines the value of the radio button. The field values in the same group must be different.

When checked="checked" is set, this option is selected by default. It can be used regardless of radio button or check box, such as in the radio button box:

3. HTML check box style

The check box mainly allows web viewers to select multiple options at the same time in a set of options. . Each checkbox is an independent element and must have a unique name.

html check box code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复选框</title>
	</head>
	<body>
		<form name="form" method="post" action="">
		              你喜欢什么运动？<br />
		     <input type="checkbox" name="checkbox" value="跑步" checked="checked"/>跑步
		     <input type="checkbox" name="checkbox" value="羽毛球"/>羽毛球
		     <input type="checkbox" name="checkbox" value="乒乓球"/>乒乓球
		     <input type="checkbox" name="checkbox" value="乒乓球"/>登山
		</form>
	</body>
</html>

Copy after login

Rendering:

How to implement the selection box effect of a form in html? Implementation of radio button and multi-select box (code example) ##As can be seen from the above example:

When type="checkbox", the selection box is defined as a check box;

name attribute: Defines the name of the check box. Check boxes in the same group use different names, but also It can be defined as the same name (array), for example: name[];

value attribute: defines the value of the check box, and the field values in the same group must be different.

4. The name attribute of the selection boxIn an HTML form, whether it is a group of radio buttons (radio) or a group of complex The checkbox must contain the name attribute. This is to facilitate obtaining the value passed by the form on the processing page.

A group of radio buttons (radio): Because the value in the name attribute is the same, only one can be selected, which can be obtained directly on the processing page, such as $_GET['name'];

A set of checkboxes (checkbox): Generally, the value in the name attribute is set to name[]. If it is selected, an element is added to the array name[], and the value is obtained as follows on the processing page:

if(!empty($_POST[&#39;name&#39;])){
for($i=0; $i< count($_POST[&#39;name&#39;]); $i++){
echo $array[$i].&#39;<br />&#39;;
}
}

Copy after login

In this way, multiple different data passed in the form checkbox (checkbox) can be collected.

The above is the detailed content of How to implement the selection box effect of a form in html? Implementation of radio button and multi-select box (code example). For more information, please follow other related articles on the PHP Chinese website!