HTML5 - SPLessons

HTML5 Data Attribute

Chapter 4

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Data Attribute

HTML5 Data Attribute

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

Standard Attributes

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

Title Attribute

shape Description

Title defines the title of the page and the paragraph tag define paragraph with <p> tag like as shown in below example.

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

Output of the above code is as shown in below image.

Size Attribute

shape Description

The Size attribute tag defines the Size of image like width and height.Below is an example of size attribute.

<!DOCTYPE html>
<html>
	<body>
		<img src="splessons.jpg" width="104" height="142">
	</body>
</html>

Output of the above code is as shown in below image.

href Attribute

shape Description

href attribute is used to define the link address with the help of <a> tag as shown in below example.

<!DOCTYPE html>
<html>
	<body>
		<a href="https://www.splessons.com">Here is a link</a>
	</body>
</html>

Output of the above code is as shown in below image.

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.

Custom Attributes.

shape Description

HTML5 introduced Custom Data Attributes that starts with data- and remaining name should be based on user requirement as shown below.

<div class="”examples”">;
…
</div>

The above code demonstrates relation between the two attributes. In order to get the values user need to use the JavaScript APIs or CSS.

Input Attributes

shape Description

In HTML5, user need to add some more tags as listed below.

Autofocus

shape Description

Autofocus attributes focuses the input element automatically when the user reloads the page. Autofocus is a boolean attribute as shown below example.

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

Output of the above code is as shown in below image.

Autocomplete

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

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

Output of the above code is as shown in below image.

Form

shape Description

Using Form attribute, user can get the input elements from multiple forms.

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


Output
of the above code is as shown in below image.

Formenctype

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

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

Output of the above code is as shown in below image.

Formaction

shape Description

Formaction attribute performs the input controls by the submitting the forms as shown in below example.

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

Output of the above code is as shown in below image.

Formmethod

shape Description

Formmethod attribute is used to send the http data to the action URL as shown in below example.

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

Output of the above code is as shown in below image.

Formnovalidate

shape Description

The Formnovalidate should not validate at the time of submission and is a Boolean attribute as shown in below example.

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

Output of the above code is as shown in below image.

Formtarget

shape Description

Form target attributes gives target name or keyword when form is submitted. As shown in below example.

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

Output of the above code as shown in below image.

Height and width

shape Description

Height and width Attribute defines the input element height and width as shown in below example.

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

Output of the above code as shown in below image.

Min and max

shape Description

Min and Max attribute defines the input value as shown in below example.

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

Output of the above code is as shown in below image.

List

shape Description

List attributes defines the details of the elements that are similar to user entered element as shown in below image.

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

Output of the above code as shown in below image.

Multiple

shape Description

By using Multiple attribute user can enter the multiple input elements at a time as shown in below example.

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

Output of the above code as shown in below image.

Form Attributes

shape 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

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

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


Output
of the above code is as shown in below image.

Novalidate

shape Description

By using Novalidate the data will not validate at the time of submission as shown in below example.

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

Output of the above code is as shown in below image.

Summary

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