Shulou(Shulou.com)06/01 Report--

This article mainly introduces the HTML5 form properties and verification of the example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

Among the many changes in HTML5, the validation of form data validity and validity is an extremely important part. Practice has proved that a large number of security problems are caused by the lack of validity and validity verification of form data. Because the form data is not validated legally and validly, it is attacked and invaded, which leads to data leakage and security incidents, which is harmful to the government, enterprises and individuals.

Suffered a great loss.

At the same time, there are also a large number of designers and production personnel, because they are not good at writing browser-side data verification programs, and because they are not good at using some frameworks on the Internet for various reasons, resulting in some products lack of validity and validity verification of form data, leaving security risks.

In view of this, HTML5 standardizes the form properties and verifies its validity, which greatly saves the amount of code on the browser side, improves the code efficiency, and unifies the security issues. Although authentication is still required on the server side, the problem has been effectively resolved from one end of both sides (the client side and the server side). Therefore, we prefer to call it evolution rather than change.

Below we will explain its important attributes one by one. In the part of regular expressions, we only introduce some commonly used content filtering, which can be studied in depth by interested readers.

(1) required attribute required. The way to prevent blank submission can be

Or

(2) the placeholder attribute placeholder, that is, the placeholder character displayed by default in the input in which the content has not been input. It is written as follows:

(3) max and min properties provided by numeric type controls.

(4) regular expression attribute pattern. Regular expression judgment can only fill in the characters in axiz, AbeliZ and 0room9. The specific code is as follows:

(5) data attribute, which can be extended to data sources, such as:

(6) automatically complete the attribute autocomplete. This is a two-way attribute that helps users complete the form as soon as possible when it is turned on and prevents the disclosure of personal private data when closed. If you want to save time by filling out the form quickly for the user the second time, you can set the value of autocomplete to on.

It is written as follows:

If you want the entire form to be completed automatically, you can write:

If you do not want to save the e-mail address for the user, you can set the value of autocomplete to off to prevent malicious guessing of user information, as follows:

(7) the step size setting attribute step. This property limits the number entered, and step is the interval between the previous number and the next number, for example:

(8) other new attributes. In addition to the above properties, there are several new properties, which are briefly described below.

 onerror . Run the script when an error occurs.

 onhaschange . Run the script when a change occurs.

 oncontextmenu . Runs the script when the context menu is triggered.

 onformchange . Run the script when the form changes.

 onforminput . Run the script when the form gets user input.

 oninput . Runs the script when the element gets user input.

 oninvalid . Run the script when the element is invalid.

Thank you for reading this article carefully. I hope the article "sample Analysis of HTML5 form Properties and Verification methods" shared by the editor will be helpful to you. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.