1. Home
  2. Forums Index
  3. Browser Side / CSS 4:15 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Vertically align inputs on contact form with labels on left?

Contact form does not seem to justify usage of a table.

         

JAB Creations

11:07 pm on Dec 5, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've hit a roadblock, tableless contact form. How do I go about it? I want to keep my labels on the left and have the all the inputs left borders align. Someone someplace said to just put the labels above like block items but thats too easy and the hard way is usually the right way IoI... I'm just not sure how to go about it? A contact form does not seem like proper content for a table. Here is the code for my form minus the action of course...

<form action="" method="post">
<fieldset>
<span>* Required Field</span>
<br />
<label for="name">Name</label> <input class="textbox" id="name" size="40" tabindex="1" type="text" />*
<br />
<label for="EmailFrom">E-Mail Address</label> <input class="textbox" id="EmailFrom" size="40" tabindex="2" type="text" />*
<br />
<label for="Subject">Subject</label> <input class="textbox" id="Subject" size="40" tabindex="3" type="text" value="JAB Creations Contact" />*
<br />
<label for="Comments">Comments</label> <textarea cols="42" id="Comments" rows="4" tabindex="4"></textarea>
<br />
<label for="URL">Homepage</label> <input class="textbox" id="URL" size="40" tabindex="5" type="text" value="http://" />
<br />
<input class="button" name="submit" tabindex="6" type="submit" value="Submit" />
</fieldset>
</form>

D_Blackwell

11:36 pm on Dec 5, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



How about floating the labels and setting a width?

<style>
label {
float: left; width: 110px;
}
</style>

D_Blackwell

12:00 am on Dec 6, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



BTW - If you pump up the font-size or line-height, it will blow up. Replace the <br /> with <p>.

coho75

12:14 am on Dec 6, 2005 (gmt 0)

10+ Year Member



This seems to work in IE. I didn't try it in FF.

<html>
<head>
<style type="text/css">
label {float: left; width: 110px;margin:0;}
form {width:500px;}
fieldset {width:100%;}
</style>

</head>
<body>

<fieldset>
<form action="" method="post">

<p>* Required Field</p>

<label for="name">Name</label> <input class="textbox" id="name" size="40" tabindex="1" type="text" />*

<label for="EmailFrom">E-Mail Address</label> <input class="textbox" id="EmailFrom" size="40"

tabindex="2" type="text" />*

<label for="Subject">Subject</label> <input class="textbox" id="Subject" size="40" tabindex="3"

type="text" value="JAB Creations Contact" />*

<label for="Comments">Comments</label> <textarea cols="42" id="Comments" rows="4"

tabindex="4"></textarea>

<label for="URL">Homepage</label> <input class="textbox" id="URL" size="40" tabindex="5" type="text"

value="http://" />

<input class="button" name="submit" tabindex="6" type="submit" value="Submit" />

</form>
</fieldset>

</body>
</html>

JAB Creations

1:58 am on Dec 6, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Cool, works in Firefox just fine!

Yeah I tried setting a float and width but due to time constraints I was not able to play with it like you folks...

Thanks!

- John

SuzyUK

8:38 pm on Dec 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



John
you might also like to check out this solution to table-less CSS Forms [webmasterworld.com] from our library, an oldie but a goodie as they say

JAB Creations

1:02 am on Dec 8, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks Suzy! :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:15 am May 2, 2026