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

Editor to share with you how to use the Form properties of the HTML5 form, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Let's get down to business:

Including a form in a page is usually the last thing developers do-- some developers find the form dull. The good news is that HTML5 has had some fun in coding the form.

Let's take a look at the following form Form example:

Sign Me Up!

I would like to receive your fine publication.

My name is:

My email address is:

Remember me on this computer

My website is located at:

I would like my password to be:

(at least 6 characters, no spaces)

On a scale of 1 to 10, my knowledge of HTML5 is:

Please start my subscription on:

I would like to receive copies of The HTML5 Herald.

Also sign me up for The css3 Chronicle

HTML5 provides new input types specifically for email addresses, URL, numbers, dates, and so on. In addition to these new input types, HTML5 also introduces attributes that can be used with new and currently rigid input types. These allow you to provide the placeholder text, tag fields, and declare acceptable data types you need-- all without using JavaScript.

HTML5 form Properties

HTML5 provides us with properties that allow us to specify what values are acceptable and notify the user that an error message has been entered, all of which do not require JavaScript.

Browsers that support these HTML5 attributes compare the data entered by the user with the regular expression patterns provided by the developer. Then check to see if all the required column days have been filled in, and multiple values can be used if allowed. Better yet, including these properties will not affect older browsers: older browsers will ignore all incompatible properties. In fact, you can use these attributes and values to improve script performance without having to hard-code the validation pattern into your JavaScript code or add extra classes to the markup.

Required attribute

The Boolean required attribute tells the browser that the form will not be submitted until the question field is filled in. Obviously, this means that the problem field can be narrow, but it also means that J s accepts certain types of values based on other properties or field types.

If the required field is empty or invalid, the form cannot be submitted, and where the cursor moves to the first invalid form element.

Let's quickly review: when the user clicks a field with the mouse or hits the tab key on the keyboard, the focus is on the form element, and for the input element, typing using the keyboard causes data to be entered into that element.

In JavaScript terminology, a focus event touches and publishes a single element when it receives focus; when it loses focus, it triggers a blur event. In CSS, the focus pseudo-class can be used to style elements that are currently in focus. You can set any input type except red, which usually has default values for button, range, color, and hidden elements required. As with other finite attributes, if you use XHTML, the syntax can be as simple as required or required= "required".

Let's add the required attribute to the registration form. We set the name, email address, password and the middle section of the order start date as required.

Placeholder attribute

The placeholder property allows a short prompt to be displayed, which tells the user what data to enter in the field if space permits. When the field gains focus, the placeholder text disappears, and if there is no data input in the blurred state, the placeholder text will appear again. Developers have been using JavaScript to provide this functionality for many years, and in HTML5, the placeholder property is built in and JavaScript is no longer needed.

Html5 starry sky

Pattem attribute

The pattern attribute enables you to provide a regular expression that is considered valid only if the user's input matches it. For any input element, the user can enter free-form text, and you can use pattern

Property to define acceptable syntax.

The regular expression language used in the pattern is JavaScript-like Perl-based regular expression syntax, but the pattern attribute must match the entire value, not just a subset. Because the browser currently displays the value of the title property in a form similar to a tooltip bar, it contains more detailed pattern instructions than the placeholder text, and forms a coherent instruction, so when including the pattern attribute, you should indicate the desired (required) pattern to the user.

In the following example, let's add a pattern attribute to the password field of the form. Our mandatory requirement is that the password should be at least 6 characters and small enough to have spaces:

\ s means "any non-white space character" {6,} means "at least 6 times." If you want to specify the maximum number of characters, the syntax is\ s {6pm 10), which means 6m el 10 characters. As with the required attribute, if the pattern 4; matches the .pattern attribute, the submission is rejected and an error message is provided.

If the pattern you use is not a valid regular expression, it will not be validated. Also note that, similar to the placeholder and required properties, you can use the value of this property to provide a basis for JavaScript validation code for browsers that support this property.

Disabled attribute

The Boolean disabled attribute has been around for longer than HTML5, but it has been extended to some extent. It applies to any form control element except the new output element, and does not

Like previous versions of HTML, HTML5 allows you to set the disabled property on fieldset and apply it to all form elements contained in fieldset.

Typically, the disabled attribute of a form element grays out the content in the browser. Form controls that use the disabled property are submitted with the form, so their values are not available to the server-side form processing code. If you want the value not to be edited by the user, but can see and submit it, you can use the readonly attribute.

Readonly attribute

The readonly property is similar to the disable property: it makes it impossible for users to edit form fields. However, unlike the disabled property, this field can only accept focus, and its value is submitted with the form.

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.