ravi951
08-03-2011, 07:01 AM
hi all,
i have html code for login form with fields given below....
also i have created CSS for displaying with style..
i am not getting retype password field in single line and i am not getting all colons in one below the other..like
username : textbox
email id : textbox
password : textbox
retype password : textbox
phone no : textbox
below is my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Inline Form Validation Demo</title>
<link rel="stylesheet" type="text/css" href="messages1.css" />
<script type="text/javascript" src="messages1.js"></script>
</head>
<body>
<div id="wrapper">
<form name="form" id="form" class="form" action="success1.html" onsubmit="return validate(this)" method="post">
<label for="name">User Name:</label>
<input type="text" name="realname" id="name" />
<span id="realnameerror"></span>
<label for="email">Email Id:</label>
<input type="text" name="email" id="email" />
<span id="emailerror"></span>
<label for="password">Password:</label>
<input type="text" name="password" id="password" />
<span id="passworderror"></span>
<label for="repassword">Retype Password:</label>
<input type="text" name="password2" id="password2" />
<span id="password2error"></span>
<label for="phoneno">Phone no:</label>
<input type="text" name="phoneno" id="phoneno" />
<span id="phonenoerror"></span>
<input type="submit" value="Submit" class="submit" />
</form>
</div>
</body>
</html>
below is my corresponding CSS for that....
*
{
margin:0;
padding:0;
}
body
{
font:12px Verdana, Arial, Helvetica, sans-serif;
color:black;
}
#wrapper
{
width:700px;
margin:50px auto;
}
.form
{
float:left;
padding:10px 10px 10px 10px;
background:lightblue;
border:2px solid white;
}
.form label
{
float:left;
width:100px;
padding:10px 10px 0 10px;
font-weight:bold;
clear:left;
}
.form span
{
float:left;
margin-top:1em;
margin-left:0.5em;
color:red;
}
.form select
{
float:left;
width:146px;
margin-top:10px;
}
.form input
{
float:left;
margin-top:10px;
}
.form .submit
{
clear:both;
}
#msg
{
display:none;
position:absolute;
z-index:200;
background:url(images/msg_arrow.gif) left center no-repeat;
padding-left:7px;
}
#msgcontent
{
display:block;
background:yellow;
border:2px solid orange;
border-left:none;
padding:5px;
min-width:150px;
max-width:250px;
}
tell me what to modify to get in correct order as told above.......
i have html code for login form with fields given below....
also i have created CSS for displaying with style..
i am not getting retype password field in single line and i am not getting all colons in one below the other..like
username : textbox
email id : textbox
password : textbox
retype password : textbox
phone no : textbox
below is my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Inline Form Validation Demo</title>
<link rel="stylesheet" type="text/css" href="messages1.css" />
<script type="text/javascript" src="messages1.js"></script>
</head>
<body>
<div id="wrapper">
<form name="form" id="form" class="form" action="success1.html" onsubmit="return validate(this)" method="post">
<label for="name">User Name:</label>
<input type="text" name="realname" id="name" />
<span id="realnameerror"></span>
<label for="email">Email Id:</label>
<input type="text" name="email" id="email" />
<span id="emailerror"></span>
<label for="password">Password:</label>
<input type="text" name="password" id="password" />
<span id="passworderror"></span>
<label for="repassword">Retype Password:</label>
<input type="text" name="password2" id="password2" />
<span id="password2error"></span>
<label for="phoneno">Phone no:</label>
<input type="text" name="phoneno" id="phoneno" />
<span id="phonenoerror"></span>
<input type="submit" value="Submit" class="submit" />
</form>
</div>
</body>
</html>
below is my corresponding CSS for that....
*
{
margin:0;
padding:0;
}
body
{
font:12px Verdana, Arial, Helvetica, sans-serif;
color:black;
}
#wrapper
{
width:700px;
margin:50px auto;
}
.form
{
float:left;
padding:10px 10px 10px 10px;
background:lightblue;
border:2px solid white;
}
.form label
{
float:left;
width:100px;
padding:10px 10px 0 10px;
font-weight:bold;
clear:left;
}
.form span
{
float:left;
margin-top:1em;
margin-left:0.5em;
color:red;
}
.form select
{
float:left;
width:146px;
margin-top:10px;
}
.form input
{
float:left;
margin-top:10px;
}
.form .submit
{
clear:both;
}
#msg
{
display:none;
position:absolute;
z-index:200;
background:url(images/msg_arrow.gif) left center no-repeat;
padding-left:7px;
}
#msgcontent
{
display:block;
background:yellow;
border:2px solid orange;
border-left:none;
padding:5px;
min-width:150px;
max-width:250px;
}
tell me what to modify to get in correct order as told above.......