The collection of data collection of FORM and forms in html

Here we will introduce the knowledge of FORM elements and form submission.

The DOM interface of Form element is HTMLFormElement , which inherits from HTMLElement , so it has the same default attributes as other HTML elements, but it has several unique attributes and methods: it itself:

INPUT element is a very widely used form element. According to the different Type attribute values, there are the following common usage:

Text input <input type = text name =>

Submit input <input type = submit>

The single button input <input type = radio name = must have the same name value = the value of the filling is best to correspond>

Enter <input type = checkbox name = the same name value = different corresponding values>

Digital input <input type = number min = max => The input box can only enter numbers, and can set the maximum value and minimum value.

The range input <input type = range min = max => similar to Number, but it shows a sliding bar instead of the input box.

The color input <input type = color> will pop up a color selector.

The date input <input type = date> will pop up a date selector.

Email input <input Type = Email> is displayed as a text input box and a custom keyboard will pop up.

Tel input <input type = Tel> similar to email input

URL input <input Type = URL> Similar to Email input, a customized keyboard will also pop up.

Textarea elements can create a multi -line text area.

<textarea name = ID = color = 30 rows = 10> </textarea>

The attribute values ​​of COLS and ROW represent the width and height of the text area.

SELECT elements and Option elements can be used to create a drop -down menu.

<select name = ID => <option value => </option> <option value => </option> <option value => </oplct>

How to group? Set different name properties

example:

<input type = radio name = favourite value = play game> Play games

<input type = radio name = favourite value = writing code> Write code

<input type = radio name = sex value = man> male

<input type = radio name = sex value = woman> female, female,

This is the two groups of Radio

Provide a prompt information (Hint) that can describe the expected value of the input field.

The prompt will be displayed when the input field is empty, and it will disappear when the field gets the focus.

Define hidden input. Hidden fields are not visible to users. Hidden fields usually store a default value, and their values ​​can also be modified by JavaScript.

For example, for security, the name and value values ​​that are not visible to users in the background can be used to check the background to check and prevent counterfeiting pages.

Add a submission button to Form to enable users to submit forms.

The following three buttons can trigger the submit event of the form when clicking:

 <input type = submit /> <Button type = submit> < /Button> <input Type = Image />

The Type default value of the Button element in the specification is submit, but the meditation value is Button under IE678, so it is necessary to manually add the Type = submit property to the Button element from compatibility.

The initial person may think that the submission of the form is triggered by the CLICK event of the submission button. Perform verification and other operations in the Submit event of the form.

 Form.addeventListener ('Submit', Function (E) {if (Valid ()) {...} e.preventdefault ()})

When there is no one of the three buttons mentioned above in the form element, the user will not be able to submit the form (the Enter key is also invalid submit() . The submit () method does not trigger the Submit event of the form element. The operation of form verification should be before calling the submit() method.

 if (value ()) {form.submit ()}

Based on the current popular AJAX+cross -domain POST (CORS) technology, we are likely not to use Form element to directly submit data to the server. Although this is feasible, there is a phenomenon of degradation in most cases.

JavaScript can be used to verify these input data in the HTML form before the data is sent to the server.

These typical form data verified by JavaScript are:

Does the user have filled in the required items in the form?

Is the mail address entered by the user is legal?

Has the user entered a legal date?

Do users enter text in Numeric Field?

The following functions are used to check whether the user has filled in the required (or required) item in the form. If the must be filled or the option is empty, then the warning box will pop up, and the return value of the function is false, otherwise the return value of the function is true (means that the data is no problem):

 Function value_required (field, alerttxt) {with (field) {if (value == null || value ==) {alerttxt); RETURN FALSE} Else {Return True}. }}

Below is the code with the HTML form:

 <html> <head> <script type = text/javascript> function value_required (field, alerttxt) {with (field) {if (value == null || Value ==) {Alert (ALERT lerttxt); Return false} else { Return True}} Function value_form (this) {with (this) {if (value_required (email, email must be filled out!) {email.foc us (); Return false}}} </script> < /Head> <body> <FORM ACTION = SUBMITPAGE.HTM ONSUBMIT = Return Validate_form (this) Method = Post> Email: <input Type = Text Name = 30> <input type = submit value = submit> </form > </body> </html>

The following functions check whether the input data conforms to the basic syntax of the email address.

This means that the input data must contain@ symbols and dot numbers (.). At the same time,@ not the first character of the email address, and at least one point number after@ 同时:

 Function value_email (field, alerttxt) {with (field) {apos = value.indexof (@) dotpos = value.lastindexof (.) If (APOS <1 || Dotpos-Apos <2) lert (alerttxt); Return false } Else {Return True}}}

Below is the complete code with the HTML form:

 <html> <head> <script type = text/javascript> function value_email (field, alerttxt) {with (FIELD) {Apos = Value.Indexof (@) dotpos = Value .lastindexof (.) If (APOS <1 || dotpos-APOS <2) {Alert (Alerttxt); Return false} Else {Return True}} Function Validate_form (thisform) {with (thisForm) {if (Validate_ema) IL (Email, Not a Valid E-Mail Address!) == FALSE) {email.focus (); Return false}} </script> </head> <body> <FORM ACTION = SUBMITPAGE.htmonsubmit = Return Validate_form (this); MET HOD = Post> Email: <input Type = Text name = email size = 30> <input type = submit value = submit> </form> </body> </html>

In the absence of the Form element package, even if the focus of the current page is on the form element, press Enter keys will not trigger the form of the form. For users, you need to switch from keyboard control to mouse/gesture control, destroying the original original Flowing. The easiest solution is to wrap it with a form element on the outer layer and determine that there is at least a submission button in the Form element. At this time, when the input domain in the form is focused, the user presses the Enter key to trigger the submission.

When submitting a form, the high -level browser, including the mobile browser, will ask users if you need to remember the user account password. For general users, this is a very useful feature. Especially on the mobile terminal time. In the absence of Form element, the browser will not pop up the inquiry window.

When we develop a form application, we should not try to remove Form elements and submit it directly. In the form element, a submission button should be included. If it is Button element, you should manually add the Type = Submit property. Submitted incident processing in the Submit event of Form element, not the click event of the submission button.

refer to:

Form element and form submission