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;

}