Creating a form to have margins and text next to each other - what is the semantic way to do this?

Question

I want to create a form, so there is text on the left and inputs on the right, currently I'm doing

<div id="labels"> <ul> <li>The Label</li> </ul> </div> <div id="inputs"> <ul> <li><input type="text /></li> </ul> </div> 

And CSS

 input[type=text] { height: 14px; } #labels { float: left; } #inputs { float: right; } li { padding-top: 4px; padding-left: 10px; } // Text size is 14px 

What happens is that the text and the fields are not perfectly aligned (when adding elements, the input data gradually decreases). I think this is due to the fact that not all inputs can be 14px (I use drop downs, checkboxes, radioios, etc.).

What would be the right way to create this? I know the table will fix the problem, but is it semantic?

Answer 1

This question has been asked several times here at SO, you can do a simple search and find many solutions.

But here is a simple form to get started:

HTML

 <form> <div class="line"> <label for="input">Full Name</label> <div class="input"> <input type="text" size="30" name="input"> </div> </div> <div class="line"> <label for="input">Company</label> <div class="input"> <input type="text" size="30" name="input"> </div> </div> <div class="line"> <label for="nselect">Dropdown Menu</label> <div class="input"> <select name="select"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div class="line"> <label for="input">Text 1</label> <div class="input"> <input type="text" size="30" name="input"> </div> </div> <div class="line"> <label for="input">Text 2</label> <div class="input"> <input type="text" size="30" name="input"> </div> </div> <div class="line"> <label for="input">Text 3</label> <div class="input"> <input type="text" size="15" name="input"> </div> </div> </form> 

CSS

 form { margin:10px 0; } label { color: #404040; float: left; font-size: 13px; line-height: 18px; padding-top: 6px; text-align: right; width: 130px; } label, input, select, textarea { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px; font-weight: normal; line-height: normal; } input, textarea, select { -moz-border-radius: 3px 3px 3px 3px; border: 1px solid #CCCCCC; color: #808080; display: inline-block; font-size: 13px; height: 18px; line-height: 18px; padding: 4px; width: 210px; } select { height: 27px; line-height: 27px; } form .input { margin-left: 150px; } form .line { margin-bottom: 18px; } 

Here is a demo: http://jsfiddle.net/5aduZ/1/

Many people will not agree with my use of divs to separate form elements, but through testing I found that this format is the safest and most reliable way to do this, since it separates fields perfectly and it works fine under IE. In addition, it is a format used by big boys (facebook, twitter, google).

Answer 2

It makes sense that the label is next to the HTML input - it is easier to read and more convenient to maintain. Typical HTML for this would be:

 <div class="fieldWrapper"> <label for="something">Something</label> <input type="text" id="something" name="something"> </div> <div class="fieldWrapper"> <label for="something">Something</label> <input type="text" id="something" name="something"> </div> 

And CSS will be:

 label, input { float:left; } input { font-size:14px; padding: 2px; // instead of using fixed height } label { width: 100px; // can use JavaScript if it needs to be dynamic padding-top: 3px; // to make the label vertically inline with the input element } .fieldWrapper { clear:left; } 

Answer 3

In my company, back when we first launched our first web application back in 2001, we used a table.

 <table class="formTable"> <tbody> <tr> <td><label>Name:</label></td> <td><input type="text" name="name" /></td> </tr> <tr> <td><label>E-mail:/label></td> <td><input type="text" name="email" /></td> </tr> </tbody> </table> 

And although this works, philosophically I do not like this approach, because, as far as I know, the table should contain tabular data.

You can also use CSS and DIV:

 <style> .formLabel, .formInput { display:inline-block; } </style> <div class="formField"> <div class="formLabel"><label>Name:</label></div> <div class="formInput"><input type="text" name="name" /></div> </div> <div class="formField"> <div class="formLabel"><label>E-Mail:</label></div> <div class="formInput"><input type="text" name="email" /></div> </div> 

See here: http://jsfiddle.net/9P7pg/

Or you could avoid using the div all together and just apply display: inline-block for each label and input (or use classes). But then you will also have to remember that you need to use the breaking space to return the carriage between the combination of labels and fields.

Answer 4

If you really can't change your HTML, you can set the CSS height in the <li> tag to fix the alignment problem. But I strongly recommend that you choose one of the other solutions offered, because your HTML is very difficult to read in its current state. And you should use the <label> .

Answer 5

Write this <input type="text" name="firstname" /> and set the width and height indents

Answer 6

there is a special list for this! it is called a definition list (dl) and consists of definitions and definition definitions (dt / dd). I usually put the text in dt and the input field in dd. eg:

 <form action="bla"> <dl> <dt>Name*</dt> <dd><input type="text" name="name" /> <dt>Email</dt> <dd><input type="text" name="email" /> </dl> <p><input type="submit" /></p> </form>