HTML5 Forms: New Controls

HTML5 introduces five new form elements: <datalist></datalist>, <output></output>, <keygen></keygen>, <progress></progress>, and <meter></meter>, each serving distinct purposes.

The <meter></meter> element acts as a gauge, visually representing a value within a specified range. Crucially, it lacks a name attribute and isn't submitted with the form. The minimum value defaults to 0 or the meter's value (whichever is lower), and the maximum defaults to 1 or the meter's value (whichever is higher).

The <progress></progress> element displays task completion percentage, using max and value attributes. It renders as a partially filled bar, ranging from gray (0%) to blue (100%). An omitted value results in an indeterminate progress indicator (often an animated bar or dots).

The <output></output> element displays calculated results, ideal when users view but don't directly manipulate the value. Its value, derived from other form fields, is submitted with the form. JavaScript often updates this value dynamically.

(Excerpt from "HTML5 & CSS3 for the Real World, 2nd Edition" by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Available in stores and as an ebook.)

We've explored new input type attributes and common form element attributes. However, HTML5 offers more! Let's review <progress></progress> and <meter></meter>, and examine <keygen></keygen> and <output></output>.

<progress></progress> and <meter></meter> Elements

<meter></meter> creates a gauge displaying a value within a range (using min, max, and value). Unlike many numeric inputs, it has no name attribute and isn't submitted. Minimum defaults to 0 or the value, maximum to 1 or the value. Use it for values that fluctuate (e.g., test scores, fuel levels). Supported browsers (Android 4.4 , but not iOS7 or IE11) display a color-coded gauge (yellow, green, red based on value ranges).

<meter></meter> shouldn't indicate progress; use <progress></progress> instead. <progress></progress> shows task completion (0-100%), using max and value. The browser calculates and displays the percentage as a bar. An unspecified value creates an indeterminate progress indicator. Unlike <meter></meter>, <progress></progress> only increases towards max. It defaults to inline-block, allowing width and height adjustments (height affects spacing, not bar height).

The <output></output> Element

<output></output> displays calculation results, visible to the user but not directly editable. Its value, often updated via JavaScript, is derived from other form fields and submitted with the form. The for attribute links it to relevant input fields.

<keygen></keygen> generates public-private key pairs, submitting the public key. Support varies across browsers (Opera, Chrome, Safari, Android, Firefox support it, but not iOS7 or IE11). challenge and keytype (currently only rsa) are its attributes.

The contenteditable Attribute

For situations where standard form elements are insufficient (e.g., inline WYSIWYG editors), the contenteditable attribute (or contenteditable="true") makes any element editable. While not automatically submitted, JavaScript can handle server-side submission. This is often seen in editable profiles. Adding contenteditable makes an element and its descendants editable (unless explicitly set to contenteditable="false"). Client-side DOM updates require JavaScript for saving.

Changes to Existing Form Controls

The <form></form> Element

HTML5 enhances <form></form> with: novalidate (submits without native validation), omitting action (defaults to the current page), and formaction (overrides action for specific submit buttons). autocomplete can also be applied directly to the <form></form> element.

The <optgroup></optgroup> Element

HTML5 allows nested <optgroup></optgroup> elements for multilevel select menus.

The <textarea></textarea> Element

<textarea></textarea>'s rows and cols attributes are no longer required (use CSS for sizing). The wrap attribute (values: soft or hard) controls line breaks on submission.

Conclusion

This covers many HTML5 form enhancements. Growing browser support reduces JavaScript reliance for validation and UI improvements. While legacy browsers persist, adopting HTML5 forms with appropriate polyfills is recommended. The next chapter explores HTML5's video and audio capabilities.

Frequently Asked Questions (FAQs)

(The FAQs section remains largely unchanged, as it accurately reflects the information presented in the original text.) The questions and answers regarding the new form elements, styling, validation, event handling, and mobile usage are all appropriately addressed and consistent with the provided text. Therefore, reproducing them here would be redundant.

The above is the detailed content of HTML5 Forms: New Controls. For more information, please follow other related articles on the PHP Chinese website!