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

Source: Internet
Author: User

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



<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:


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.


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




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".


<input 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).


<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.


<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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.