PDA

Click to See Complete Forum and Search --> : How to use CSS to align HTML forms?

Emkay
02-05-2010, 11:21 AM
Can anyone tell me how to use css to left-align (labels aligned left) a basic HTML form? Every method I use doesn't seem to work properly. How do I make the inputs (text fields) display in line?
letmehaveago
02-05-2010, 07:54 PM
they are left aligned by default, please post your code.
Emkay
02-06-2010, 05:31 AM
Yep the text labels are aligned properly but I want to know how to align the text fields in line.

Here is what it looks like right now:

http://i45.tinypic.com/4idfn.jpg

I'm trying to make the text fields align properly 'in line', if you get what I mean, how do it do it?
letmehaveago
02-06-2010, 08:04 AM
see example


<!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>Untitled Document</title>
<style type='text/css'>

input {
float: right;
}

form {
line-height: 2em;
}

</style>
</head>

<body>
<form style='width: 300px;border: 1px solid yellow'>
<label>First Name: </label><input type='text' /><br />
<label>Last Name: </label><input type='text' /><br />
<label>Email: </label><input type'text' />
</form>
</body>
</html>
Emkay
02-06-2010, 09:43 AM
see example


<!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>Untitled Document</title>
<style type='text/css'>

input {
float: right;
}

form {
line-height: 2em;
}

</style>
</head>

<body>
<form style='width: 300px;border: 1px solid yellow'>
<label>First Name: </label><input type='text' /><br />
<label>Last Name: </label><input type='text' /><br />
<label>Email: </label><input type'text' />
</form>
</body>
</html>


Thanks for that :), but there's a slight problem. If I increase the width of one of the fields, that the field sticks out and is not left aligned with the rest of the fields.

For example the last one in this image:

http://www.lukew.com/ff/content/form_labelalignment.gif

Actually, I may be wrong, is it normal to have all fields width at the same size?
letmehaveago
02-06-2010, 08:20 PM
you will need to change the width of your container, so it is large enough to hold both the label and also input fields on the same line.

I don't see any problems with the image!
letmehaveago
02-06-2010, 10:04 PM
oh i misunderstood the question, see the solution below.


<!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>Untitled Document</title>
<style type="text/css">
.right_aligned {
height: 10em;
line-height: 1.25em;
}

.right_aligned label {
display: block;
float: left;
clear: left;
width: 200px;
padding-right: 1em;
text-align: right;
}

.right_aligned select, .right_aligned input {
display: block;
}

</style>
</head>

<body>
<form class="right_aligned">
<label>Label: </label><input type="text" /><br />
<label>Longer Label: </label><select><option>Select value</option></select><br />
<label>Even Longer Label: </label><input type="text" /><br />
<label>One More Label: </label><input type="radio" /><br />
<label>&nbsp;</label><input type="radio" />
</form>
</body>
</html>
Emkay
02-07-2010, 02:47 AM
oh i misunderstood the question, see the solution below.


<!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>Untitled Document</title>
<style type="text/css">
.right_aligned {
height: 10em;
line-height: 1.25em;
}

.right_aligned label {
display: block;
float: left;
clear: left;
width: 200px;
padding-right: 1em;
text-align: right;
}

.right_aligned select, .right_aligned input {
display: block;
}

</style>
</head>

<body>
<form class="right_aligned">
<label>Label: </label><input type="text" /><br />
<label>Longer Label: </label><select><option>Select value</option></select><br />
<label>Even Longer Label: </label><input type="text" /><br />
<label>One More Label: </label><input type="radio" /><br />
<label>&nbsp;</label><input type="radio" />
</form>
</body>
</html>


That works perfectly, thanks very much :D