Easy to play the pattern form (i) Overview of the form

This topic from the most basic form knowledge to the advanced application of the form, so that you have a more comprehensive understanding, I believe that you read this topic, will certainly be very familiar with the form.

Overview of a form

Forms, the role in the Web page can not be belittled, mainly responsible for data collection functions, such as you can collect the name and e-mail address of visitors, questionnaires, guest books and so on.

1. Composition of the form

A form has three basic components:

• Form label: Here The bread contains the URL of the CGI program used to process the form data and the method of submitting the data to the server.
• Form fields: Contains text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, radio boxes, drop-down selection boxes, and file upload boxes.
• Form buttons: Include Submit buttons, reset buttons, and General buttons, CGI scripts to transfer data to the server, or cancel input, and you can use form buttons to control other processing work that defines the processing script.

To take into account the different Web design tools, this article only describes the design of the code, do not specifically describe the operation method, the following is the form of HTML code design points:

1.1 Form Labels

　　Function: To declare a form, to define the range of data to be collected, that is, the data contained within and will be submitted to the server or email.

　　 syntax:

　　 attributes are explained in the following table:

Action=url	Specifies the format in which the submit form is processed. It can be a URL address (submitted to a program) or an e-mail address.
Method=get or Post	Indicates the HTTP method that submits the form. Possible values are: The Post:post method contains name/value pairs in the form's backbone and does not need to be included in the URL of the action attribute. Get: Not in favor. The Get method appends the name/value pair to the URL of the action and sends the new URL to the server. This is the default value for forward compatibility. This value is not supported for internationalization reasons.
Enctype=cdata	Indicates the form of an Internet media used to submit the form to the server (when the method value is "POST"). The default value for this feature is "application/x-www-form-urlencoded"
Target= "..."	Specify where the resulting document of the submission appears: _blank: In a new, nameless browser window into the specified document; _self: In the same framework that points to this goal, the document is transferred; _parent: The document is transferred to the immediate parent frameset box of the current box, which is equivalent to _self when the current box does not have a parent box; _top: The document is transferred to the top browser window (so all other frames are canceled); This value is equivalent to the _self when the current box does not have your box.

For example:

indicates that the form will be submitted to http://www.yesky.com/test.asp as a post, the result of the submission is displayed on a new page, and the media for the data submission is the default application/ x-www-form-urlencoded
1.2 form fields

form fields contain text boxes, multi-line text boxes, password boxes, hidden fields, check boxes, radio boxes, and Drop-down selection boxes to capture user input or selected data. The following are the code formats for these form fields: the

1.2.1 text box

text box is a form object that lets visitors enter their own content, usually to fill in a single word or a short answer, such as a name, address, and so on.
Code format: Name property defines the name of a text box, and to ensure accurate collection of data, you must define a unique name;
The Size property defines the width of the text box, in units of a single character width; the
MaxLength property defines the maximum number of characters to enter.
Value property defines the initial value of a text box

Example 1:

Sample 1 code:

1.2.2 Multi-line text box

It's also a Form object that lets visitors enter their own content, but allows visitors to fill in longer content.
Code format:
Attribute Explanation:
The name attribute defines a multiline text box, and to ensure accurate collection of data, a unique name must be defined;
The Cols property defines the width of a multiline text box, in units of a single character width;
The Rows property defines the height of a multiline text box, in units of a single character width;
The Wrap property defines how the input is displayed when it is larger than the text field, with optional values as follows:

• The default value is text wrapping, which automatically goes to the next line when the input exceeds the right edge of the text field, and no line breaks appear where the data is automatically wrapped when it is submitted;
• Off, to avoid text wrapping, when the input exceeds the right edge of the text field, the text scrolls to the left, and you must use return to move the insertion point to the next line;
• Virtual to allow text to wrap automatically. When the input exceeds the right boundary of the text field, it automatically goes to the next line, and the data will not appear when the line is wrapped automatically when it is committed;
• Physical, which wraps the text, and the line breaks are also submitted for processing when the data is submitted.

Sample 2:

　　

Sample 2 Code:

　　

1.2.3 Password Box

is a special text field that is used to enter a password. When a visitor enters text, the text is replaced with an asterisk or other symbol, and the text that is entered is hidden.

Code format:
　　Attribute Explanation:
Type= "Password" defines the password box;
The name attribute defines the names of the password boxes, and to ensure the accurate collection of the data, a unique name must be defined;
The Size property defines the width of the password box, in units of a single character width;
The MaxLength property defines the maximum number of characters to enter.

Sample 3:

Sample 3 Code:

<input type= "Password" name= "Example3" size= "" maxlength= "15"


1.2.4 Hidden Fields

Hidden fields are invisible elements that are used to collect or send information, and hidden fields are invisible to visitors to the Web page. When a form is submitted, the hidden field sends the information to the server with the name and value that you defined when you set it.

Code format: <input type= "hidden" name= ... "value=" ... "

　　 attribute Explanation:
Type= "hidden" defines hidden fields;
The name attribute defines the names of hidden fields, and to ensure accurate data collection, a unique name must be defined;
Value property defines the values of a hidden field
For example: <input type= "hidden" name= "EXPWS" value= "DD"


1.2.5 check box

check box allows you to select more than one option in the option to be selected. Each check box is a separate element and must have a unique name.

Code format: <input type= "checkbox" Name= "..." value= "..."

　　 attribute Explanation:
type= checkbox definition check box;
The Name property defines a check box, and to ensure accurate collection of data, a unique name must be defined;
Value property defines the values of a check box

Sample 4: Yesky.comChinabyte.com

Sample 4 Code:
<input type= "checkbox" Name= "Yesky" value= "a" >yesky.com
<input type= "checkbox" Name= "Chinabyte" value= ">chinabyte.com"

1.2.6 Radio Box

When you need a visitor to choose a unique answer in the option, you need to use the radio box.

Code format: <input type= "Radio" name= ... "value=" ... "

　　 attribute Explanation:
Type= "Radio" defines a single marquee;
The Name property defines the names of the radio boxes, to ensure accurate data collection, the radio boxes are used in groups, and the single option in the same group must have the same name;
The Value property defines the values of the radio boxes, and their field values must be different in the same group.

　 Sample 5: Yesky.comChinabyte.com

Sample 5 Code:
<input type= "Radio" name= "Myfavor" value= "1" >yesky.com
<input type= "Radio" name= "Myfavor" value= "2" >chinabyte.com


1.2.7 File Upload box

Sometimes it takes a user to upload his or her own files, and the File upload box looks just like any other text field, but it also includes a browse button. Visitors can select the files to upload by entering the path of the file they want to upload or clicking the browse button.
Note: Before using the file domain, make sure your server allows you to upload files anonymously. Enctype= "Multipart/form-data" must be set in the form label to ensure that the file is encoded correctly, and the form must be routed to post.

Code format: <input type= "file" name= "..." size= "maxlength=" 100 "

　　 attribute Explanation:
type= "file" definition files upload box;
The name attribute defines a file upload box, to ensure accurate collection of data, you must define a unique name;
The Size property defines the width of the File upload box, in units of a single character width;
The MaxLength property defines the maximum number of characters to enter.

　 Sample 6:

Sample 6 Code:

<input type= "File" Name= "myfile" size= "" maxlength= "100"


1.2.8 dropdown selection box

The Drop-down selection box allows you to set multiple options in a limited space.

Code format:
<select name= "..." size= "..." multiple>
<option value= "..." selected> ... </option>
...
</select>

　　 attribute Explanation:
The Size property defines the number of rows for the Drop-down selection box;
The Name property defines the names of the Drop-down selection boxes;
Multiple attribute indicates that it can be selected, if this property is not set, then only a radio;
The Value property defines the values of the selected item;
The selected property indicates that this option has been selected by default.

　 Sample 7:Yesky.comChinabyte.com

Sample 7 Code:
<select name= "Mysel" size= "1"
<option value= "1" selected>yesky.com </option>
<option value= "D2" >chinabyte.com </option>
</select>

　 Sample 8:
　　 Yesky.comChinabyte.comInternet.comPress CTRL to select multiple

Sample 8 Code:
<select name= "Myselt" size= "3" multiple>
<option value= "1" selected>yesky.com </option>
<option value= "D2" >chinabyte.com </option>
<option value= "3" >internet.com </option>
</select>

1.3 form Buttons

The form button controls the operation of the form.

1.3.1 Submit Button

The Submit button is used to submit the input information to the server.

Code format: <input type= "Submit" Name= "..." value= "..."

　　 attribute Explanation:
Type= "Submit" defines the submit button;
The Name property defines the names of the submit buttons;
The Value property defines the display text for the button;

　 Sample 9:

Sample 9 Code:

1.3.2 Reset button

The reset button is used to reset the form.

Code format:
　　Attribute Explanation:
Type= "Reset" to define the reset button;
The Name property defines the names of the reset buttons;
The Value property defines the display text for the button;

　Sample:

Sample 10 code:

1.3.3 General button

General buttons are used to control other processing work that defines the processing script.

Code format:

　　Attribute Explanation:
Type= "button" defines general buttons;
The Name property defines the names of the generic buttons;
The Value property defines the display text for the button;
The onclick attribute, or other event, defines the behavior of the button by specifying a script function;

Sample by Example:

Sample 11 Code: