Best way to structure two columns of an html form?

Question

What is the best way to align the following?

I want the .inputTitle on the left and inputInput on the right with an error between them.

CSS

 .crud_form{ width:430px; margin:10px solid; font-family:Verdana, Geneva, sans-serif; background:orange; } .inputTitle{ float:left; clear:left; margin:11px 10px 10px 0; width:95px; background:green; } .inputRequired{ float:left; margin:5px; width:113px; background:blue; } .inputError{ float:left; margin:10px; background:red; } .crud_form select textarea{ float:left; clear:both; } 

HTML:

 <form action="#" method="post" accept-charset="utf-8" class="crud_form" enctype="multipart/form-data"> <span class="inputTitle">First Name</span><span class="inputInput"><input type="text" name="first_name" value="" id="first_name" /></span><span class="inputError"></span> <span class="inputTitle">Last Name</span><span class="inputInput"><input type="text" name="last_name" value="" id="last_name" /></span><span class="inputError"></span> <span class="inputTitle">Address</span><span class="inputInput"><textarea name="address" cols="40" rows="10" id="address" ></textarea></span><span class="inputError"></span> <span class="inputTitle">Phone</span><span class="inputInput"><input type="text" name="phone" value="" id="phone" /></span><span class="inputError"></span> <span class="inputTitle">Item</span><span class="inputInput"><select name="item" id="item"> <option value="Caps cost $15"></option> <option value="Mugs cost $20"></option> <option value="Childrens T-shirts, sizes 0 to 6">$10</option> <option value="Ladies (no photo) cost $20"></option> <option value="Men cost $20"></option> </select></span> <span class="inputError"></span> <span class="inputTitle">Comments</span><span class="inputInput"><textarea name="comments" cols="40" rows="10" id="comments" ></textarea></span><span class="inputError"></span> <input type="submit" value="Save" /> </form> 

Answer 1

I do not know why everyone uses div , span and li , etc. It's simple, look at the example below:

 label { width: 150px; padding-right: 20px; display: inline-block; } 

 <p> <label for="IDofInput">text goes here</label> <input type="text" id="IDofInput"> </p> <p> <label for="IDofInput">text goes here</label> <input type="text" id="IDofInput"> </p> <p> <label for="IDofInput">text goes here</label> <input type="text" id="IDofInput"> </p> 

Answer 2

I want the .inputTitle on the left and inputInput on the right with an error between them.

What I always did was set the width for them.

For instance:

If you were supposed to have 3 elements with a floating point, and you want them to perfectly align in the "container" as such, for the container, of course, you need a set of widths.

After you set the width of the container, set the width of these three floating elements to the width of the container.

See below:

HTML:

 <div class="container"> <div class="inputTitle"></div> <div class="inputError"></div> <div class="inputInput"></div> <div class="clear"></div> </div> 

CSS

 .container { width: 600px; } .inputTitle { width: 200px; float: left; } .inputError { width: 200px; float: left; } .inputInput { width: 200px; float: left; } .clear { clear: both; } 

Ultimately, you could add the clear: both; CSS declaration in the container, but I would like to clearly indicate: both; Class just for safety.

Of course, you can always use Shortcuts, but setting a predefined width for the label through CSS will apply to all labels inside the class and / or id.

I hope this helps! Thank you Aaron

Answer 3

To clear the vertical alignment, you can wrap each label - the input pair in the containing div, and then put the inputs to the right. I'm not sure, based on your question, if this is the alignment you are looking for, but it has a nice look.

HTML:

 <form action="#" method="post" accept-charset="utf-8" class="crud_form" enctype="multipart/form-data"> <div class="formdiv"> <span class="inputTitle">First Name</span> <span class="inputInput"> <input type="text" name="first_name" value="" id="first_name" /> </span> <span class="inputError"></span> </div> <div class="formdiv"> <span class="inputTitle">Last Name</span> <span class="inputInput"> <input type="text" name="last_name" value="" id="last_name" /></span> <span class="inputError"></span> </div> <div class="formdiv"> <span class="inputTitle">Address</span> <span class="inputInput"><textarea name="address" cols="40" rows="10" id="address" ></textarea></span><span class="inputError"></span> </div> <div class="formdiv"> <span class="inputTitle">Phone</span><span class="inputInput"><input type="text" name="phone" value="" id="phone" /></span><span class="inputError"></span> </div> <div class="formdiv"> <span class="inputTitle">Item</span><span class="inputInput"><select name="item" id="item"> <option value="Caps cost $15"></option> <option value="Mugs cost $20"></option> <option value="Childrens T-shirts, sizes 0 to 6">$10</option> <option value="Ladies (no photo) cost $20"></option> <option value="Men cost $20"></option> </select></span> <span class="inputError"></span> </div> <div class="formdiv"> <span class="inputTitle">Comments</span><span class="inputInput"><textarea name="comments" cols="40" rows="10" id="comments" ></textarea></span><span class="inputError"></span> </div> <input type="submit" value="Save" /> </form> 

CSS

 .formdiv { float: left; width: 100%; margin-bottom: 1em; } .crud_form{ width:430px; margin:10px solid; padding: 10px; font-family:Verdana, Geneva, sans-serif; background:orange; } .inputTitle { float:left; clear:left; /* margin:11px 10px 10px 0; */ width:95px; background:green; } .inputInput { float: right; } .inputRequired{ float:left; margin:5px; width:113px; background:blue; } .inputError{ float:left; margin:10px; background:red; } .crud_form select textarea{ float:left; clear:both; } 

Answer 4

The best way to structure a two-columned form is to use an element with two table columns inside the form element. But, as you say that you want an “error” (apparently an error indicator or error message) between the input label (header) and the input field, you really want to get a three- column, i.e. Three column table.

 <form ...> <table> <tbody> <tr><td class="inputTitle"><label for="first_name">First Name</label></td> <td class="inputError"><span></span></td> <td class="inputInput"><input type="text" name="first_name" id="first_name" /></td></tr> </tbody> </table> </form> 

This (other than mimicking it using CSS table functions that have limited browser support) is the only way to make browsers allocated width to columns according to content width requirements, instead of making wild guesses about what might be required.

Answer 5

annotation

IMHO (and W3C supports me), the semantics of a list are best to describe form layouts - forms as lists of fast data. This presentation uses a grid to layout form controls.

Link

for a full description of how this is done, see the W3C link to this , originally published in the Opera developer community, to their Web Standards Curriculum.

Sample Code / Implementation

HTML:

 <form> <ul> <li><label for="realname">Name:</label><input type="text" name="name" value="" class="medium" id="realname" /></li> <li><label for="address">Email:</label><input type="text" name="email" value="" class="medium" id="address" /></li> <li><label for="messageBody">Comments:</label><textarea name="comments" cols="32" rows="8" class="long" id="messageBody"></textarea></li> </ul> </form> 

CSS

 /* base font size, other measures relay on seventh parts of this */ body { font-size: 14px; line-height: 1.714em; } /* form styles */ form { margin: 0; width: 35.929em; } /* reset list styles to be used as form layout mechanism */ ul { margin: 0; padding: 0; list-style-type: none; } li { clear: both; height: 1.714em; margin: 0; } /* form controls styles */ fieldset { height: 1.429em; margin: 0 0 -.143em 0; border: 0; } label { display: block; float: left; clear: left; width: 10.286em; overflow: auto; padding-right: 1.714em; text-align: right; } input { height: 1.143em; border: .071em solid rgb(96,96,96); padding: .071em; line-height: .929em; } textarea { height: 4.714em; margin-bottom: .286em; border: .071em solid rgb(96,96,96); padding: 0; } input, textarea { margin-top: 0; font-size: 100%; display: block; float: left; overflow: hidden; font-family: Futura,'Century Gothic',sans-serif; font-size: 1em; } /* input and textarea variants */ .medium { width: 11.714em; } .long { width: 20.429em; } 

you can play with the full code example in this jsFiddle (this does not contain IE stylesheet).

Update

I edited the answer to include only the appropriate code for the two column layout form. Please refer to the links above for a full-blown working example.