Forms in HTML5

formmethod: A string indicating which HTTP method (GET or POST) will be used when the form is submitted; if defined, the method attribute on theelement can be overridden. formmethod can only take effect when the type value is image or submit and the form attribute is set.

x-moz-errormessage: A string that displays an error message when form field validation fails. This value is a Mozilla extension and is not a standard. The

element

element has a new attribute:

novalidate: Setting this attribute will not validate the form before it is submitted. .

The

You can use the list attribute on theelement to associate a specific input with a specific

element

element represents the result of the calculation.

You can use the for attribute to associate the

element with other elements in the document that can affect the operation (for example, input or parameters). The value of the for attribute is a space-separated list of IDs of other elements.

Gecko 2.0 (not the case for other browsers) supports customizing validity constraints and error messages for the

element. You can use the following CSS pseudo-classes for it: :invalid, :valid, :-moz-ui-invalid, and :-moz-ui-valid. This can be useful in situations where the calculation result violates a business rule, but is not due to an error in a specific input value (for example, "the total percentage cannot exceed 100").

placeholder attribute

The placeholder attribute acts on theandelements to prompt the user what content can be entered in this field. The text in placeholder cannot contain carriage returns and line feeds. </p>

autofocus attribute

The autofocus attribute allows you to specify a form control that automatically gets focus when the page loads unless the user overrides it, such as by entering a value into another control. Only one form within a document can have the autofocus attribute, which is a Boolean value. This attribute applies to,,, andelements. The exception is that if the type attribute value of an autofocus element is set to hidden, autofocus will not take effect (that is, you cannot let a hidden control automatically gain focus). </p>

label.control DOM attribute

HTMLLabelElement The DOM interface provides an additional attribute in addition to the corresponding attributes for theelement. The control property returns the labeled control, which is the control to which the label applies, as determined by the for attribute (if defined) or the first descendant element control.

Constraint Validation

HTML5 provides syntax and API for client-side form validation. Of course, these features cannot replace server-side validation, which is still necessary for security and data integrity reasons, but client-side validation can provide a good user experience through instant feedback on input data.

If theelement is set with the title attribute, when validation fails, the attribute value will be displayed in the prompt message. If title is set to an empty string, no prompt message will be displayed. If the title attribute is not set, standard validation information (such as specified through the x-moz-errormessage attribute, or calling the setCustomValidity() method) will be displayed instead.

Note: Constraint validation does not support the

element in the form; if you want to change the style of the button based on the validation results of the form, you can use the :-moz-submit-invalid pseudo-class. HTML syntax for constraint validation

The following entries in the HTML5 syntax are used to specify constraints for form data.

The required attribute on the,, andelements specifies that a value for that element must be provided. (On theelement, required can only take effect in combination with a specific type attribute value.)

The pattern attribute on theelement is used to limit the element value to match a specific regular expression. Mode.

The min and max attributes on the element limit the maximum and minimum values that can be input into the element. The step attribute of the

element (used in conjunction with the min and max attributes) limits the interval between input values. If a value does not match the rung of allowed values, it fails validation.

The maxlength attribute of theandelements limits the maximum number of characters (within Unicode code points) that the user can enter. The url and email values of </p>

type are used to limit whether the input value is a valid URL or email address respectively.

Additionally, to prevent constraint validation on a form, you can set the novalidate attribute on the, or on the

andelements (when type is submit or image) Set the formnovalidate attribute. These attributes specify that no validation is performed when the form is submitted.

Constraint Validation API

The following DOM properties are related to methods and constraint validation and can be used in client scripts:

The checkValidity() method on the HTMLFormElement object, when Returns true if the relevant elements of the form have passed their constraint validation, otherwise returns false.

On form-related elements:

willValidate attribute, the value is false if the constraints of the element are not met.

The validity attribute is a ValidityState object that represents the current validation status of the element (that is, whether the constraint is successful or failed).

validationMessage attribute, used to describe failure information of constraints related to elements.

checkValidity() method, if the element does not satisfy any of its constraints, returns false, otherwise it returns true.

setCustomValidity() method, sets custom validation information, which is used to override the predefined information with constraints that are about to be implemented and verified.

HTML5 Documentation

HTML

Audio/Video Canvas WebGL SVG MathML WebForms AppCache Microformats SemanticTags

JavaScript

Storage IndexedDB WebSockets WebWorkers Events Drag/Drop ProtocolHandler Geolocation Focus

CSS

NewSelectors Typography Visual Effects

For more articles related to forms in HTML5, please pay attention to the PHP Chinese website!