Click here to Skip to main content
16,017,907 members
Articles / Web Development / HTML
Tip/Trick

HTML5 New Attributes

Rate me:
Please Sign up or sign in to vote.
3.50/5 (2 votes)
1 Oct 2012CPOL2 min read 13.5K   3   3
Introduction to HTML5 new attributes

Introduction

HTML5 has recently added new attributes to input fields. Today, we will look at a brief overview of all the new attributes and elements added to HTML5.

Background

Earlier in HTML, we had to use CSS/JavaScript to add watermark effect to textbox or to ensure that textfield is never left empty. With HTML5, we don't have to take any overhead to have watermark effect or make textbox a mandatory field. So, let's start and see what we have to do to achieve these effects.

Using the Code

Before moving ahead, to enable HTML5 on your web page, you need to add the following line of code in HTML side:

HTML
<!DOCTYPE html> 

PLACEHOLDER Attribute

Placeholder attributes give the watermark to the elements. So, this in turn tells you what we are expecting from the user and user too knows what needs to be entered in the textbox.
HTML needs to be added to design view to enable placeholder for textbox.

ASP.NET
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
  <h3>HTML5 New Attributes</h3><br />
    User Name :
    <input type="text" name="UserName" placeholder="Enter the UserName"/> 
    <input type="submit" value="Submit"/>
</asp:Content> 

Below is the final output you would see:

REQUIRED Attribute

HTML5 has added a new attribute named as 'required'. Setting this attribute makes the textbox a mandatory field and that cannot be left empty.
With addition of required attribute, you now don't have to write additional JavaScript to check whether the field is empty or not. Furthermore, if the field is left empty, it alerts the user with a message to fill out that particular field.
Let's see what needs to be done to get this feature in our application. Please add the following text in your design/HTML side: 

ASP.NET
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
  <h3>HTML5 New Attributes</h3><br />
    User Name :
    <input type="text" name="UserName" placeholder="Enter the UserName" required="required"/> 
    <input type="submit" value="Submit"/>
</asp:Content> 

Below is the screenshot of what will be shown to the user if the textbox is left empty and we simply click Submit button

Points of Interest

In this basic tip, we learnt new attributes added in HTML5. I will update the tip further and add all the new input fields added.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
Please visit my blog http://varunkhanna.blogspot.com/ to read more articles

Comments and Discussions

 
GeneralMy vote of 2 Pin
Mukund Thakker9-Oct-12 3:46
professionalMukund Thakker9-Oct-12 3:46 
GeneralMy vote of 5 Pin
Jim Meadors2-Oct-12 19:05
Jim Meadors2-Oct-12 19:05 
GeneralRe: My vote of 5 Pin
Khanna_Varun3-Oct-12 14:05
Khanna_Varun3-Oct-12 14:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.