![html5.jpg]()
Question: What is Required Attribute?
In simple terms "It shows a validation to the user for some mandatory fields which haven't been entered or left blank".
Step 1: The complete code of the Required.html looks like this:
<! DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<div>
<header>
<h1 style="color: gray; text-align:center">Working with Required in HTML 5</h1>
</header>
<center>
<table>
<tr>
<td>
LastName:
</td>
<td>
<input type="text" name="lastname" required="required" />
<input type="Submit">
</td>
</tr>
</table>
</center>
<footer>
<p style="text-align: center; color: silver">© Copyright by Vijay Prativadi</p>
</footer>
</div>
</form>
</body>
</html>
Step 2: The output of the Required Application looks like this:
![image2.jpg]()
Question: What is Step Attribute?
In simple terms "It provides flexibility for the user to step up or step down to provide some value for the required field".
Step 1: The complete code of Step.html looks like this:
<! DOCTYPE html>
<html>
<head>
</head>
<script type="text/javascript">
function rangeData(somevalue) {
ElementById("range").innerHTML = somevalue;
}
</script>
<body>
<div>
<header>
<h1 style="color: gray; text-align:center">Working with Step in HTML 5</h1>
</header>
<div>
<center>
<table>
<tr>
<td>
Step Attribute:
</td>
<td>
<input type="range" max="100" min="0" step="10" value="go" onchange="rangeData(this.value)" />
<span id="range">0</span>
</td>
</tr>
</table>
</center>
<footer>
<p style="text-align: center; color: silver">© Copyright by Vijay Prativadi</p>
</footer>
</div>
</body>
</html>
Step 2: The output of Step Application looks like this:
![image3.jpg]()
Question: What is Max & Min(Range) Attribute?
In simple terms "It enables user to select a required value within specified range".
Step 1: The complete code of maxandmin.html looks like this:
<! DOCTYPE html>
<html>
<body>
<div>
<header>
<h1 style="color: gray; text-align:center">Working with Max and Min(Range) in HTML 5</h1>
</header>
<div>
<center>
<table>
<tr>
<td>
Max and Min:
</td>
<td>
<input type="date" name="date1" max="2012-02-25" min="1986-01-26" />
</td>
</tr>
</table>
</center>
<footer>
<p style="text-align: center; color: silver">© Copyright by Vijay Prativadi</p>
</footer>
</div>
</body>
</html>
Step 2: The output of maxandmin Application looks like this:
![image4.jpg]()
Question: What is Color Type?
In simple terms "It provides flexibility for the user choose a required color from the picker".
Step 1: The complete code of Color.html looks like this:
<! DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<div>
<header>
<h1 style="color: gray; text-align:center">Working with Color Picker in HTML 5</h1>
</header>
<center>
<table>
<tr>
<td>
Pick The Color:
</td>
<td>
<input type="color" name="democolor" />
</td>
</tr>
</table>
</center>
<footer>
<p style="text-align: center; color: silver">© Copyright by Vijay Prativadi</p>
</footer>
</div>
</form>
</body>
</html>
Step 2: The output of the Color Application looks like this:
![image5.jpg]()
Question: What is Search Type?
In simple terms "It enables user to search some specific matched terms on website".
Step 1: The complete code of Search.html looks like this:
<! DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<div>
<header>
<h1 style="color: gray; text-align:center">Working with Search Attribute in HTML 5</h1>
</header>
<center>
<table>
<tr>
<td>
Search:
</td>
<td>
<input type="search" name="demosearch" />
</td>
</tr>
</table>
</center>
<footer>
<p style="text-align: center; color: silver">© Copyright by Vijay Prativadi</p>
</footer>
</div>
</form>
</body>
</html>
Step 2: The output of Search Application looks like this:
![image6.jpg]()
Question: What is Email Type?
In simple terms "It enables user to enter valid email type into the textbox".
Step 1: The complete code of Email.html looks like this:
<! DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<div>
<header>
<h1 style="color: gray; text-align:center">Working with Email in HTML 5</h1>
</header>
<center>
<table>
<tr>
<td>
Email:
</td>
<td>
<input type="email" name="email" required="required" />
<input type="Submit">
</td>
</tr>
</table>
</center>
<footer>
<p style="text-align: center; color: silver">© Copyright by Vijay Prativadi</p>
</footer>
</div>
</form>
</body>
</html>
Step 2: The output of Email Application looks like this:
![imahe7.jpg]()
Question: What is Date Time Type?
In simple terms "It enables user to select specific date and time from chooser".
Step 1: The complete code of Date.html looks like this:
<! DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<div>
<header>
<h1 style="color: gray; text-align:center">Working with Date Time Chooser in HTML 5</h1>
</header>
<center>
<table>
<tr>
<td>
Choose Date & Time
</td>
<td>
<input type="datetime" name="demodatetime" />
</td>
</tr>
</table>
</center>
<footer>
<p style="text-align: center; color: silver">© Copyright by Vijay Prativadi</p>
</footer>
</div>
</form>
</body>
</html>
Step 2: The output of Date Application looks like this:
![image8.jpg]()
Question: What is URL Type?
In simple terms "It enables user to enter valid URL address".
Step 1: The complete code of URL.html looks like this:
<! DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<div>
<header>
<h1 style="color: gray; text-align:center">Working with URL Type in HTML 5</h1>
</header>
<center>
<table>
<tr>
<td>
Please Enter URL:
</td>
<td>
<input type="url" name="demourl" required="required" />
<input type="submit" />
</td>
</tr>
</table>
</center>
<footer>
<p style="text-align: center; color: silver">© Copyright by Vijay Prativadi</p>
</footer>
</div>
</form>
</body>
</html>
Step 2: The output of the URL Application looks like this:
![image9.jpg]()