Chapter 3 form elements [Top]-original learning points of water:
1. form Element Summary
2. form Element Parsing
Lecturer: Li Yanhui
This chapter mainly discusses the form elements in HTML5, which are used to obtain user input data.
I. form Element Summary
HTML5 Forms provide various form controls for user input.
Element name |
Description |
Form |
HTML form |
Input |
Controls used to collect user input data |
Textarea |
Controls that can input multiple lines of text |
Select |
Indicates a set of fixed options. |
Option |
Indicates that an option is provided. |
Optgroup |
Indicates a group of related option elements. |
Button |
Form buttons (or general buttons) that can be submitted or reset) |
Datalist |
Define a group of recommended values for users |
Fieldset |
Represents a group of form elements |
Legend |
Descriptive label of fieldset Element |
Label |
Description label of form elements |
Output |
Indicates the calculation result. |
Ii. form Element Parsing
1.
Definition form
Submit
Explanation:
Elements are defined as a set of forms.
Element name |
Description |
Action |
Indicates the page for form submission. |
Method |
Form request methods: POST and GET. The default value is GET. |
Enctype |
Indicates the encoding format used by the browser for the data sent to the server. There are three types: application/x-www-form-urlencoded (default encoding, file cannot be uploaded to the server), multipart/form-data (used to upload files to the server), text/plain (non-standard encoding, not recommended, different browsers understand different) |
Name |
Set the form name for the program to call |
Target |
Set the target locations for submission: _ blank, _ parent, _ self, and _ top |
Autocomplete |
Set the browser to remember the user input data to automatically complete the form. On is automatically completed by default, and off is set if you do not want to automatically complete it. |
Novalidate |
Set whether to perform the client data validity check, which will be explained later in the course. |
// Use get to submit data
method="get"
// The automatic prompt function is lost.
autocomplete="off"
// Use _ blank to create a target
target="_blank"
2.Indicates user input data
Explanation:By default, a single line text box appears in the element, which has five attributes.
Attribute name |
Description |
Autofocus |
Let the cursor focus on an input element, allowing users to directly input |
Disabled |
Disable input element |
Autocomplete |
Set the Automatic completion function of the input element separately |
Form |
Submit the elements outside the form with the specified form hook |
Type |
The type of the input element. The content is large and will be explained in the next lesson. |
Name |
Define the name of the input element to receive the corresponding value |
// Focus the cursor
// Disable input
// Disable Automatic completion
// Input outside the form
...
3.Add description label
User name:
Explanation:Elements can be associated with input to improve user experience. It is easier to set CSS styles.
4.
Form grouping
...
Explanation:
Elements can organize some form elements together to form a whole.
Attribute name |
Description |
Name |
Define a name for the group |
Form |
Link groups outside the form to the form |
Disabled |
Disable forms in a group |
5.Add group description label
Registry ticket
Explanation:Add a title to the group.
6.Add button
Explanation:Add a button to the element. The type attribute has the following values:
Value Name |
Description |
Submit |
Indicates that the button is used to submit a form. The default value is |
Reset |
Indicates that the button is used to reset the form. |
Button |
Indicates that the button is a general button and does not work. |
// Submit the form
Submit
// Reset the form
Reset
// Normal button
Button
When the type attribute is submit, the button also provides additional attributes.
Attribute name |
Description |
Form |
Form associated with the specified button |
Formaction |
Override the action attribute of the form Element |
Formenctype |
Override the enctype attribute of the form Element |
Formmethod |
Override the method attribute of the form Element |
Formtarget |
Overwrite the target attribute of the form element. |
Formnovalidate |
Override the novalidate attribute of the form element. |
// Submit external Association
Submit