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.
Introduction
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”.
Example
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.
Code
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">
</datalist> OutPut :
Conclusion
In this article we have tried to look into attributes .These are used in HTML 5.
Reference
www.dotnetfunda.com