Introduction
Today you will learn how to validate a Login Form in HTML5 and CSS.
This sample uses the following two new HTML5 attributes:
- Placeholder attribute
- Required attribute
These attributes are supported by all major browsers.
![images.jpg]()
Note: Internet Explorer 9 and earlier versions do not support them.
About Placeholder attribute
This attribute specifies a short hint that describe what type of value of an input field is accepted. The hint is displayed in the input field when it is empty and after clicking the field gets the focus. You can use all input types.
![Cli2.jpg]()
About the Required attribute
The Required attribute is a Boolean Attribute because if you do not specify the input type then it shows an error. So you can say it is a Boolean Attribute.
![Clip3.jpg]()
<!DOCTYPE html >
<head>
<title>Login Form</title>
<style>
* {
margin: 0;
padding: 0;
}
#main {
height: 400px;
width: 900px;
margin: 0 auto;
background: #999999;
}
ul {
width: 300px;
padding: 0px 0px 34px 65px;
margin-left: 98px;
list-style: none;
box-shadow: 2px 4px 12px 2px;
}
label {
width: 100px;
float: left;
}
</style>
</head>
<body>
<div id="main">
<form>
<ul>
<h2 style="margin-left: 54px;">Login form</h2>
<br>
<li>
<label>Email ID</label><input type="email" name="emailid" placeholder="[email protected]" required /></li>
<li>
<label>Password</label><input type="password" name="password" placeholder="password" required /></li>
<input type="submit" value="Login" />
</ul>
</form>
</div>
</body>
</html>
![incd4.jpg]()