s1/developing a commercial site/03-form using HTML language and CSS

Contents of the form

Once the form is created, you can place the control in the form to accept the user's input. These controls are typically used in conjunction with <form>......</form> label pairs, or they can be used outside the form to create a user interface.

Form labels and Form properties

In HTML, use the <form> tag to create a form that is used to create a form area in a Web page, a container label, and other form labels that need to be valid in its scope,<input> is one of the methods used to set various input data. The form label has two commonly used properties, as shown in the following table.

Properties of the <form> tag

Property	Description
Action	This property indicates the program on the server that processes the output of the form. In general, when the user clicks the Submit button on the form, the information is sent to the Web server and is handled by the program specified by the Action property. The syntax is action= "URL". If the value of the Action property is empty, the default form is submitted to this page.
Method	This property tells the browser how to send data to the server, and he specifies the method that sends the data to the server (using the Post method or the Get method). If the value is get, the browser creates a request that contains the page URL, a question mark, and the value of the form. The browser returns the request to the script specified in the URL for processing. If you specify a value as post, the data on the form is sent to the script as a block of data without using the request string. Syntax for method= (getr|post)

Changes in the browser address bar after submitting form information using the post and Get methods.

Post form, after the name and password tags, enter the user name Lucker and password 123456, click the Submit button, the Address bar URL information has not changed, this is the post form of the characteristics of the submission.

Submit the form in Get mode, and the URL information will change in the browser's address bar after the page click submit button to submit the form information. Careful observation is not difficult to find, in the URL information clearly shows the form submitted data content, that the user name and password just entered are fully displayed in the Address bar, clearly visible.

1, that is, the Psot submission method will not change the status of the Address bar, the form data will not be displayed.

2, that is, the status of the address bar will change with the Get submission method, and the form data will be displayed in the URL information.

Therefore, based on the above two points, the Post method submitted data security is significantly higher than the data submitted by the Get method.

Form elements and formats

There are many properties in the <input> tag, and the following are some of the more commonly used properties to organize.

Properties of the <input> element

Property	Description
Type	This property specifies the type of form element. The available options are text, password, checkbox, radio, submit, reset, file, hidden, image, and button. Default selection is Text
Name	This property specifies the name of the form element. For example, if there are several text boxes on the form, you can identify them by name, such as Text1, Text2, and so on.
Value	This property is an optional property that specifies the initial value of the form element. However, if type is radio, you must specify a value
Size	This property specifies the initial width of the form element. If type is text or password, the size of this form element is in characters. For other input types, the width is measured in pixels
Maxlength	This property is used to specify the maximum number of characters that can be entered in a text or password element. The default value is infinitely large
Checked	Specifies whether the button is selected. This property is used when the input type is radio and checkbox

1. Text box

The most common form input element in a form is the text box, which is used to enter a single line of text information, such as an input box for a user name. To create a text box in the document's table dropdowns, set the table cell Type property to text. You can also use the Size property and the Value property to set the default value for the length and last name of the login, respectively. You can also use the MaxLength property to specify the length of the input data. For example, the login name cannot be longer than 20 characters and the code is as follows.

<p> Login Name:

<input name= "sname" type= "text" size= "maxlength=" >

</p>

The result of the above code setting is that the text box is displayed with a length of 30, while the maximum number of characters allowed for input is 20.

The Size property and the MaxLength property must be strictly differentiated, the Size property is used to specify the length of the text box, and the MaxLength property is used to specify the length of data entered by the text box, which is the difference between the two.

2. Password box

The password box is similar to a text box, except that you set the Type property of the TextBox control to password. When the type attribute is set, the characters entered in the Password box are all displayed with a black solid dot, which enables processing of the data.

3. Radio button

Radio button space is used for a set of mutually exclusive values, and each radio button control in the group should have the same name, and the user can only select one option at a time. Only the radio button selected from the group submits the corresponding value in the submitted data, and an explicit Value property is required when using the radio button.

If you want the radio button to have a default option when the page loads, you can use the Checked property. For example, the gender option is selected by default as "male", then the code is modified as follows.

<input name= "GEN" type= "Radio" class= "input" value= "male" checked= "checked" > Male

4. check box

Check boxes are somewhat similar to radio buttons, except that the check box allows the user to select multiple options. The type of check box is a checkbox, and a check box can be created by setting the Type property of the form element to a checkbox. The name of the check box differs from the radio button in that you can select multiple check boxes with the same name or each with a different name, and the key is to see how to use the check box. Users can select a check box or uncheck it. Once the user selects a check box, the name value of the check box is submitted with the corresponding value value when the form is submitted.

As with radio buttons, the checkbox check box can also set default options, which are also set using the Checked property. For example, by default, the exercise option in the hobby is selected, and the code is modified as follows.

<input type= "checkbox" Name= "CB1" value= "Sports checked=" checked "> Sport

Radio buttons should have the same name for mutual exclusion, whereas check box names are determined by the application environment. Typically, if the option is a side-by-side relationship, you need to set the same name so that you can get it at the same time. For example, a hobby, a person with multiple interests, so that the check box set the same name, so that when submitting data can be a one-time to get all the selected hobby options. Otherwise, each option needs to be read separately, reducing efficiency.

5. List box

The list box is for the user to quickly, conveniently and correctly select some options and save page space, which is achieved through <select> tags and <option> tags. The <select> tab is used to display a drop-down list that can be selected by the user, and each option is represented by a <option> tag,<select> label must contain at least one <option> tag.

Grammar:

<select name= "Specify list name" size= "Number of rows" >

<option value= "selectable value" selected= "selected" >......</option>

<option value= "selectable values" >......</option>

</select>

Where more options are available for the user to scroll through, size determines the number of rows that can be seen in the list; selected indicates that the option is selected by default, and that only one list item in a list box is selected by default, as with radio button groups.

The option options that are added in the drop-down list box are arranged sequentially, but if you want one of the options to appear by default, you need to use the selected property to set it. For example, to have the month show October by default, the corresponding code is modified as follows.

<option value= "Ten" selected= "selected" > October </option>

6. Button

Buttons are often used in the form, and there are 3 buttons in the HTML, namely the Normal button (button), the Commit button (submit), and the reset button (reset). The normal button is used primarily to respond to the OnClick event, and the Submit button is used to submit the form information, and the reset button is used to clear the filled information in the form.

Grammar:

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

Where type= "button" means a normal button, type= "Submit" means a submit button; Type= "reset" means a reset button. Name is used to name the button, and value is used to set the text displayed on the button.

/1/reset button: When the user clicks the button, each form element in the form is reset to its original state, regardless of whether the form has been filled in or entered, and the data that is filled in or entered is emptied.

/2/submit button: When the user clicks the button, the form submits to the URL specified by the Action property and passes the form data.

/3/button button: A normal button that needs to be associated with an event. OnClick Event

Description: The onclick event is an event that is fired when a form element is clicked and is limited to a button. In the event, you can invoke the appropriate script code to execute some specific client programs.

There are several ways to achieve the effect of a picture button, and the simpler way is to use the "type" and "src" attributes as shown below.

<input type= "image" src= "Images/login.gif"/>

7, multi-line Text field

Used to enter two or more lines of text in a Web page, the label it uses is <textarea>.

Grammar:

<textarea name= "textarea" cols= "width of displayed columns" rows= "rows Displayed" >

Text content

</textarea>

Where cols is used to specify the width of the column for a multiline text box; The Rows property is used to specify the number of rows in a multiline text box. You cannot use the Value property to assign an initial value in a <textarea>......</textarea> label pair.

8. File domain

The role of the file field is to implement the file selection, and only the type attribute should be set to file when applied. In real-world applications, file domains are typically used for file upload operations, such as selecting text, images, and so on that need to be uploaded.

When working with a file field, it is important to note that the form containing the file field, because the submitted form data includes ordinary form data, file data and other parts of the content, so you must set the form "Entype" encoded book "Multipart/from-data", Indicates that form data is divided into multipart submissions.

Set hidden fields for a form

You can create a hidden field by setting the Tytpe property to the hidden hidden type.

Read-only and disabled settings for the form

In some cases, the form element needs to be set, that is, to set the form elements to be read-only or disabled. Their common application scenario is as follows.

A, read-only scenario: The site server side does not want the user to modify the data, which is displayed in the form elements. For example, registration or trading agreements, commodity prices, etc.

B, disable the scene: only after a certain condition is met, a feature can be selected. For example, only when a user agrees to sign up for an agreement is it allowed to click the Register button, the Player control cannot click the Play button, and so on when it plays a state.

System and disabling effects are implemented by setting the "ReadOnly" and "Disabled" properties, respectively.

Typically, a read-only property is used when you do not want the user to make modifications to the data, but is disabled for use with other controls. The most common is that when you install a program, if the user does not select the check box for "agree to install the license agreement," the "Install" or "next" button cannot be used "

Specification: In the XHTML standard, the specified attribute value cannot be omitted and is required to be written as a property = "attribute value" form.

For example, the default selection for a drop-down list box should be written as selected= "selected", not just selected. Similarly, the Default check box is selected, should be written as checked= "checked", read-only should be written as readonly= "ReadOnly", disable should be written as disabled= "disabled".

A semantically formatted form

1. Domain

In a form, you can use the <fieldset> tag to implement a domain definition. What is a domain? Simply put a set of form elements in the <fieldset> tab, the browser will display them in a special way, which may have special boundaries and effects.

With the <fieldset> tag, the label consolidates the form's contents to produce a set of fields related to the form.

2. Domain Title

The so-called domain title is to set a title for the created field. Setting a field header requires a new label, the <legend> tag, where the contents of the tag are treated as the title of the field.

Usually <fieldset> tags are used together with <legend> tags.

Labeling of form elements

Labeling the form elements is intended to enhance the usability of the mouse. This is because when you use form element callouts, there is no special improvement in the effect on client rendering. However, if the user clicks on the callout's text content with the mouse, the browser automatically shifts the focus to the form element associated with the callout.

When labeling a FORM element, you need to use the <label> tag, which has the following syntax.

Grammar:

<label for= "id of form Element" > Annotated text </label>

In the <label> tab, the For property is used to specify the form element that corresponds to the focus when the mouse clicks on the callout text.

<form>

Please select:

<label for= "Male" > Men </label>

<input type= "Radio" name= "Gender" id= "male"/>

<label for= "female" > Women </label>

<input type= "Radio" name= "Gender" id= "female"/>

</form>

In the above code, the Name property and the id attribute are required for the form element. The Name property is handled by the form, and the id attribute is used to associate the <label> tag with the form element.

When the user chooses the gender, instead of clicking the radio button, they can click the text corresponding to the radio button directly with the mouse. For example, in this example, when the mouse clicks the text "male", the radio button for the gender male is automatically selected.

s1/developing a commercial site/03-form using HTML language and CSS