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 | |
| 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.