html fields order

**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

Code:

<!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....

Code:

* 
{
 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.......

**coothead** · 08-03-2011, 07:22 AM

Hi there ravi951,

try changing this...

Code:


.form label 
{
  float:left; 
  width:100px; 
  padding:10px 10px 0 10px;
  font-weight:bold;
  clear:left;
}

...to this...

Code:


.form label 
{
  float:left; 
  width:130px;
  padding:10px 10px 0 0;
  font-weight:bold;
  text-align:right;
  clear:left;
}

coothead

**ravi951** · 08-03-2011, 07:35 AM

but colon should be in middle of both fields like below
username : textbox.
retype password : textbox.

the modifications u done shhows colon next to username field like this...
username:textbox
i want semicolon should be far from username as told above......

**coothead** · 08-04-2011, 07:28 AM

Hi there ravi951,

does this help...

Code:


<!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>
<style type="text/css">
* 
{
 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 
{
  position:relative;
  float:left; 
  width:130px; 
  padding:10px 10px 0 5px; 
  font-weight:bold;
  clear:left;
}
.form label span 
{
  position:absolute;
  top:0;
  right:5px;
  color:black;
}
.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;
}

Reply With Quote
</style>
</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<span>:</span></label>
    <input type="text" name="realname" id="name" />
	<span id="realnameerror"></span>
    
	<label for="email">Email Id<span>:</span></label>
    <input type="text" name="email" id="email" />
	<span id="emailerror"></span>
    
	<label for="password">Password<span>:</span></label>
    <input type="password" name="password" id="password" />
	<span id="passworderror"></span>
	
    <label for="repassword">Retype Password<span>:</span></label>
    <input type="password" name="password2" id="password2" />
	<span id="password2error"></span>
	
	<label for="phoneno">Phone no<span>:</span></label>
    <input type="text" name="phoneno" id="phoneno" />
	<span id="phonenoerror"></span>
	
	<input type="submit" value="Submit" class="submit" />
  </form>
</div>
</body>
</html>

coothead

**ravi951** · 08-08-2011, 05:28 AM

hi for the below two fields the size of the textbox has decreased as compared to the other fields.even though i have not specified any size explicitly......
kindly tell me why is this happening.....
for the below two fields only....
<label for="password">Password<span>:</span></label>
<input type="password" name="password" id="password" />
<span id="passworderror"></span>

<label for="repassword">Retype Password<span>:</span></label>
<input type="password" name="password2" id="password2" />
<span id="password2error"></span>

i am using chrome.....

Thread: html fields order

Thread Tools

Search Thread

html fields order

reply

password textbox size

Bookmarks

Bookmarks

Posting Permissions