HTML Forms and Components

Form

Basically all the pages are just doing two things: 1. Render the data to the customer, 2. Receive data entered by the user. So the form is used to collect data entered by the user and then submitted to the server.
Example diagram:

Forms are primarily responsible for data collection functions in Web pages, and a form has three basic components:
1. Form label: Here The bread contains the URL of the CGI program used to process the form data and the method by which the data is submitted to the server.
2. Form field: Contains text box, Password box, hidden field, multiline text box, check box, Radio box, drop-down selection box and file upload box.
3. Form button: Includes submit button, reset button and General button, used to transfer data to CGI script on server or cancel input, and can use Form button to control other processing work that defines processing script.

Introduction to form Components

Form components are components that let users enter information, receive input from users, and we often see text boxes, buttons, radio boxes, checkboxes, and so on on a Web page, which are called components. When we register a website user, we can see a bunch of components, let me enter in these components, select the relevant information, and then click the Submit button, the information will be submitted to the server, which is a main role of the component, the collection of data in the component and submitted to the server This is the role of the form, So the components are inside the form.
The label of the form is <form> one thing to note is that there is no need to nest forms in a form, so it doesn't make any sense.

<form> Tag Properties Description:

There is an action property in the Form tab that specifies which server the collected data is submitted to on the receiving page, as an example:

Method property, this property is used to specify whether the data submitted will not be displayed on the URL, this property has two keywords, one is get one is post,get means to display the submission on the URL, post is a hidden commit, example:

The target property, which specifies which window to use when the data submission is completed, uses the same target usage as in the hyperlink tag, for example:

The Enctype property, enctype Specifies the content-type of the HTTP request. In a nutshell, you specify the type of data submission, usually two types: a data submission with a file, and a data submission without a file. By default, the Enctype property in the form form for HTML is specified by default: The application/x-www-form-urlencoded type, which is the data submission type without the file. Another keyword in the enctype attribute is: Multipart/form-data, which is specifying the type with the file submission, so the general use of the Enctype attribute will only use the Multipart/form-data keyword, Because the default is the application/x-www-form-urlencoded keyword, why superfluous, example:

The Accept-charset property, which is used to specify the character set encoding for the form, example:

The Novalidate property, which indicates that all component information in the form does not need to be validated, for example, I have an email component that, when the data is submitted, validates the email message "Learn Java, go to the Gothic Academy kaige123.com" is correct, But with the Novalidate attribute there is no validation of this step. This attribute has only one keyword: novalidate, so do not write the keyword can also. Example:

<input of form Components/> Introduction of components

<input/> Tag introduces the components used to collect user input content, such as text box, radio box check box, Password box, and so on, the most important property of this tag is type, this property is used to choose what kind of component you need to use, the type of the keyword is many, because a lot of components, Each of the keywords represents a component.

The common components of the Type property are:

1.date Date Selection, example:

Operation Result:

2.datetime, also time selection, but most browsers do not support
3.file file Selection, example:

Operation Result:

In the file component there is a multiple property, plus this property can be selected multiple files, no words can only select one file, example:

Operation Result:

4.color color Selection, example:

Operation Result:

5.week Select a date to show the first week, example:

Operation Result:

6.time Select a time, example:

Operation Result:

7.range Pull Bar, example:

Operation Result:

8.checkbox check box, example:

Operation Result:

9.radio Radio Box, example:

Operation Result:

Button components:

1.submit Form Submit button, example:

Operation Result:

2.reset Reset Form Data button, example:

Operation Result:

3.button Normal button, example:

Operation Result:

Text components:

1.search search box, example:

Operation Result:

2.text text box, example:

Operation Result:

3.email Auto-Validate email text box, example:

Operation Result:

4.number Number box, example:

Operation Result:

5.password Password box, example:

Operation Result:

6.tel Phone Number box, example:

Operation Result:

7.hidden hidden fields, hidden fields can not be seen on the Web page, only in the code can be seen, example:

Operation Result:

These are the components commonly used in the type attribute.

The Name property, which reads the data in this property when the data is submitted to the server. This property also has a role to use when using a radio box to implement a single selection, and if you do not add this attribute, you cannot implement a single selection, example:

Operation Result:

The Value property, which can add a value to the component, is submitted to the server, and the Value property can also be used as a default value, for example:

Operation Result:

The Require property, which indicates a required field, has only one keyword for this property, so it is also possible to not write a value, and if the component with this attribute does not fill in the information, the form will not be submitted, for example:

Operation Result:

The placeholder property, along with this property, prompts the component what information it needs to fill out, for example:

Operation Result:

The Autofocus property, which gives the component the focus, example:

Operation Result:

The Pattern property, the value of this property can fill in the regular expression, declares the component of this property, the data content must conform to the rules in the regular expression, for example, I wrote a regular expression rule with a number beginning with a letter ending, but I filled in with a letter beginning with the number of numbers, to see what happens when the commit, Example:

Operation Result:

Infrequently used properties:

Checked, this property is used on a radio box or check box, which is declared on a single box or check box, and the component that declares this property is selected by default, example:

Operation Result:

Disabled, this property is used to disable a component that cannot be used after the component declares the property, and disables data in the component from being submitted to the server, for example;

Operation Result:

ReadOnly, declares this property to indicate that this component is readable only and cannot be modified or entered:

Operation Result:

List, a component that implements a feature such as a drop-down box might use this property, which is used to provide multiple data to the user, for example:

Operation Result:

It is important to note that this notation is not supported until HTML5, and can only be done with the select tag.
Max, specifying the maximum value of the component, example:

Operation Result:

Min, specifies the minimum value of the component

Operation Result:

Step, specifying that only a multiple of an integer can be entered, example:

Operation Result:

The date component uses the Value property to set the default value format example:

Operation Result:

Example of a reset button:

Operation Result:

HTML Forms and Components