Best way to do form elements?

HTML & CSS
1

I’m putting together a form and want the label above the text input and have a couple of text input fields side by side.

first name last name
input input

Should I code as a definition lists and put a negative margin on the dd tag to line up with label and then float?

Not sure best way to accomplish without using table, which I would prefer not to use.

Thanks,
jodmcc

2

Hmmmm…I would be inclined to use a DD with the first name/input in one, both given display:block so they appear on different lines. The DD should be floated with a width (both of them, first and last name)

There is probably a better way but that’s what I would do :). I’m no semantics guru.

3

I know there are some screen readers that don’t work properly with this method, but I’d be tempted to do this,

<label for="first-name">
  First name
  <input type="text" name="firstName" id="first-name">
</label>

<label for="last-name">
  Last name
  <input type="text" name="lastName" id="last-name">
</label>

label {
  float:left;
  width:20em;
  margin-right:1em;
}

label input {
  width:100&#37;;
}

If that was out of the question I’d just wrap each label/input pair in a div. I do not consider a definition list to be appropriate for form controls.

4

I agree with Tommy, in that a DL suggests a relationship between labels and inputs that is already there. Though I notice the Fronteers site uses dd’s on all their forms, and they do it partially for double-inputs per label:


        <dt><label for="straat">Straat</label> + <label for="huisnummer">Huisnummer</label></dt>
         <dd><input type="text" class="text" name="straat" id="straat"><input type="text" class="text" name="huisnummer" id="huisnummer"></dd>

However this could be done with classes alone I think.

The screen reader in question who may not like the wrapping-label solution was Window-Eyes 5, and it’s unknown to me whether that has been fixed (they are at version 7.11 by now… good grief, $895.00!).
There was also a similar issue, intermittantly, with some Macs: http://green-beast.com/blog/?p=254

I’ve used labels as wrappers despite this, but I may be unknowingly locking out some users then. I have no clue what the uses of W-E in my country are.

5

So far I’ve only used it on our intranet (where we have no Window-Eyes users or, indeed, any screen reader users at all (although the intranet is still decently accessible (better than many public sites))).

6

Yeah, that would be an example of a 100% safe place to use it (unless there are funky Mac users too : ).

I really wish there were some research on which readers are currently in use and in which percentages in Europe. : (