Tutorial #49 dealt with the basic input types. This tutorial describes the rest of the new attributes and shows how they are used.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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 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.
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.