ansaurus

Question

How to properly align textboxes on a webpage with labels

Answer 1

+2 A:

use the <fieldset> tag in combination with <label>. Step by step explanation.
Then align at will.

PW 2010-05-09 09:43:18

Answer 2

+1 A:

In your screenshot, you have text-align:centred each element inside a div. So you are seeing the correct behaviour for your current approach.

Instead you need to centre a div (the encompassing box of your textbox and label elements) and then left-align (which will be the browser default) the internal elements.

To centre a div use:

#content {

width: 700px ; margin-left: auto ; margin-right: auto ; }

Markive 2010-05-09 10:01:43

Answer 3

+1 A:

basically you have to define a width for your form and float: left input and float: right the label, so the label gets next to your input. The is a trick to center relative possitionet elements in CSS: margin: 0 auto but you have to define a width.

The problem you gonna have is that all your inputs are gonna be next to each other. In order to prevent that you nest your label and input in a element. And clear the floats. I would use a UL LI element and not Paragraphs (like in PW example), because most of the time, your form, is a list of questions.

I have made up an example for you: http://jsfiddle.net/Qs4pk/2/

meo 2010-05-09 10:47:21

Answer 4

A:

http://reisio.com/temp/form2.html

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
body {
    margin: 8px;
    padding: 0;
}
form {
    margin: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 12px sans-serif;
    display: block !important;
    display: inline-block;
    overflow: hidden;
}
li {
    float: left;
    clear: left;
}
label {
    display: block;
    width: 200px;
    height: 19px;
    line-height: 19px;
    position: relative;
    margin: 0 0 5px;
    cursor: pointer;
    text-align: right;
}
input {
    width: 120px;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid gray;
    padding: 1px 0;
    height: 15px;
    font: 12px sans-serif;
}
        </style>
    </head>
    <body>
        <form action="">
            <ul>
                <li>
                    <label><input> Beans</label>
                </li>
                <li>
                    <label><input> Cornbread</label>
                </li>
            </ul>
        </form>
    </body>
</html>

reisio 2010-05-09 18:56:31

Answer 5

A:

You question have also a design aspect. What is the best alignment of labels and input textboxes from the users point of view? I was very surprised some months ago as I found "Web Form Design" at MIX09 (see http://videos.visitmix.com/MIX09/C17F). You will see on examples how to improve user experience if one place labels and input textboxes in other places. This video just changed my mind in this area. You can also look at http://www.lukew.com/presos/ and "Best Practices for Hints and Validation in Web Forms" http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/ which some has close information.

Oleg 2010-05-09 20:52:27

ansaurus

tags:

views:

answers:

How to properly align textboxes on a webpage with labels

related questions