New Input Tag Attributes in HTML 5
A number of new attributes have been added to all input tags in HTML 5. These attributes have the overall effect of reducing the reliance on JavaScript for performing all the client side validation of a form. When browsers start supporting these new attributes it will be possible to take greater control of what can be input into the form fields from the HTML in the page so that the control will still be there even for those visitors without JavaScript.
Of course none of these changes does away with the need for server side validation since anyone wanting to bypass all the client side validation need only use a browser that doesn't support these attributes and has turned off JavaScript for the page containing the form. For that reason there is no point in using these extra attributes to try to restrict what your visitors can do. The purpose of performing validations etc client side is for your visitor's convenience and so as with JavaScript validation, these attributes should only be used where it makes things more convenient for the person filling out the form.
- The autocomplete attribute can be set to to off to require that your visitor enter the value that this field requires every time rather than their being able to tell their browser which value to use the first time they fill out the form and have the browser automatically fill out the field on subsequent visits. It should only be used where the field is expected to need a different value input into it on each visit and so should not be used when asking your visitor to supply information that will always be the same (except for password fields).
- The autofocus attribute can be used to specify which field in the form should receive the focus when the web page first loads. This attribute resolves the problem with using JavaScript to assign the focus where the person has already started filling out the form by the time the page finishes loading (assuming that browsers implement it correctly so as to ignore it if another field in the form already has the focus).
- The form attribute allows input fields to be placed outside of the form element to which they belong with this attribute containing the id of the form that this input belongs to. It would only need to be used if you have a situation where a particular form field needs to be located somewhere completely separate from the rest of the form. While I can't think of any instances where this would be needed there are obviously situations that others have come across where this is the case as otherwhise there would have been no reason for adding this attribute.
- A number of new attributes formaction, formenctype, formmethod, formnovalidate, and formtarget can be specified on a submit button or image in place of the equivalent attributes on the form tag itself. This would allow you to have multiple submit buttons that submit the same form data to different places in different ways depending on which of the submit buttons is used.
- The list attribute allows the id of a datalist to be specified so as to convert the input field into a combobox.
- The min and max attributes allow minimum and maximum values to be specified. Before the form is submitted the field will be validated to ensure that the value of the field is between these values.
- The multiple attribute indicates that the field is allowed to contain more than one value, each of which will be separately validated before the form is submitted.
- The pattern attribute allows a regular expression to be entered. The field will be validated to ensure that it matches this pattern before the form is submitted.
- The placeholder attribute contains a short hint as to what the field should contain. This does away with the need for JavaScript to clear the default content of a field before the real content can be entered (or people wothout JavaScript having to manually delete that content).
- The required attribute indicates that a field is required to have a value. Fields which are not required have an empty value as a possible valid input.
- The step attribute is used with some of the new input types to indicate how big a movement there should be if the current value is to be changed by a minimum amount.
Not all of these new attributes are available for every different type of input field and not all of them will necessarily be needed on those types where they are applicable. You will almost certainly find many occasions where these attributes would be useful though. It is just unfortunate that we have had to wait for HTML 5 for these attributes to be introduced.
Related Articles
- "required" is not Required
- Uses of the "id" Attribute.
- XHTML Reference
- The Useful Parts of HTML 5
- The Useful Parts of HTML 5
