Learning html from scratch (5) Interaction with viewers, form tags -- top, form from scratch

Learning html from scratch (5) Interaction with viewers, form tags -- top, form from scratch
1. Use Form tags to interact with users

1 <! Doctype html> 2 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:
<Form method = "Transfer method" action = "Server File">
Explanation:
1. <form>: <form> labels appear in pairs, starting with <form> and ending with </form>.
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 ). Post is encrypted transmission; get is address bar transmission, that is, encrypted transmission.
<Form method = "post" action = "save. php "> <label for =" username "> User Name: </label> <input type = "text" name = "username"/> <label for = "pass"> password: </label> <input type = "password" name = "pass"/> </form>
Note:
1. All Form Controls (text box, text field, button, single button, check box, etc) must be placed between <form> </form> 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.
Try:8Add code to the <form> label:
method="post" action="save.php"
Do you enter the following code:

Text: text box password: password box raido: single choice button checkbox: check box file: file selection box submit: submit button
When you press the text in the label, you can associate the text with the control and use the "for" attribute to tie the label with another element, the property value of "for" should be the same as the property value of the related element "id. 2. text input box and password input box
1 <! Doctype html> 2 Text input box and password input box
A text input box is used when you need to type letters and numbers in a form. The text box can also be converted into a password input box.
Syntax:
<Form> <input type = "text/password" name = "name" value = "text"/> </form>
1、type：
When type = "text", the input box is textInput box;
When type = "password, The input box is the password input box.
2、name：Name the text box for use by background programs ASP and PHP.
3、value：Set the default value for the text input box. (Usually serves as a prompt)
Example:
<Form> name: <input type = "text" name = "myName"> <br/> password: <input type = "password" name = "pass"> </form>
Result displayed in the browser:

Try: insert name and password input box for the form
1. In the editor10Enter the following code:
<input  type="text"  name="myName" />
2. In the editor13Enter the following code:
<input  type="password"  name="pass" />
There must be at least one space between attributes.
Hidden defines hidden input fields
Image defines the image as the submit button
Number defines the numeric field with the spinner Control
Password defines the password field. Characters in the field will be masked
Radio definition radio button
Range defines numeric fields with the slider Control
Reset defines the reset button. The reset button resets all form fields to their initial values.
Search defines text fields for search
Submit defines the submit button. Submit button to send data to server
Text by default. Defines the single-line input field. You can enter text in it. The default value is 20 characters.
Url defines the text field used for the URL
Some people say that value is rarely used now. It is estimated that beginners do not know that placeholder is a new property of H5, and IE6 to IE9 does not support native placeholder.
If you only use placeholder and do not solve the compatibility problem (You have to add a long range of compatibility code at the cost of placeholder), you can only say that you are looking at it, not working.
(The red word is the content in the comment area, and some do not understand it for the moment)
3. Text Field, supporting multi-line text input
1 <! Doctype html> 2 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:
<textarea  rows="Number of rows" cols="Number of columns">Text </textarea>
1And <textarea> labels appear in pairs, starting with <textarea> and ending with </textarea>.
2、cols ：Number of columns in multiple input fields.
3、rows ：The number of rows in multiple input fields.
4You can enter the default value between <textarea> </textarea> labels.
Example:
<Form method = "post" action = "save. php">        <label>Contact Us </label>        <textarea cols="50" rows="10" >Enter content here...</textarea></Form>
Display the result in a browser:

Note that these two attributes can be replaced by the width and height of the css style: col uses width and row instead of height.
To try: modify the number of columns and number of rows in the text field
In the editor10Line <textarea> label to add codecols="50" rows="10"Two attribute values: the cols attribute controls the number of columns in the text field, and the rows attribute controls the number of rows in the text field.
The semantics of tags must be remembered Based on words, so that they can be well understood. <pre> preformattde: Meaning of predefined formats (text, the <textarea> here is the meaning of the multi-line text area, according to the meaning of the different, and the default words in <textarea>, you can change the content in <pre>, the user can only watch it!

The value set by col and rows only affects the size of the input box, and does not affect the number of words you enter. <textarea> is a text field input.

<Input> input a line. 4. Use the single answer and check boxes to allow users to select
1 <! Doctype html> 2 Allow users to select a ticket or check box
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:
<Input type = "radio/checkbox" value = "value" name = "name" checked = "checked"/>
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.
The following code is used:

Result displayed in the browser:

Note: The names of Single-choice buttons in the same group must be consistent. For example, in the preceding example, the same name is "radioLove", so that single-choice buttons in the same group can be used for single-choice.
Try it: Modify the single-choice code error (both male and female can be selected at the same time), so that it has a single choice function.
1. there are errors in lines 3 and 13 in the editor. Please correct them.
Remember:
1. Single region in the same groupnameThe names must be consistent.
2. Do you enter the following code:
<Label> male </label> <input type = "radio" value = "1" name = "gender"/> <label> female </label> <input type =" radio "value =" 2 "name =" gender "/>
5. Use the drop-down list box to save space
1 <! Doctype html> 2 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.
Result displayed in the browser:

To try: Set the "Travel" option in the "hobbies" drop-down list as the default option
In the editor12Line to add the code selected = "selected ".
Do you enter the following code: