In this blog I am going to show you how to build a nice form using css and validate the same.
Using JavaScript
First you need to create an html page like below:
<html>
<head>
<title>Form By Honey Chawla. </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script language="javascript" src="script/validate.js" />
</head>
<body>
<br />
<form id="form1">
<p>
FirstName</p>
<input id="f" type="text" value="firstname" onfocus="this.value=' '" /><br />
<br />
<p>
LastName</p>
<input id="l" type="text" value="lastname" onfocus="this.value=' '" /><br />
<br />
<p>
Password</p>
<input id="p" type="password" value="enter password" onfocus="this.value=' '" /><br />
<br />
<p>
Repeat Password</p>
<input id="rp" type="password" value="repeat password" onfocus="this.value=' '" /><br />
<br />
<input id="button1" class="btn" type="button" value="Click To Submit" onclick="checkinput()" />
</form>
</body>
</html>
Create the following javascript
function checkinput() {
first = document.getElementById("f").value;
last = document.getElementById("l").value;
pwd = document.getElementById("p").value;
repwd = document.getElementById("rp").value;
if (first != "" && last != "" && pwd != "" && repwd != "") {
alert("Your FullName=" + first + " " + last);
alert("Your Password is=" + pwd + " " + repwd);
}
else {
alert("some of the field is blank,please check");
}
}
Now the last and the important thing left is the css and here it is given below:
body
{
margin:0;
padding:0;
background :#006699;
}
#form1
{
position :absolute;
margin:60px 0px 10px 200px;
}
input[type="text"],input[type="password"]
{
position:absolute;
width:300px;
height:35px;
color:white;
font-size:14pt;
font-family:new times roman;
background:#444 url(images/name.png) no-repeat right;
border:1px solid #000;
padding-left:5px;
padding-top:0px;
}
p
{
color:yellow;
font-size:16pt;
font-style:italic;
}
#p,#rp
{
background:#444 url(images/key_grey.png) no-repeat right;
z-index:20;
}
.btn
{
border:none;
width:auto;
height:35px;
margin-top:15px;
}