PDA

View Full Version : formting form...


nits4u
06-11-2010, 10:08 AM
i want to align the following form. But, on giving "float:left" to labels, both the input fields move to right, and labels come together. Hope u understand.
Here is the code:

<html>
<head>
<title>Form</title>
<style>
*{
margin:0;
padding:0;
}
body{
font-family: arial;
background:#152F4A;
color:#FFF;
}
#container{
margin:5px;
}
#chk label{
font-size:.9em;
display:block;
float:left;
width:8%;
margin-top:3px;
}
input[type="text"]{
width:13%;
margin-top:3px;
}
button{
border:1px outset black;
background:#FFF;
color:#152F4A;
padding:2px 5px;
margin-top:5px;
cursor:pointer;
margin-left:0px;
}
</style>
</head>
<body>
<div id="container">
<form name="chk" id="chk" action="" method="post">
<label for="fName">First Name:</label>
<input type="text" id="fName" />
<label for="sName">Last Name:</label>
<input type="text" id="sName" /><br />
<label for="age">Age:</label>
<input type="text" id="age" />
<label for="sex">Sex:</label>
<input type="text" id="sex" /><br />
<label for="adrs">Address:</label>
<input type="text" id="adrs" />
<label for="pin">PIN:</label>
<input type="text" id="pin" /><br />
<label for="nMail">Req. email:</label>
<input type="text" id="nMail" /><br />
<label for="pass">Password:</label>
<input type="text" id="pass" />
<label for="rPass">Confirm Password:</label>
<input type="text" id="rPass" /><br />
<label for="oEmail">Exisiting email(optional):</label>
<input type="text" id="oEmail" /><br />
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</div><!--container-->
</body>
</html>


Thank You.

gigiloumill
06-11-2010, 02:44 PM
O.K. I know you're not supposed to use tables, but, this is one of them times you could. I'd place all info on tables..

example: <table width="396" border="0">
<tr>
<td>name</td>
<td><label>
<input type="text" name="name" id="name" />
</label></td>
</tr>
<tr>
<td>last name</td>
<td><label>
<input type="text" name="lname" id="lname" />
</label></td>
</tr>
<tr>
<td>age</td>
<td><label>
<input type="text" name="age" id="age2" />
</label></td>
</tr>
</table>

edbr
06-12-2010, 01:26 AM
aaaaaaarrrrrghhhh!!! nooooooo!! try this
<html>
<head>
<title>Form</title>
<style>
*{
margin:0;
padding:0;
}
body{
font-family: arial;
background:#152F4A;
color:#FFF;
}
#container{
margin:5px; w
}
label{
font-size:.9em;
display:block;
float:left;
width:15%;
margin-top:3px;clear:left;
}
input{
width:25%;
margin-top:3px; float:left;
}
button{
border:1px outset black;
background:#FFF;
color:#152F4A;
padding:2px 5px;
float:left;
margin-top:5px;
cursor:pointer;
margin-left:0px;
}
.clear{ clear:both;}
</style>
</head>
<body>
<div id="container">
<form name="chk" id="chk" action="" method="post">

<label for="fName">First Name:</label>
<input type="text" id="fName" />

<label for="sName">Last Name:</label>
<input type="text" id="sName" />

<label for="age">Age:</label>
<input type="text" id="age" />

<label for="sex">Sex:</label>
<input type="text" id="sex" />

<label for="adrs">Address:</label>
<input type="text" id="adrs" />

<label for="pin">PIN:</label>
<input type="text" id="pin" />

<label for="nMail">Req. email:</label>
<input type="text" id="nMail" />

<label for="pass">Password:</label>
<input type="text" id="pass" />

<label for="rPass">Confirm Password:</label>
<input type="text" id="rPass" />

<label for="oEmail">Exisiting email(optional):</label>
<input type="text" id="oEmail" />


<button class="clear" type="submit">Submit</button>
<button type="reset">Reset</button>

</form>
</div><!--container-->
</body>
</html>

gigiloumill
06-12-2010, 01:44 PM
Sweet, thanks E....

nits4u
06-13-2010, 07:50 PM
yes i dont want to use tabels at all. :(
edbr, i want a two column layout, not one after the other. I think i have to use two separate "divs" for this. Is there any other way???
thanks

edbr
06-14-2010, 01:46 AM
i thought thats what i gave you. no? I ll check.
by giving the label a clear left attribute it will start a new line so to speak then as you gave the label and input a width you will get 2 columns

nits4u
06-14-2010, 01:43 PM
this is what is gt from ur code:
http://i47.tinypic.com/2yyw93c.jpg

:)

edbr
06-15-2010, 01:12 AM
ok but i m not sure what you want then that is 2 columns to me. If you want them spaces between the columns you can add margins or padding to input and/or label

nits4u
06-15-2010, 07:14 AM
ah !!! m sorry.
edbr, by two columns i mean that "first name" & "last name" in same line. Then age & sex in next line......hope u gt it now.
Thanx.
some thing like this:
http://i48.tinypic.com/68eudu.jpg

but with much better formatting. :)

edbr
06-15-2010, 07:53 AM
<!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>
<title>Form</title>
<style>
*{
margin:0;
padding:0;
}
body{
font-family: arial;
background:#152F4A;
color:#FFF;
}
#container{
margin:5px; w
}
label{
font-size:.9em;
display:block;
float:left;
width:15%;
margin-top:3px;
}
input{
width:15%;
margin-top:3px; margin-right: 10px; float:left;
}
button{
border:1px outset black;
background:#FFF;
color:#152F4A;
padding:2px 5px;
float:left;
margin-top:5px;
cursor:pointer;
margin-left:0px;
}
.clear{ clear:both;}
</style>
</head>
<body>
<div id="container">
<form name="chk" id="chk" action="" method="post">

<label for="fName">First Name:</label>
<input type="text" id="fName" />

<label for="sName">Last Name:</label>
<input type="text" id="sName" />
<div class="clear">&nbsp</div>

<label for="age">Age:</label>
<input type="text" id="age" />

<label for="sex">Sex:</label>
<input type="text" id="sex" />
<div class="clear">&nbsp</div>

<label for="adrs">Address:</label>
<input type="text" id="adrs" />

<label for="pin">PIN:</label>
<input type="text" id="pin" />

<div class="clear">&nbsp</div>

<label for="nMail">Req. email:</label>
<input type="text" id="nMail" />

<label for="pass">Password:</label>
<input type="text" id="pass" />

<div class="clear">&nbsp</div>

<label for="rPass">Confirm Password:</label>
<input type="text" id="rPass" />

<label for="oEmail">Exisiting email(optional):</label>
<input type="text" id="oEmail" />


<button class="clear" type="submit">Submit</button>
<button type="reset">Reset</button>

</form>
</div><!--container-->
</body>

nits4u
06-17-2010, 07:31 AM
Thanks alot :)

edbr
06-17-2010, 08:16 AM
no prob, if i had seen what youwanted from the start i would probably used 2 divs though. still 1 cat many knives