1. The configuration form of data objects
2. Submission Form

to sum up

A, form Introduction

label on a Web page form is responsible for data collection elements, called form. The most common login page, which is a form constitutes the main form, its interior usually contains a number of input fields for collecting data and a submit button, as shown in (The white area is the form):
Here Insert Picture Description
form label from the birth of the Internet there has been early (it was born early in JavaScript, so the form can be used normally in the case of completely independent of JavaScript, in fact, it is a form spawned JavaScript). Here is a common form (style code omitted):

<form action="/user/userLogin.do" method="post">

  <div class="form-example">
    <label for="name">用户名: </label>
    <input type="text" name="name" id="name" required>
  </div>
  
  <div class="form-example">
    <label for="password">密码: </label>
    <input type="password" name="password" id="password" required>
  </div>
  
  <div class="form-example">
    <input type="submit" value="提交">
  </div>
  
</form>

Here Insert Picture Description
Enter the user name and password, click Submit to submit the data to the address /user/userLogin.do. If validated, the page will usually be redirected to the system home page. If the verification fails, the general will be redirected to the current page, and failed login prompt. Due to the need to redirect, so when you submit the data through form, they tend to refresh the page.

In the front-end application development and technical overview of the article we talked about before, in the early development of the Internet, speed is relatively slow. Website user submits a form, usually a dozen or even dozens of seconds to see the results submitted. If a user is missing a required field in a form, such as the tens of seconds before the system prompt, which the user is unacceptable.

In order to data submitted some simple validation (such as whether an item is empty, or the correct format) before the form is submitted, JavaScript was born. At that time the most important task is to JavaScript form validation, in order to reduce the long wait due to input errors caused by the user.

With the development of JavaScript, which is no longer limited to simple field verified. ajax technology allows developers to not use the action attribute to submit the form, rather than via direct manual use JavaScript. Benefits of ajax submit the form manually is that after you submit your form page does not redirect, and therefore do not need to refresh the page. Which in many cases can improve the user experience.

In addition, JavaScript DOM module provides the native FormDataconstructor for constructing a form object. By FromData.prototype.appendways to add data to be submitted to the form. In this way, even if your HTML form is not included in the form, you can still analog form submission data. This will be described in detail later.

Two, form of global properties

1. action

Address defined submit the form.

When you click type submitwhen the button, the browser will be submitted to the current form to the address specified action. Such as:

<form id="form" action="/user/userLogin.do">
  <input name="username">
  <input type="submit" value="提交">
</form>

Click the submit button, the user name will be submitted to the parameters /user/userLogin.dofor processing.

In addition to automatically submit above, you can also form objects by calling a JavaScript DOM module direct submitmanual method submitted. Such as:

var form = document.getElementById("form");
// 如果确定知道是页面的第几个表单，也可以这样写
// var form = document.forms[0]; 

form.submit();  // 提交表单

This type of behavior with one click submitof a button is the same.

2. accept-charset

Encoding list format supported by the server, allow multiple values, standards which have multiple values separated by a space (HTML4 allow spaces or commas, but HTML5 provisions can only use spaces).

The default value for this property is "UNKNOWN", this time form of encoding format consistent with the current document. When a single value, the form is encoded using that format. When a plurality of set values, the browser will be written in the order of its first encoding format encodes supported form. Such as:

<form action="" accept-charset="UTF-8 GBK ISO-8859-1">
  ...
</form>

When the browser supports UTF-8, it will be a form encoding to UTF-8, otherwise check back. In general, the form will use the same encoding format as the current page, so this property is rarely used.

3. autocomplete

Autofill forms.

Browsers have the ability to enter the memory of history. Such as:
Here Insert Picture Description
the autocompletesetting on, this function can be turned on (the default attribute is on, and therefore omitted here).

<form action="" autocomplete="on">
  ...
</form>

At this time, when the user clicks the input box data has been entered, the browser will automatically pop history, to help users quickly fill out a form. When the user enters a number of characters, the browser will filter out history in line with the current input data.

For confidentiality strong field, you can autocompleteattribute to offprevent the browser history records.

To form the label set autocompleteproperty will take effect on all input controls within the form. If a small number of controls in the form inconsistent performance with other controls, these controls can be re-defined as a separate autocompleteproperty.

4. enctype

When the form is defined using the POST method to submit, the form used by MIME (Multipurpose Internet Mail Extensions, Multipurpose Internet Mail Extensions type, is a standard document analysis, different MIME types, analytical methods are not the same) type.

Early forms can not upload a file, all the fields at this time of the form can be submitted in a format similar to the background url query parameters, such form MIME type is defined as application/x-www-form-urlencoded, it said to be the same as the url parameter to parse the form data.

And when the form is submitted include files field, you can not use this MIME type, because the file can not be treated like url query parameters. For form file contains fields necessary to enctypethe parameter set multipart/form-data, which is showing a configuration of a multi-part form (text and files). Such as:

<form action="" enctype="multipart/form-data">
  <input type="file" name="file">
  ...
</form>

In addition, HTML5 also adds a type: text/plainthis time to upload the form as plain text.

5. method

Form of submission, including post, getand dialog.

postThe most common way is to submit, form data is more secure, the recommended way is to submit the form.

getWill form parameters as query parameters directly spliced into the back of the property value of the action, submit data to get in the way. So easily lead to data theft, data can only be used where no privacy requirements.

dialogWhen the form is located to form <dialog>the labels, it may be used in the closed dialog after submitting finished form.

6. name

Name of the form.

Generally substituting id. Unlike inputthe nameattributes, form tag nameattributes typically only used to quickly locate the form, and therefore can use the id instead.

Note that, HTML5 requires that all forms within the page nameattribute can not be repeated, which is id unrepeatable requirements are similar. So once the use of nameproperty, we should pay attention to this issue.

7. target

After specifying the form is submitted, the page load background which the return value.

We know that submit the form usually occurs redirected by this parameter, we can modify the display location of the redirect page. This parameter has five values:

_self , the current page display redirection page, the default value of the property. At this point backstage returned redirect page replaces the current page, that page jump occurred.
_blank , in a new document window to load the return value. At this time, the browser will create a new tab displaying the redirect page, leaving the current page.
_parent , the return value is loaded in the parent window. If the current form located in the iframe, the form is submitted, the redirect page will be loaded into the parent page. Otherwise the behavior is consistent with _self.
to _top , the return value is loaded in the top window. Redirect page will be loaded into the top of the window, which completely replaces the current page, regardless of whether the form is nested in many layers iframe.
IframeName , performed inside an iframe loaded return value. At this redirect page will be loaded into the specified iframe.

Three, form input control

form form the main input control inputelements, according to typedifferent values, different types of data can be input. The general format is:

<input type="text" name="username">

nameProperty is inputthe label very important attribute. When the form is submitted, nameis the field name of the parameter, that is, the background is based on the nameproperty to get the form parameters. The actual value submitted to the server are stored in the inputobject's valueproperties.

The following is a common inputtype:

the Button , ordinary button. And <button>labels similar to JavaScript code for performing general.
the CheckBox , check box. It is defined by a set of checkboxes. It should be noted that the same group must use the same box name, this will be submitted to the background as a field.
Color (the HTML5) , Color Picker. It is actually a color input box, and the general difference is that the input box, click on the field will automatically open the Color Picker browser. Click-taking color, which value is automatically filled in input.
DATE (the HTML5) , date picker. Click will pop up a calendar control, you can select a date, accurate to the year / month / day.
datetime (the HTML5) , with time date picker. It is more accurate than the date, time may be selected / min / sec.
local-datetime (the HTML5) , with a similar date datetime selector. But the format time format used for the website in your area, rather than the international standard format.
month The (the HTML5) , for selecting the input box month.
Week (the HTML5) , for selecting the input box weeks.
time (the HTML5) , will pop up a control time, when selecting / min / sec.
Email (HTML5) , mailbox input control. Enter the email address used.
File , file upload control. Click to select the file to be uploaded from the local server. To set multipleproperty allows the control to upload multiple files, which are stored in an array, through the control object filescan access the property.
hidden , hidden form fields. A property that type="hidden"is inputnot displayed on the page, but its value will normally be submitted to the server. Such input box commonly used in the filed do not require a user to manually fill with the form data, or storage for a few global data. For example, if we need to capture the user's logon position, and this value does not require user input, we can call the browser interface to obtain geographic location information stored in a hidden field to submit the form. In this case the user does not perceive us to collect location information (provided that the user does not disable location).
Image , image type submit button. Function is similar to submit, the submit button is used when a picture.
Number (the HTML5) , digital input box. The input box can only enter numbers, including digits and decimal points. Default with a down arrow, the current value for a plus or minus one.
password , password input box. Contents of the control will be obscured up input, usually displayed as dots or asterisks (and browser implementations related).
Radio , radio buttons. Note that each option radio button group must be the same name.
Range (the HTML5) , with a slider of the slider numeric fields (e.g., volume control, slide the slider to change the value).
the RESET , the reset button. Click this button to reset the form.
Search , the search box.
the Submit , Submit button. Click on the type submitof button to submit the current form, submitted to position formthe label actionattribute value.
Tel (the HTML5) , for inputting a telephone number.
text , plain text fields, the default type of input control.
URL , for inputting a url.

In addition to inputoff-label, form supports such as select(select box), textarea(multiline text field) of such input control, not described in detail here.

Four, form of manual submission

Call the object is not to submit the form described above, here's the manual submitmethod to submit the form, but by ajaxthe way to submit the form. This approach does not require background redirect, for without a page refresh scene very practical.

In order to write simple, we use jQuery to achieve, other frameworks such as axios is similar.

1. The configuration form of data objects

Before submitting the form manually, you need to get the form data. JavaScript provides a form object constructor native: FormData. If it is present in the form of the current page, form objects can be directly used to construct the form data objects:

var form = document.getElementById("form");
var formData = new FormData(form);

formData here is our form of data objects, it can be submitted directly to the server.

If we only want to submit a set of data to the server in the form of the form, whereas no such page up a form, may be directly FormDataconstructed form data objects, and then appendadded thereto field method. Such as:

var formData = new FormData();
formData.append("username", "carter");
formData.append("password", "123");

In this case formDataalso a form submission data object, but it does not form constructed from existing objects.

2. Submission Form

Submit to use common post by:

$.ajax({
		url : "/user/userLogin.action",
		type : "POST",
		data : formData,
		contentType: "multipart/form-data",
		success : function(data) {
			...  // 提交成功
		},
		error: function (error) {
			...  // 提交失败
		}
	});

If the form does not contain a data file, or you can contentTypeset application/x-www-form-urlencoded(needs to be consistent with the backend).

The code is to submit a single file very common way, at this time we only need to provide a file type of input tag on the page used to get the file you want to upload, and then the file object stored in the formData objects can be, you do not have page on a special form to set.

About FormData objects, the MDN - FormData document has a very detailed introduction, you need to know you can look yourself.

to sum up

knowledge form contained in a form particularly though not really, but almost all closely related with the daily development. To master the form, the most important thing is to use various types of skilled input, followed by the need to use the new HTML5 semantic tags will form, as filedset and legend.