HTML + CSS learning notes (5)-interaction with viewers, form tags

HTML + CSS learning notes (5)-interaction with viewers. form tag 1. use form tags to interact with users.

How does a website interact with users? The answer is to use an HTML form (form ). A form can transmit the data input by the viewer to the server, so that the server program can process the data transmitted from the form.

Syntax:

End.
   
2. action: the place where the data input by the viewer is sent, such as a PHP page (save. php ).
   
3. method: the data transmission method (get/post ).
   
   
Note:
   
1. all form controls (text box, text field, Button, single button, and check box) must be placed between labels (otherwise, the information entered by the user cannot be submitted to the server ).
   
2. method: the difference between post and get is a problem for backend programmers. After learning PHP network data processing, you can share it again.
2. text input box and password input box
When you type letters, numbers, and other content in a formText input box. The text box can also be convertedPassword input box.
   
Syntax:
   
   
1. type: when type = "text", the input box is the text input box. when type = "password", the input box is the password input box. 2. name: name the text box for the background program ASP and PHP. 3. value: set the default value for the text input box. (Usually serves as a prompt)
   
Example:
   
3. text field, supporting multi-line text input
When you need to input a large text segment in a form, you need to use the text input field.
   
Syntax:
   
Text
   
1,Tags appear in pairs, starting with <textarea>End. 2. cols: number of columns in multiple input fields. 3. rows: number of rows in multiple input fields. 4.You can enter a default value between tags.
   
Example:
   
4. use the single answer and check boxes to allow users to select
When using form design surveys, it is a good idea to use a selection box to reduce user operations. There are two selection boxes in html: single choice and check box, the difference between the two is that the option users in a single queue can only select one option, while the users in the check box can select any number or even all. See the following example:
   
Syntax:
   
   
1. type:
   
When type = "radio", the control is
   
When type = "checkbox", the control is a check box
   
2. value: the value for submitting data to the server (used by the background program PHP)
   
3. name: name the control for use in ASP and PHP background programs.
   
4. checked: when checked = "checked" is set, this option is selected by default, for example:
   
           
   
5. use the drop-down list box to save space
Drop-down lists are often used in webpages, which can effectively save webpage space. You can select one or more options. The following code:
   
           
   
   
Explanation:
   
1. value:
   
           
   
   
2. selected = "selected ":
   
If the selected = "selected" attribute is set, this option is selected by default.
6. use the drop-down list box to select multiple
You can also select multiple from the drop-down list.Set the multiple = "multiple" attribute in the tag to enable the multi-choice function. in the widows operating system, press Ctrl and click (use Command + click on Mac) to select multiple options. The following code:                    Result displayed in the browser:                 7. use the submit button to submit dataThere are two buttons available in the form: submit button and reset. This section describes the submit button: when you need to submit the form information to the server, you need to use the submit button.   Syntax:   

Type: The button is submitted only when the type value is set to submit. value: text displayed on the button

Example:

Result displayed in the browser:

8. use the reset button to reset the form information.

When you need to reset the form information to the initial state, for example, if you enter the "user name" and find that the writing is incorrect, you can use the reset button to restore the input box to the initial state. You only need to set type to "reset.

Syntax:

Type: the button can be reset only when the type value is set to reset.

Value: the text displayed on the button.

Example:

Result displayed in the browser:

9. label in form

The label does not display any special effects to users. it is used to improve the availability of users with the mouse. If you click text in the label, this control is triggered. That is, when you click to select the label, the browser automatically redirects the focus to the form control related to the label (the form control associated with the label is automatically selected ).

Syntax:

Note: the value in the for attribute of the tag must be the same as the id attribute value of the related control.

Example: