This is the fourth and final article in our series on building better web forms with HTML5. For the first, second and third articles visit Better web forms with HTML5, Part 1, Better web forms with HTML5, Part 2 and Better web forms with HTML5, Part 3 respectively.
If you have been following along with the last three tutorials, then you will already be well versed with the intricate details of building better web forms in HTML5 and in this last tutorial we are going to cover a few other changes to form controls in HTML5 and have a look at them in more detail.
Changes to Existing Form Controls and Attributes
There have been a few other changes to form controls in HTML5.
The form Element
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. If omitted, the form will behave as though the
action were set to the current page.
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
The optgroup Element
In HTML5, you can have an
optgroup as a child of another
optgroup, which is useful for multilevel select menus.
The textarea Element
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
hard, you need to specify a
This is an excerpt from HTML5 & CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris & Estelle Weyl.