Chapter 3 form Element [Top]-original of water

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