CSS Forms

[SpooF]

October 12th, 2006, 10:19 pm

I want to make colums with CSS so I can have all the inputs aligned. Anyone know how to do this?

Ive looked but the only thing I can find is this

http://jeffhowden.com/code/css/forms/

October 13th, 2006, 3:30 am

When you use:

<fieldset>
<legend></legend>
<label></label>

</fieldset>

the whole thing kinda lines itself up automatically.

October 13th, 2006, 4:14 am

this might help- http://alistapart.com/articles/practicalcss/ ... scroll down a lil to find the form part.

October 13th, 2006, 4:37 am

SpooF wrote:

I want to make colums with CSS so I can have all the inputs aligned. Anyone know how to do this?

Ive looked but the only thing I can find is this

http://jeffhowden.com/code/css/forms/

I do the following (and yeah yeah...I know I don't need both a name and ID for my inputs):

Code: [ Download ] [ Select ]

// My CSS:

form p label {
  font: bold 1em Arial, Helvetica, sans-serif;
  float: left;
  width: 30%;
}

form p {
  clear: left;
  margin: 0;
  padding: 5px 0 0 0;
}

input.txt {
  width: 200px;
}

fieldset.narrow {
  width: 450px;
}

<!-- XHTML -->

<form id="inputform" method="post" action="">
  <fieldset class="narrow"><legend>Please input your information</legend>
   <p><label for="name">Name:</label><input name="username" id="username" type="text" class="txt" /></p>
   <p><label for="password">Password:</label><input name="password" id="password" type="password" class="txt" /></p>
   <p><label for="email">E-mail Address:</label><input name="email" id="email" type="text" class="txt" /></p>
   <p><input type="submit" name="submit" id="submit" value="Submit" /></p>
  </fieldset>
</form>

1. // My CSS:
3. form p label {
4.   font: bold 1em Arial, Helvetica, sans-serif;
5.   float: left;
6.   width: 30%;
7. }
9. form p {
10.   clear: left;
11.   margin: 0;
12.   padding: 5px 0 0 0;
13. }
15. input.txt {
16.   width: 200px;
17. }
19. fieldset.narrow {
20.   width: 450px;
21. }
23. <!-- XHTML -->
25. <form id="inputform" method="post" action="">
26.   <fieldset class="narrow"><legend>Please input your information</legend>
27.    <p><label for="name">Name:</label><input name="username" id="username" type="text" class="txt" /></p>
28.    <p><label for="password">Password:</label><input name="password" id="password" type="password" class="txt" /></p>
29.    <p><label for="email">E-mail Address:</label><input name="email" id="email" type="text" class="txt" /></p>
30.    <p><input type="submit" name="submit" id="submit" value="Submit" /></p>
31.   </fieldset>
32. </form>

I got this kind of setup from one of the Sitepoint books.