HTML5 text field, Radio box, check box, drop-down list box, submit, reset button settings, label label __html

text fields, supporting multiple lines of text input

Text entry fields are required when users need to enter large sections of text in a form.

Syntax :

rows= "Number of rows" cols= "columns"> Text </textarea>

1, <textarea> tags are in pairs appear, to <textarea> start, to </textarea> end.

2,cols: The number of columns in a multiline input field.

3. Rows: The number of rows in a multiline input field.

4. You can enter a default value between <textarea></textarea> tags.

For Example:

<form method= "POST" action= "save.php" >

<label> Contact Us </label>

<textarea cols= "A" rows= "ten" > enter content here ...</textarea>

</form>

Note: The <label> tags in the code are explained in this chapter 5-9.

To display the results in a browser:

Note that these two properties can be replaced with the width and height of the CSS style: col with width, row with height instead. (These two CSS styles will be explained in later chapters)

Use a radio box, check box, and let the user select

When working with form design questionnaires, to reduce user action, using a selection box is a good idea, and there are two selection boxes in HTML, the radio box and the check box , the difference being that the option user in the radio box can only select one item, and the The check box allows users to select multiple items, or even all of them. Take a look at the following example:

Grammar:

<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: data submitted to the server values (background program PHP use)

3,name: name for the control, in case of the background program ASP, PHP use

4,checked: when setting checked= "checked", this option is selected by default

Like the following code:

Results displayed in the browser:

Use a drop-down list box to save space

The Drop-down list is also used in Web pages, which can save Web pages efficiently. Can be selected, and can be more than one. The following code:

Explanation:

1, Value:

2,selected= "selected":

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

Results displayed in the browser:

Use a Drop-down list box to select multiple

The Drop-down list can also be multiple-selection, set the multiple= "multiple" property in the <select> tab, and you can implement multiple selections, and press Ctrl while you select multiple selections under Windows operating systems. Click (Use Command + click under Mac) to select more than one option. The following code:

Results displayed in the browser:

submit the 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 needed when the user needs to submit form information to the server.

Syntax :

type= "Submit" value= "submitted" >

Type: The button has a submit effect only when the type value is set to submit

Value: The text displayed on the button

For Example:

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 entered the user name, found that the writing is incorrect, you can use the Reset button to restore the input box to the original state. You just need to set the type to reset.

Syntax :

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

Type: The button is reset only if the type value is set to reset

Value: The text displayed on the button

For Example:

Results displayed in the browser:

Enter account

Click the Reset button

label labels in form forms

Young friends, when you learn the various controls in the form, have you found a label--label, this section will reveal its role.

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

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

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>