Attractive Form using CSS in ASP.Net

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;

}

Ebook Download
View all
Learn
View all