Introduction
HTML5 Data Attribute is used to set the properties for the elements. Attributes defines more information about the element. Following are the some of the attributes in HTML5 Data Attribute.
- Standard Attributes
- Custom Attributes.
- Input Attributes
- Form Attributes.
Description
HTML5 Data Attribute demonstrates mainly two types which are defined globally and are meant for specific elements. Data Attributes are defined only in beginning.Following are the Standard Attributes.
Description
Title defines the title of the page and the paragraph tag define paragraph with <p> tag like as shown in below example.
[html]
<!DOCTYPE html>
<html>
<body>
<h1>splessons</h1>
<p title="About splessons">
splessons is is a tutorial site which
gives more informayion about the technologies.
</p>
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Description
The Size attribute tag defines the Size of image like width and height.Below is an example of size attribute.
[html]
<!DOCTYPE html>
<html>
<body>
<img src="splessons.jpg" width="104" height="142">
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Description
href attribute is used to define the 
link address with the help of <a> tag as shown in below example.
[html]
<!DOCTYPE html>
<html>
<body>
<a href="http://www.splessons.com">Here is a link</a>
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Null Tag
HTML5 have some more standard tags as listed below.
| Attribute | Description |
|---|---|
| align | align is used to align right or left or center and also known as Horizontal tags |
| bgcolor | bgcolor is used to set the background color of the elements |
| background | background is used to set the background image of the elements. |
| accesskey | accesskey used to access an element by using keyboard short cuts. |
| class | which is used to classify the elements for cascading style sheets. |
| contextmenu | which is used for the context menu for the element. |
| draggable | draggable gives permissions to drag the elements. |
| hidden | hidden used to hide the element. |
| height | which is used to adjust height of the image, tables etc. |
| item | which is used top group the elements. |
| style | which is used to specify the inline styles |
| valign | which is used to align vertically at the top or middle or bottom. |
| width | which is used to adjust the width of the tables , images etc. |
| tabindex | which is used to specify the tab index. |
Description
HTML5 introduced Custom Data Attributes that starts with
data- and remaining name should be based on user requirement as shown below.
[html]
<div class="”examples”">;
…
</div>
[/html]
The above code demonstrates relation between the two attributes. In order to get the values user need to use the JavaScript APIs or CSS.
Description
In HTML5, user need to add some more tags as listed below.
- Autofocus
- Autocomplete
- Form
- Formenctype
- Formaction
- Formmethod
- Formnovalidate
- Formtarget
- Height and width
- Min and max
- List
- Multiple
Description
Autofocus attributes focuses the input element automatically when the user reloads the page. Autofocus is a boolean attribute as shown below example.
[html]
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Name:<input type="text" name="fname" autofocus><br>
Father name: <input type="text" name="lname"><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Description
Autocomplete attribute can be set for elements.If auto complete is 
on the element value gets updated automatically based on previous entered values as shown in below example.
[html]<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" autocomplete="on">
Name:<input type="text" name="fname"><br>
Father name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p>
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Description
Using Form attribute, user can get the input elements from multiple forms.
[html]<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
<p>The "Father name" field below is outside the form element, but still part of the form.</p>
Father name: <input type="text" name="faname" form="form1">
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Description
Formenctype attribute is used to encode the data before submitting to the browser where form element gets overridded with the form type as shown in below example.
[html]<!DOCTYPE html>
<html>
<body>
<form action="post_enctype.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
</form>
<p><strong>Note:</strong> The formenctype attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Description
Formaction attribute performs the input controls by the submitting the forms as shown in below example.
[html]<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Father name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp" value="Submit as admin">
</form>
<p><strong>Note:</strong> The formaction attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Description
Formmethod attribute is used to send the 
http data to the action URL as shown in below example.
[html]<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST">
</form>
<p><strong>Note:</strong> The formmethod attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Description
The Formnovalidate should not validate at the time of submission and is a Boolean attribute as shown in below example.
[html]<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
<p><strong>Note:</strong> The formnovalidate attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Description
Form target attributes gives target name or keyword when form is submitted. As shown in below example.
[html]<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Father name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank" value="Submit to a another window">
</form>
<p><strong>Note:</strong> The formtarget attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
[/html]
Output of the above code as shown in below image.
Description
Height and width Attribute defines the input element height and width as shown in below example.
[html]<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="submit.png" alt="Submit" width="48" height="48">
</form>
<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click that activated the image button.</p>
</body>
</html>
[/html]
Output of the above code as shown in below image.
Description
Min and Max attribute defines the input value as shown in below example.
[html]<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Enter a date before 1990-01-01:
<input type="date" name="bday" max="1989-12-31"><br>
Enter a date after 2010-01-01:
<input type="date" name="bday" min="2010-01-02"><br>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The max and min attributes of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Firefox.</p>
<p><strong>Note:</strong> The max and min attributes will not work for dates and time in Internet Explorer 10, since IE 10 does not support these input types.</p>
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Description
List attributes defines the details of the elements that are similar to user entered element as shown in below image.
[html]<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
[/html]
Output of the above code as shown in below image.
Description
By using Multiple attribute user can enter the multiple input elements at a time as shown in below example.
[html]<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Select images: <input type="file" name="img" multiple>
<input type="submit">
</form>
<p>Try selecting more than one file when browsing for files.</p>
<p><strong>Note:</strong> The multiple attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
[/html]
Output of the above code as shown in below image.
Description
Form attributes of HTML Data Attribute will work on the forms or input fields.The forms will accept text, search, url, tel etc. Following are the two form attributes.
- Autocomplete
- novalidate
Description
User set Autocomplete attribute for the elements.If auto complete is
on the element values gets updated automatically based on previous entered values as shown in below example.
[html]<!DOCTYPE html>
<html>
<body
<form action="action_page.php" autocomplete="on">
Name:<input type="text" name="fname"><br>
Father name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p>
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Description
By using Novalidate the data will not validate at the time of submission as shown in below example.
[html]<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<p><strong>Note:</strong> The novalidate attribute of the form tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
[/html]
Output of the above code is as shown in below image.
Points
- In order to run the autocomplete user need to activate in some browsers.
- HTML5 Data Attribute must be defined in starting tag.
- In order to get the results of the custom attributes user need to use Java script or CSS.
- Global attributes will work on any elements.