Home > Article > Web Front-end > How to implement the selection box effect of a form in html? Implementation of radio button and multi-select box (code example)
How to implement the selection box effect of a form in html? Implementation of radio button and multi-select box (code example)
- 青灯夜游Original
- 2018-09-12 11:16:4517246browse
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"/>
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>Rendering:
 "153671643175698How to implement the selection box effect of a form in html? Implementation of radio button and multi-select box (code example)")
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>Rendering:
##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['name'])){
for($i=0; $i< count($_POST['name']); $i++){
echo $array[$i].'<br />';
}
}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!