HTML form (form)

An HTML form (form) is an important part of HTML that is primarily used to collect and submit information entered by the user.

For a simple example, an HTML form (form) that lets the user enter a name. The sample code is as follows:

<form action= "http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method= "Get" >

Please enter your name:

<input type= "text" name= "Yourname" >

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

</form>

Demo Example

The key to learning HTML forms (form) is three points:

• Form control (Form controls)
• Action
• Method

First, the form control (form controls), through the various controls of the HTML form, the user can enter text information, or select from the options, as well as commit the action. For example, in the example above, input type= "text" is a form control that represents a single-line input box.

The information that the user fills in the form always needs to be processed by the program, and the action in the form indicates the file that handles the form information. Like the http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp in the example above.

As for method, it indicates how the form information is sent. Method has two values: Get and post. Get is done by encoding the Name/value information of the form control and sending it via a URL (you can see it in the Address bar). Post then sends the contents of the form over HTTP, and you don't see the form's submission in the Address bar. When to use get, when to use post? This is generally the case, if only for the acquisition and display of data, with get; Once the data is involved in saving and updating, then Post is recommended.

HTML form (Form) common control (controls)

Common controls for HTML forms (form) are:

/tr>

form control (form Contros)	description
input type= "text"	single line text input box
input type= "Submit"	submit information from form to form The file that the action points to
input type= "checkbox"	check box
input type= "Radio"	single box
select	dropdown box
textarea	multiline text input box
input type= "pass Word "	password input box (the input text is denoted by *)

Form control: Single-line text input box (input type= "text")

A single-line text entry box allows users to enter short, single-line information, such as user names. Examples are as follows:

<input type= "text" name= "Yourname" >

Demo Example

Form control: check box (input type= "checkbox")

check box allows the user to select more than one set of options. Example code:

<input type= "checkbox" name= "fruit" value = "Apple" > Apple <br>

<input type= "checkbox" name= "fruit" value = "Orange" > Orange <br>

<input type= "checkbox" name= "fruit" value = "Mango" > Mango <br>

Demo Example

Use checked to indicate the default selected option.

<input type= "checkbox" name= "fruit" value = "Orange" Checked> orange <br>

Demo Example

Form control: Radio box (input type= "Radio")

Use the radio box to allow the user to select only one of a set of options. Example code:

<input type= "Radio" name= "fruit" value = "Apple" > Apple <br>

<input type= "Radio" name= "fruit" value = "orange" > Oranges <br>

<input type= "Radio" name= "fruit" value = "Mango" > Mango <br>

Demo Example

Use checked to indicate the default selected option.

<input type= "Radio" name= "fruit" value = "Orange" Checked> orange <br>

Demo Example

Form control: drop-down box (select)

The drop-down box (Select) can be used either as a single selection or as a check. The following examples are available:

<select name= "Fruit" >

<option value= "Apple" > Apple

<option value= "Orange" > Orange

<option value= "Mango" > Mango

</select>

Demo Example

If you want to become a check, add Muiltiple. The user uses CTRL to implement multiple selections. Example:

<select name= "Fruit" multiple>

Demo Example

Users can also change the size of the drop-down box (Select) by using the Size property.

Demo Example

Form control: Multi-line Input box (TEXTAREA)

The Multiline input box (TEXTAREA) is primarily used to enter longer text information. Examples are as follows:

<textarea name= "yoursuggest" cols = "$" rows = "3" ></textarea>

where cols represents the width of the textarea, and rows represents the height of the textarea.

Demo Example

Form control: Password input box (input type= "password")

The Password input box (input type= "password") is mainly used for the input of some classified information, such as a password. Because the user input, the display is not the input content, but the black point symbol. Examples are as follows:

<input type= "Password" name= "YOURPW" >

Demo Example

Form control: Submit (Input type= "submit")

By submitting (input type=submit), you can submit the information in the form (form) to the file that the action points to in the form. Examples are as follows:

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

Demo Example

Form control: Picture Submission (input type= "image")

Input type=image is equivalent to input type=submit, but the input type=image takes a picture as the submit button for the form, where the SRC attribute represents the path to the picture.

<input type= "image" src = "images/icons/go.gif"

alt = "Submit" Name= "Imgsubmit" >

Demo Example

The page on which the form is submitted is set by the Action property.

Then pass to the corresponding page by clicking <input type= "Submit" > Type button

You can also use the JS code to reset the Action property value of the form form to go to a different page by adding an onclick event for the <input type= button > type.

The data in the form can be processed directly in the JS code

The data can be redirected to a page after processing the form data in the JS code two times (JS does not use Ajax words will not be able to achieve database interaction).

You can use the XMLHttpRequest class in JS code to achieve direct data processing results without redirection

The data can be processed directly in the redirected page, and the UI is processed as a result.

JS can do a lot of things to go, more and more good

Excerpted from http://blog.csdn.net/xiangjun_28/article/details/6656239

HTML form (form)