HTML Advanced Application Tips (vii) Form design basics

Skills | 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 Mark

The main function of the tag is to set the starting and ending position of the form and specify the URL address of the form data program to process. Its basic grammatical structure is as follows:

<form
Action=url
Method=get|post
Name=value
Onreset=function
Onsubmit=function
Target=window>
</form>

Where action: Sets 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: is used to set the form names. 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 Mark

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 by left, right, center (middle), top, or bottom (bottom).

Name: Sets the current variable names.

Type: Determines the types of input data. The options are more, and the meaning of each is:

Type=text: Means to enter a single line of text;
Typet=textarea: means to enter multiple lines of text;
Type=password: Indicates that the input data is a password, which is indicated by an asterisk;
Type-checkbox: Indicates a check box;
Type-radio: Indicates a single marquee;
Type one submit: Represents the Submit button, the data will be sent to the server;
Type-reset: Clears the form data to re-enter;
Type-file: indicates inserting a file;
Type-hidden: Indicates a hidden button;
Type=image: indicates 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, the default value is used;

SRC: is for the case of Type=image, set the address of the image file;

Checked: Indicates that this item is selected by default in the selection box;

MaxLength: Represents the maximum number of characters to enter when entering a single line of text;

Size: Used to set the maximum number of input characters when entering multiple lines of text, using the Width,height method;

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.