Tenth Chapter form elements
One
1. <form> represents HTML form: (no effect on individual ability, no definition cannot be submitted)
| Element name
(1) Action: Represents the form submission page;//<form action= "http://www.baidu.com" >
(2) Method: Form request mode, there are post and get two kinds, default get;//<form method= "Get" action= "http://www.baidu.com" >
(3) Enctype: Indicates the browser to the data sent to the server in encoded format, there are three kinds; application/x-www-form-urlencoded (default format, can not write)
Multipart/form-data (for uploading files to the server)
(4) Name: Set the list of tables for invocation;
(5) Target: hyperlink, set the target location at the time of submission; _blank/_parent/_self/_top;
(6) AutoComplete: When the browser is set to remember the user input data, the default is on auto-completion (generally do not write, the system default), if you do not want to automatically complete the set to off;
(7) Novalidate: Set whether to perform client data validation checks;
2. <input> represents the control used to collect user input data:
(1) Autofocus: Let the cursor focus on an INPUT element, let the user input;//<input name= "user" Autofocus >
(2) Disabled: Disable user input;//<input name= "User" autofocus disabled> (HTML5 support single attribute)
(3) AutoComplete: Set the auto-completion function of INPUT element separately;
(4) Form: The elements outside the form are linked to the specified form, and (in the data outside the form and the form is submitted)
For example, <form method= "get" id= "register" action= "http://www.baidu.com" >
User name: <input type= "" name= "User" >
<button> Submit </button>
<input name= "User" autofocus disabled>
</form>
E-mail: <input name= "eMALL" form= "register" >
(5) Types of type:input elements;
(6) Name: Defines the name of the input element in order to receive the corresponding value;
(7) Value: Default starting value;
3. <textarea> indicates that the control of multiple lines of text can be entered:
4, <select> is used to provide a fixed set of options:
5. <option> provides an option:
6. <optgroup> represents a set of related option elements:
7. <button> represents the Form button (or one button) used to submit or reset:
There are three of elements
(1), <button type= "Submit" > Submit </button>
(2), <button type= "reset" > Reset </button>
(3), <button type= "button" > button </button>//No effect, need to cooperate with JavaScript for processing;
(4), when the type attribute is submit, the button also provides additional properties:
| ———————— | —————————————————— |
| Property name | Description |
| form | Specify Button association form |
| formmaction | Override the Action property of the form element |
| Formenctype | Overriding the Enctype property of a FORM element |
| FormMethod | Override method property of form Element |
| Formetarget | Override the target property of the form element |
| Formnovalidate | Overriding the Novalidate property of a FORM element |
| ———————— | —————————————————— |
<form method= "Get" id= "register" action= "http://www.baidu.com" >
<button type= "Submit" formaction= "http://www.sogou.com" > Submit </button>
This is in the case of the original address is not deleted, the original address is overwritten;
8. <datalist> represents a set of recommended values for users:
9, <fieldset> represents a set of form elements: (for different content grouping, the same content will be in a rectangular box, fieldset equivalent to a rectangular box)
(name,form,disabled),//(<fieldset disabled>);
10. <legend> denotes the descriptive label of the FIELDSET element: (with the above, with the label on the frame)
Example <fieldset>
<legend> Registration Forms </legend>
</fieldset>
11, <label> represents the descriptive label of the form element; (the cursor is not only clicked in the input box, but clicking on the previous email cursor will also change into the input box)
(Post-learning CSS is used, you can set the style by label)
Example I, <label>
User name: <input type= "" name= "User" >
<button> Submit </button>
</label>
Example B, <label>
E-mail: <input name= "eMALL" form= "register" >
</label>
Example three, <label for= "user" > Username:</label>//If you want to include only user name, use case three;
<input id= "user" name= "user" autofocus>
12. <output> indicates the result of the calculation:
10.HTML form Element "on"