www.webdeveloper.com
Results 1 to 8 of 8

Thread: How to use CSS to align HTML forms?

  1. #1
    Join Date
    Feb 2010
    Posts
    5

    How to use CSS to align HTML forms?

    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?

  2. #2
    Join Date
    Feb 2010
    Posts
    184
    they are left aligned by default, please post your code.

  3. #3
    Join Date
    Feb 2010
    Posts
    5
    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?

  4. #4
    Join Date
    Feb 2010
    Posts
    184
    see example

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

  5. #5
    Join Date
    Feb 2010
    Posts
    5
    Quote Originally Posted by letmehaveago View Post
    see example

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

  6. #6
    Join Date
    Feb 2010
    Posts
    184
    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!

  7. #7
    Join Date
    Feb 2010
    Posts
    184
    oh i misunderstood the question, see the solution below.

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

  8. #8
    Join Date
    Feb 2010
    Posts
    5
    Quote Originally Posted by letmehaveago View Post
    oh i misunderstood the question, see the solution below.

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles