HTML Form Design basics

Design forms play an important role in HTML pages, which are the primary means of interacting with users. A form should at least include descriptive text, user-filled forms, submit and Refill buttons, and more. Once the user has filled in the required information, press the "Submit Information" button so that the information is sent to the Web server through a dedicated CGI interface. The designer of the Web page can then see the information that the user fills out on the Web server, thus completing the feedback and communication from the user to the author. For free personal web sites, often the server does not provide CGI functionality, or can e-mail to receive feedback from users.
The following elements are primarily included in the form:
button--Normal button
radio--radio button
checkbox--check box
select--pull-down Menu
text--single-line text Box
textarea--Multi-line text box
submit--Submit button
reset--Refill button
The tags commonly used in HTML design forms are tags such as:<form>, < input>, <Option>, <Select>, <textarea>, and <isindex>.

1, <form> form tags
The primary role of this tag is to set the beginning and end of the form and to specify the URL address to process the form data program. Its basic syntax structure is as follows:
<form
Action=url
method=get|post
name=value
onreset=function
Onsubmit=function
Target=window>
</form>
Action: is used to set the address for processing the form data program URL. Such programs are usually CGI applications that use action= "mailto: Your email address" when using email.
Method: Specifies how data is transferred to the server. There are two main ways in which, when method=get, the input data is sent to the server after the address specified by the action, and the input data is transferred to the server in the form of post transmission in the HTTP transport protocol when method=post. Use e-mail to receive user information in this manner.
Name: Used to set the name of the form. Onrest and onsubmit are mainly for the "reset" button and the "Submit" button, respectively, set the corresponding button after pressing the appropriate subroutine to execute.
Target: Specifies that the input data result is displayed in that window, which needs to be used in conjunction with the <frame> tag.

2, <input> form input Tags
This tag is used frequently in forms, and most form content needs to be used for this tag. The syntax is as follows:
<input
Aligh=left|righ|top|middle|bottom
Name=value
Type=text|textarea|password|checkbox |radio|submit|reset|file|hidden|image|button
Value=value
Src=url
checked
maxlength=n
Size=n
Onclick=function
Onselect=function>
Align: is used to set the position of the form to the left, right, center (middle), top, or bottom (bottom).
Name: Sets the current variable name. The
Type: determines the type of input data. More options, the meaning of the items is:
Type=text: To enter a single line of text;
Typet=textarea: means to enter multiple lines of text;
Type=password: Indicates the input data is a password and is indicated by an asterisk;
Type-checkbox: Indicates a check box;
Type-radio: Represents a radio box;
Type one submit: Represents a Submit button, and the data is sent to the server;
Type-reset: Clears form data for reenter;
Type-file: Inserts a file;
Type-hidden: Represents a hidden button;
Type=image: represents inserting an image;
Type one button: Represents a normal button;
Value: Used to set the input default value. That is, if the user does not input, this default value;
src: is for the Type=image case, set the image file address;
Checked: Represents the selection box, which is selected by default;
MaxLength: means when entering a single line of text , the maximum number of input characters;
Size: Used to set the maximum number of characters to enter when entering multiple lines of text, in Width,height;
OnClick: Indicates that the specified subroutine is invoked when input is pressed;
Onselect: Indicates that the specified subroutine is invoked when the current item is selected.

3, <select> drop-down menu tags
With <select> tags you can insert a drop-down menu between tables that you want to use with <option> tags, because each option in the Drop-down menu is defined with a <option> tag. The syntax for the <select> tag is as follows:
<select
Name=nametext
Size=n
Multiple>
Where Name: set drop-down menu names;
Size: Set the height of the menu box, that is, display several menu items at a time, generally take the default value (size= "1");
Multiple: Set to allow multiple selections.

4, <option> option tag
The tag is an option in the Drop-down menu, and the syntax is simple:
<option
Selected
Value=value>
Where selected: Indicates that the current item is selected by default;
Value: Represents the value of the item, after which the value of the item is sent to the server for processing.

5, <textarea> Multiple lines of text input tags
This is a special tag that creates a multiline text input box with the following syntax:
<textarea
Name=name
Cols=n
Rows=n
Wrap=off|hard|soft>
The meaning of each parameter: Name: text box names; Clos: width; rows: height (number of lines); Wrap: Line break control, off: do not automatically wrap; hard: Automatic hard carriage return line, line marking together sent to the server; soft: Automatic soft carriage return for line, The newline tag is not routed to the server.
The form is involved in more tags, the parameters are more complex, and the actual production of the form is the combination of these tags, but the general form can not involve all parameters, we still the principle, can use the default value as far as possible with the default value, never set an unused parameter. In the following article, I will introduce some common parameters of the application techniques.