HTML and user interaction in the Radio box and check box & drop-down list in the case

Use the Radio box, check box, to let the user select

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:

语法：

<input   type= "Radio/checkbox"   value= "value"    name= "name"   checked= "checked"/>

1. Type:

When Type= "Radio", the control is a radio box

When type= "checkbox", the control is a check box

2, Value: Submit data to the server values (background program PHP use)

3, Name: For the control name, in case the background program ASP, PHP use

4, checked: When set checked= "checked", this option is selected by default

As in the following code:

Results displayed in the browser:

Note: The same group of radio buttons, name values must be consistent, such as the above example is the same name "Radiolove", so that the same group of radio buttons can play the role of radio.

Example of a single radio code:

Save space with a drop-down list box

Drop-down lists are often used in Web pages, which can effectively save web space. It can be both single-choice and multi-select. The following code:

Explain:

1. Value:

2, selected= "selected":

Set the Selected= "selected" property, the option is selected by default.

Results displayed in the browser:

The drop-down list can also be multi-select, set the properties in the <select> tab, multiple="multiple" you can implement multi-select function, under the Windows operating system, the press the key while the multi-select Ctrl 单击 (under the Mac Command + click), You can select multiple options. The following code:

Results displayed in the browser:

Submit data using the Submit button

There are two types of buttons available in the form: Submit button, reset. This section explains the Submit button: The Submit button is required when the user needs to submit form information to the server.

Grammar:

<input   type= "Submit"   value= "Submission" >

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

举例：

Results displayed in the browser:

Use the reset button to reset the form information

When the user needs to reset the form information to the initial state, such as when the user enters the "username" and finds that the writing is incorrect, the 重置按钮 input box can be restored to its original state. You only need to set the type to "reset".

Grammar:

<input type="reset" value="重置">

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

举例：

Results displayed in the browser:

Enter your account

Label label on Form form

Little friends, you are learning the form in front of the various controls, when you find a label--label, this section to reveal its role.

The label label does not present any special effects to the user, and it is useful for improving usability for the mouse user. If you click on the text within the label tag, the control is triggered. That is, when the user clicks the label label, the browser automatically shifts focus to the label-related form control (automatically selected on the form control associated with the label label).

Grammar:

<label for= "Control ID Name" >

Note: The value in the for property of the label should be the same as the value of the associated control's ID property.

Example:

<form>  <label for= "male" > Male </label>  <input type= "Radio" name= "Gender" id= "male"/>  <br/>  <label for= "female" > Women </label>  <input type= "Radio" name= "Gender" id= "female "/>  <label for=" email > enter your email address </label>  <input type= "email" id= "email" placeholder= " Enter Email "></form>

Click the Reset button

HTML and user interaction in the Radio box and check box & drop-down list in the case