Tutorial #50
HTML5 Form Input Attributes Basic   2014-02-21

Introduction

In Tutorial #49 - HTML5 Form Input Elements I described the new Form input types that have been introduced in HTML5, along with some attributes that can be used to validate the input data in the client. In addition to these, HTML5 introduces a number of other attributes that can modify the behaviour and operation of forms. Previously we would have to implement these on the server or use JavaScript to get the same functionality in the browser. The new input types and attributes allow web designers with no scripting experience to create forms that are smarter, simply using HTML.

Tutorial #49 dealt with the basic input types. This tutorial describes the rest of the new attributes and shows how they are used.

Demo 1 screenshot for this tutorial


The Attributes

autofocus

The default behaviour of a form requires the user to move the mouse to the first input field and click on it in order to enter data. This is an unnecessary step and many of us use a simple bit of JavaScript code to automatically place the focus in the ifrst input field.

The autofocus attribute does the same thing in HTML, without the additional script. Simply add the term autofocus in the target input tag and it works.

The attribute is boolean - it is either there or it is not, with no value. Some tutorials suggest that these be written as autofocus=autofocus, but as far as I am aware, you can just use the shorter format.

You might think that autofocus is a useful thing to implement from a web accessibility perspective. In some cases this may be so, but forcing focus like this can cause problems for screen reader software making it skip over preceding text.

Image 1 for this tutorial

placeholder

The placeholder attribute specifies text that is displayed in the input field before the user enters any value. It is used to inform the user what type of value is expected in the field.

It is implemented as a key/value pair with placeholder as the key, an equals sign and the text as a quoted string.

Image 2 for this tutorial

required

With certain of your input fields, a value may be required. The required attribute is used to validate the presence of this when the form is submitted. This is a boolean attribute and can be used with almost all the input types.

Image 3 for this tutorial

min max

You can validate that a numeric value lies within a certain range using the min and max attributes. If the entered value lies outside this range then a popup appears. You can tell the user what the limits are by including text in a title attribute, which is included in the popup.

In the previous tutorial, I showed how these are also used in the range input type to specify the range of values

Image 4 for this tutorial

step

For numeric values you can specify an increment in which values can be entered using the step attribute. When combined with min and max values, a value that does not conform to the step triggers a popup telling the user the two closest values.

Image 5 for this tutorial

maxlength

This attribute limits the number of characters that can be entered in a field. An attempt to add more text than is allowed is truncated to the maximum.

pattern

The pattern attribute was used in the previous tutorial to implement validation of phone numbers in tel input fields. But it can be used in other input types to enforce specific requirements. If the pattern is not matched then a popup is shown, which included the text of a title attribute.

Image 5 for this tutorial

autocomplete

This attribute is used in forms that are submitted more than once. Including it in a text input will present the user with a list of values that have been entered previously. This is useful in shopping web sites where a return customer would be entering the same address, etc., as previously. Note that involves the browser recording prior inputs and the user may be able to disable the feature in the browser preferences.

The name autocomplete is confusing. Autocompletion often refers to a list of expected or valid inputs that is selected from as the user types the first few characters. This is not what the autocomplete attribute does. However the list attribute combined with a datalist element does offer another form of autocompletion.

list

The list attribute is always used in conjunction with a datalist element which contains a set of acceptable input values.

The value of the list attribute is the id of the datalist element. The datalist consists of a set of option tags, or tag pairs, each with a different input value. When the user starts typing in a text input field, for example, the subset of matching values in the datalist is shown as a menu, allowing the user to select the target match.

<input type="text" name="text_list" list='text_choices'>

<datalist id="text_choices">
  <option value="Ferrari">
  <option value="Fiat">
  <option value="Ford">
  <option value="Volkswagen">
  <option value="Volvo">
</datalist>

Note that the user is not restricted to the options contained in the datalist. That validation would have to occur on the server side.

Image 6 for this tutorial

novalidate

Client side form validation is a great feature some of the time but you may need to apply more complex validation than HTML5 can offer. You might want to implement this on the client using JavaScript or it may be better to perform this once the form data has been sent to the server.

To handle this situation, there is a novalidate boolean attribute that can be included in a form tag which disables browser validation for the entire form.

There is no way to turn off validation for a specific input field that would normally use it. However, you can always change the input type to text which is not subject to validation in the default case.

formnovalidate

A form can have more than one submit button or image. Including the formnovalidate attribute in a specific button will disable validation when the form is submitted by that route. Similarly the formaction, formenctype, formmethod and formtarget attributes can be included in submit button or image elements to create alternate actions, etc, when the form is submitted.

form

Form inputs are normally placed within a pair of form tags. But there are instances where you want an input located elsewhere on a page. For example you might want to place input elements for more than one form inside a table.

The form Attribute, as distinct from the form tag, is used to associate a given input with a given form. It is used as a key/value pair with the name of the form as the value. It can be applied to input, textarea and select elements.


One drawback of form validation occurs when a form has more than one invalid field. Only one error is reported at a time and so to identify and correct them all the user must fix one, resubmit, fix the next, etc.

The real benefit of this level of validation is that web designers with little or no JavaScript or server experience can now implement basic checks on user input, making this feature more widely available.


This list of attributes is not exhaustive - a few others are available but not all of these are implemented.


Understanding the Code

The demo code is a basic form that sends the user data to the server. The server echoes back the values, inserting them as the current values in each of the input fields.



More Information

Mozilla Developer Site


Code for this Tutorial


Share this tutorial



Comment on this Tutorial


comments powered by Disqus