Summary -

In this topic, we described about the New Attributes with detailed example.

HTML5 introduced several new attributes and we have previously viewed many of them while discussing the new input types. In this section, we will discuss a few more attributes. These attributes will help the elements more.

To enhance the new input types, several new attributes are often required for web design activities. Below table specifies new attributes introduced in HTML5 -

S.NO New attributes description
1 Autocomplete Helps users to complete the forms based on previous input.
The default is set to “On”.
Possible values “on” and “off”.
2 Autofocus Specifies the focus should be placed to this field as quickly as it has been loaded.
3 Form Used to associate with an input, select, textarea element with a form. Specifies which form the associated input element belongs to.
4 Formaction Used to override the action attribute of the <form> element.
Used to specify the URL of a file that should process when the form is submitted.
5 Formenctype Used to override the enctype attribute of the <form> element.
Used to specify how the form data should be encoded when the form submitted to the server using POST method.
6 Formmethod Used to override the method attribute of the <form> element.
Used to specify the HTTP method for sending form data to the action URL when the form submitted.
7 Formnovalidate Used to override the novalidate attribute of the <form> element.
Applies only to the <form> elements and prevents the validation of a form previously presented.
8 Formtarget Used to override the target attribute of the <form> element.
Used to specify where to display the form response.We can use formtarget attribute with input types submit and image.
The values can set to this attribute are _blank, _self, _parent or _top.
9 Height and Width Used to specify the height and width of an <input> element.
These attributes are only used with input type image.
10 List Refers a <datalist> element that can contains pre-defined options for an <input> element.
11 Max Specifies the maximum value for an input field.
12 Min Specified the minimum value for an input field.
13 Multiple Used to allow user to enter more than one value in the input field.
It is a Boolean attribute.
Can be used with email and file input types.
14 Novalidate Applies only to the
component and prevents the validation of a form previously presented.
15 Pattern Specifies a JavaScript expression for the fields value to be verified against.
It makes easy to implement specific validation for input fields like invoice numbers, product codes, and so on.
The pattern possibilities are wide ranging.
Declaring pattern must be used in the form of a routine statement to validate the value of a field.
16 Placeholder Used to add a hint that specifies about the expected value of an input field.
Meant to be able to provide an indication of what to input in a field. The hint is previously displayed in the input field, Where the client enters a value.
The placeholder attribute performs with the following input types: URL, tel, text, search, email, and password. 		@fat
17 Readonly Specifies the input field is read-only and cannot allowed to enter the data or modify the data.
However, user can copy the text from it, highlight it, tab it.
The value of the read-only input field sent when the form submitted.
By default, all the fields are editable.
18 Required Specifies the field is mandatory to enter the value.
If the input field is marked as required, the browser prompts to enter the data before form submission.
This replaces the existing form validation technique using JavaScript and useful to developer to save little time.
19 Step Specifies the legal number intervals for an input field.
The initial value taken as zero and next number will be calculated from current number by using cumulative addition. For example - If the step valuespecifies as “4”, the numbers will be 4,8,12 and so on...
The step attribute works with the following input types - number, range, date, datetime-local, month, time, and week.
20 Value Specifies the initial value for an input field.

HTML5 new attribute syntax -

HTML5 allows four distinct ways of syntaxes for attributes. The new attributes syntax falls into one of the four ways.

The following example explains the various syntaxes used in an <input> tag -

Type Example
Empty <input type="text" value="Asia" disabled>
Unquoted <input type="text" value=Asia>
Double-quoted <input type="text"value="Asia">
Single-quoted <input type="text" value='Asia'>

All four syntaxes may be used in html5, based on what is required for the attribute.