How to use attributes of HTML 5

Posted by in HTML 5 category on for Beginner level | Points: 250 | Views : 2913 red flag

HTML 5 was developed to solve compatibility problems that affect the current standard HTML 4. It is the programming language for the contents and views(Appearence) of Web pages to describe .It is the hypertext markup language.
Read Introduction and how to use HTML5 Elements. before this article.


HTML 5 is a core technology  of the Internet used for structuring and presenting The previous version, HTML 4, was standardized .But HTML 5 is advanced Its core aims had  improved that any language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices.

Note :- In previous article, we have learnt about basics of HTML 5 . We have seen tagging in the previous article.
Now Let us learn about Attributes  in HTML 5. 
There are different types of Attributes in HTML 5.
They are -
Text Box Field , Set Color , Set Range , Set or select a month ,Enter Date and Time ,  Selecting Multiple Files to upload, Displaying a drop list  along with a Text Box.
Let us know in detail about each and every element.

Text Box

Text Box is required to write a text . It is mandatory .In this we can use required attribute  and we can use place holder as a water marker text in it .
For Example here i have shown how to write the attribute in the code.

<input type="text" id="myName" name="myName" placeholder="Please enter your name" /> 
Out Put:-

Invalid/ Valid Email , URL in Text box 

This element show that a message , when we enter a invalid Email or URL  it shows a message "Please enter a valid Email  or URL " .We can use this type of attributes to set. 
For example here in the below  i have shown how to write the attribute in the code.
        Email:  <input name="myEmail" id="myEmail" name="myEmail" type="email" required placeholder="Enter email" />
        Url:  <input type="url" id="myUrl" name="myUrl" name="myUrl" />
Out put -

To Set Color Attribute

In HTML 5 to  give option to the user to select a color on the webpage we can set the input type attribute to “color”. 
  Color: <input type="color" id="myColor" name="myColor" name="myColor" /> 
Out Put-

To Set The range in the Text Box

To force the user to enter a range of numbers in the Text Box, we can set the max and min property of the input type “number”. 
 <input type="number" name="myNumber" id="myNumber" max="20" min="1" name="myNumber" /> 
Here is the output

To provide an option for the user on setting a month

To provide option to select a month to the user, we can set the type attribute of the input element to “month”. 
Here is the code 
Month :<input type="month" id="myMonth" name="myMonth" />
Here is the output for the above code

How to provide Enter Date and Time in HTML 5 

To set an option on entering date and time both at a time we use this attribute.
The code is shown below
         Datetime Local:     
        <input type="datetime-local" name="myDateTimeLocal" id="myDateTimeLocal" />         <br />
Here is the output
How to Choose file upload in HTML 5

To provide option to select a file to upload on the server, we can set input type attribute to “file”. By default, this let user select only one file. To enable user to select myfiles, write 
Select File :<input type="file" multiple id="MyFiles" name="MyFiles"/>
Out put
How to use drop down list menu in HTML 5
To display a drop list, we can write datalist > option element. To attach a data list for the textbox, we can set the list attribute of the textbox to the datalist id. 

  List items:
     <input type="text" list="listForMyList" name="myList" id="myList" />      
           <datalist id="listForMyList">             
           <option value="Option 1">            
           <option value="Option 2">  
           <option value="Option 3">  
           <option value="Option 4">
           <option value="Option 5">      
OutPut :


In this article we have tried to look into attributes .These are used in HTML 5.


Read Customize Icons Accordion Functionality after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: Vivek R
Member Level: Bronze
Member Status: Member,MVP
Member Since: 2/25/2014 12:46:59 PM
Country: India

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)