Input Box Alignment?

Question

How can I get my boxes to align with one another if the text in the is longer than the others.

I have this entire form within an unordered list.

I have copied and displayed the code via jsFiddle, you can find what I am speaking of here...

score 2 · Accepted Answer · answered Sep 27 '11 at 22:21

2

Your <label> tags were wrapping the <input> tags which was causing the issue of trying to treat them separately with CSS:

http://jsfiddle.net/EFByC/3/

answered Sep 27 '11 at 22:21

Allen Liu

3,948
8
35
47

1

Wrapping the label around the input is one way to associate the label with the field. Clicking on the label then gives focus to the field. The way you've done it there is no association, so no focus, and accessibility is poor. I do it the way Peter shows in his answer, with the `for=".."` qualifier to tie the label and field together. – Stephen P Sep 27 '11 at 22:25
@StephenP Good point. I was only focused on the styling that I forgot about the `for` qualifier. I didn't even notice that all the `name` attributes were identical! Anyway, it's been updated. – Allen Liu Sep 27 '11 at 22:34

score 2 · Answer 2 · answered Sep 27 '11 at 22:23

I would recommend that you change your form HTML like this

<li><label for="firstname">PATIENT FIRST NAME: </label><input type="text" id="firstname"/></li>
<li><label for="middle">PATIENT MIDDLE INITIAL:(OPTIONAL) </label><input type="text" id="middle" /></li>
<li><label for="last">PATIENT LAST NAME: </label><input type="text" id="last" /></li>
<li><label for="date">DATE OF BIRTH: </label><input type="text" id="date" /></li>
<li><label for="gender">GENDER: </label><input type="text" id="gender" /></li>
<li><label for="id">SUBSCRIBER ID: </label><input type="text" id="id"/></li>

Give each form field a unique ID
Do not wrap input inside the label
You can use the for attribute on the label to connect it to an input.

Add a css rule to #form-container label to give them a specific width:

width: 210px;

See demo.

the demo works fine in IE8, but (for some reason) NOT in Chrome (v.24). — kmote, Jan 13 '13 at 20:21

Muleskinner · Answer 3 · 2011-09-27T22:35:10.030

1

Why have you marked the form up in <ul>, this is not nessesary.

For a nicer and more readable layout I suggest that you have your labels on top of the input fields. Something like this:

http://jsfiddle.net/Claudius/EFByC/9/

edited Sep 27 '11 at 22:35

answered Sep 27 '11 at 22:26

Muleskinner

14,150
19
58
79

1

"Input fields should not be nested into labels" can you back that up? w3c recommends it; its good for accessibility – albert Sep 27 '11 at 22:29
@albert - I agree. I linked a related question in my answer, and the standard okays inputs before, after, and inside of labels. Which one is "best" boils down to personal preference - mostly an argument between HTML purists ("a label is a separate element - not a containing element") and those who prefer simplicity and/or less typing ("all that for="xxx" and id="xxx" business gets kinda tedious"). – Xavier Holt Sep 27 '11 at 22:41
@xavier you're good man. actually, from an accessibility standpoint, there was a thread on forrst a few months ago that says you shouldn't wrap them; something about screen-readers reading them 2x. but only in certain situations. that is a negative. a positive of wrapping them is increasing the clickable area (usability), amongst other things. never too late man. always add your input when its useful! – albert Sep 27 '11 at 22:59

score 1 · Answer 4 · answered Sep 27 '11 at 22:30

1

add a fieldset, put a width on it. make your inputs and labels display:block; float your inputs right

answered Sep 27 '11 at 22:30

albert

8,112
3
47
63

score 1 · Answer 5 · edited May 23 '17 at 11:47

You've got a couple of options, really:

Float the inputs to the right, like Kevin suggested (set the width of the UL to control the spacing).
Pull the input out of the label, and give the label a fixed width (as in Peter's answer).
Within the label, wrap the label text in a span, and give that span a fixed width (this, like the first option, will let the input stay within the label - see below).

And note that while lots of people are saying that it's bad to have an input inside a label, that's not necessarily true (it's definitely in the standard - see this question for more on that). And wrapping the input in the label lets you get the "click the name and focus the field" behaviour without specifying a bunch of ugly 'for="whatever"' attributes.

Hope this helps!

score 0 · Answer 6 · answered Sep 27 '11 at 22:23

0

There are several approaches to form styling. I this case you can float the inputs and that will give you the result you want without changing the html.

See demo: http://jsfiddle.net/EFByC/8/

answered Sep 27 '11 at 22:23

amosrivera

26,114
9
67
76

Input Box Alignment?

6 Answers6