New attributes in HTML 5 and implementation checks
HTML 5 tags include new attributes. Their list with a test in browsers to see if they are supported.
Form objects especially, have new attributes that will facilitate the building of online applications and interaction with the user. Here are the ones that seem essential. A compatibility test is performed with the current browser.
- contenteditable
- Any HTML element can be editable by the user. This may be a paragraph <p> a <ul>, etc. ...
To be useful, this has to be stored for a future session. This attribute is coupled with the functions localStorage, which save data in a space reserved by the browser.Support:
- required
- This attribute without value specifies that the field must have a value filled for the form to be validated. Browsers can highlight the form field when it is required, for example with a red border.
If the form is not validated, a warning message appears stating that the required field must be filled.
Example of the syntax:<input name="x" required>
Support:
- form
- It is a tag, but it is also now an attribute for form objects. This allows to place them anywhere on the page and to associate a form through its ID.
Example:<form id="x"></form><button form="x" />
Support:
- novalidate
- Attribute of form indicating that the form data must be sent without validation. In this case required attribute is ignored.
- draggable, dropzone
- Two attributes for any tag to indicate, for the first that we may move the item, for the second that it can be placed here.
Support:
- async
- Attribute for a JavaScript script to be executed asynchronously after loading entirely the page, even if it is inserted at the top of the page.
<script async></script>
Support:
- reversed
- For a <ol> list, displays numbers in descending order.
Support:
- download
- For an URL, allows you to download the file rather than display it.
-
<a href="filename" download="newfilename"></a>
Support:
Attributes of input and textarea
Besides the attributes already seen, common to several form objects, some attributes are restricted to text fields.
- pattern
- It is assigned a regular expression. For example:
<input pattern="[A-Za-z0-9]">
for validate text entered by the user limited to alphanumeric characters.
Support:
- autocomplete
- This attribute of the form tag has two values, on if the autocomplete is enabled, off otherwise. When enabled, what the user types in a text field can be completed automatically by the browser based on what he has already entered in the past in the same field.
The developer has nothing else to add.
Example:<form action="" autocomplete="on">
Support:
- placeholder
- Is a complement to the attribute "value" for a text entry field. It displays an indicative value in the text field, and when the user clicks in the field, unlike what happens with the value, the content disappears. It is not passed with the form data.
Support:
- dirname
- Dirname (direction name), a name for the text direction, from left to right or right to left, which is useful for countries where the writing direction is reversed. This direction for the textarea and input fields is generally chosen by default by the browser, depending on the country where he resides, or according to the page content. The value is ltr or rtl. If we attribute eg "mydir" to the attribute dirname, there will be in the form data mydir=ltr or mydir=rtl.
Support:
- min, max, step
- These attributes relate to text fields of type: number, range, date, datetime, datetime-local, month, week, time. It limits the values that can be entered, with respectively, a lower limit value, an upper limit and an increment.
Example:<input type="number" min="1" max="100" step="3" />
Support:
Document attributes
In <head>, charset replaces the complicated definition meta...
<meta charset="utf-8">
This was actually supported by browsers long before HTML 5 without being standardized.
The manifest attribute of <html> is assigned the URL of a manifest file used in offline mode, specifying the list of content to be cached.
Attributes which disappear...
In contrast, some attributes of HTML 4 become unnecessary and obsolete. This is the case for the type attribute or <style> <script>. We write now simply:
<style></style> <script></script>
The images have no longer a name attribute, but only an id.
Weight and height remain useful to tags like img, canvas, but are obsolete in tables.
Note: This page addresses only the attributes and does not concern new tags or obsolete tag.See also
- All HTML 5 form objects. And implementation checks.