The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.
We’ve covered the new values for the input element’s
type attribute, along with some attributes that are valid on most form elements. But HTML5 web forms still have more to offer us! There are five new form elements in the HTML5 forms specification:
meter. We covered
datalist above. We introduced you to
meter in the last chapter as they are often useful outside of forms. So let’s recap and take a look at the other two elements.
Two of the most well-known HTML5 elements are the
meter element provides for a gauge, displaying a general value within a range. You provide minimum (
min) and maximum (
max) values, and the required
value that falls between those minimum and maximum values. While many think it’s a form control with attributes similar to some numeric input types, it has no
name attribute and won’t be submitted on form submission.
meter will default the minimum value to
0, or the meter’s
value, whichever is lower. The maximum value defaults to
1 or the meter’s
value, whichever is higher. Use
meter when there is a minimum value, a maximum value, and optimal values, and the value can go up and down like a test grade, gas tank level, or blood pressure. With these three attributes, browsers that support meter including Android 4.4+ (but not iOS7 or IE11) will show a green gauge.
meter enables us to show when a value is in the right range with the
optimum values. If the
value is between
low, the meter is yellow. If the value is between the
high value the meter is green. If the
value is between
max, it will be red. Currently the
optimum value has no noticeable effect.
meter element should not be used to indicate progress; instead, use a
progress bar to indicate the percentage of how complete a task is.
Progress attributes include
value, with progress always being between 0 and 100% complete. The browser calculates what percentage the value is of the maximum and adjusts the length of the progress bar accordingly. It displays a partially filled gray to blue progress bar where it is fully gray at 0% and fully blue at 100%.
value is included, the progress bar is indeterminate. Chrome, Opera, Safari, and Firefox display indeterminate progress as animated bars, with IE styling it as animated dots.
progress heads only in the direction of 100% of the
max value. The presentation defaults to inline-block so you can set
progress elements. Height will not change the actual height of the stylized bar (unlike
meter) but will add space below it.
The purpose of the
output element is to accept and display the result of a calculation. The
output element should be used when the user can see the value, but not directly manipulate it, and when the value can be derived from other values entered in the form. An example use might be the total cost calculated after shipping and taxes in a shopping cart.
output element has a
for attribute, which is used to reference the IDs of form fields whose values went into the calculation of the
output element’s value.
value are submitted along with the form.
keygen element is a control for generating a public-private key pair and for submitting the public key from that key pair. Opera, Chrome, Safari, Android, and Firefox all support this element, rendering it as a drop-down menu with options for the length of the generated keys; all provide different options, though. There is still no support in iOS7 and IE11.
keygen element introduces two new attributes: the
challenge attribute specifies a string that is submitted along with the public key, and the
keytype attribute specifies the type of key generated. At the time of writing, the only supported
keytype value is
rsa, a common algorithm used in public-key cryptography.
While it is always best to use the most appropriate form element for its intended purpose, sometimes the existing form elements fall short of our needs; for example, no form control makes for a good inline WYSIWYG text editor.
There is a roundabout solution for that, though. Any element in an HTML5 document can be made editable with the
contenteditable attribute. The
contenteditable attribute, written simply as
contenteditable="true", makes the element on which it is included editable. You will usually find this attribute on divs, but you can even make a
style element that’s set to
If you’ve ever seen an editable profile where the element to click doesn’t look like a form control at all, there is a chance that you were actually editing a
contenteditable element. Any edits made on
contenteditable components actually update the DOM.
contenteditable to an element makes that element editable in all browsers. In addition, its descendents will also be editable unless
Changes to Existing Form Controls
There have been a few other changes to form controls in HTML5.
Throughout this chapter, we’ve been talking about attributes that apply to various form field elements; however, there are also some new attributes specific to the
form element itself.
First, as we’ve seen, HTML5 provides a number of ways to natively validate form fields; certain input types such as
url, for example, as well as the
pattern attributes. You may, however, want to use these input types and attributes for styling or semantic reasons without preventing the form being submitted. The new Boolean
novalidate attribute allows a form to be submitted without native validation of its fields.
Next, forms no longer need to have the
action attribute defined. You no longer need to explicitly state the URL to use it for form submission. If omitted, the form will behave as though the
action were set to the current page. You can write or override the URL defined in the form’s
action attribute with the
formaction attribute of the button input types that activate form submission.
autocomplete attribute we introduced earlier can also be added directly to the
form element; in this case, it will apply to all fields in that form unless those fields override it with their own
In HTML5, you can have an
optgroup as a child of another
optgroup, which is useful for multilevel
In HTML 4, we were required to specify a
textarea element’s size by specifying values for the
cols attributes. In HTML5, these attributes are no longer required; you should use CSS to define a
textarea’s width and height.
New in HTML5 is the
wrap attribute. This attribute applies to the
textarea element, and can have the values
soft (the default) or
soft, the text is submitted without line breaks other than those actually entered by the user, whereas
hard will submit any line breaks introduced by the browser due to the size of the field. If you set the
wrap to hard, you need to specify a
In the next chapter, we’ll continue fleshing out The HTML5 Herald by adding what many consider to be HTML5’s killer feature: native video and audio.
Alexis Goldstein first taught herself HTML while a high school student in the mid-1990s, and went on to get her degree in Computer Science from Columbia University. She runs her own software development and training company, aut faciam LLC. Before striking out on her own, Alexis spent seven years in Technology on Wall Street, where she worked in both the cash equity and equity derivative spaces at three major firms, and learned to love daily code reviews. She is a teacher and a co-organizer of Girl Develop It, and a very proud member of the NYC Resistor hackerspace in Brooklyn, NY.
Louis has been involved in the web dev industry since 2000, and is a co-editor of the HTML/CSS content on SitePoint. He blogs at Impressive Webs and curates Web Tools Weekly, a newsletter for front-end developers primarily focused on tools.