Forms, Label & the For attribute

[skube]

Perhaps this should be posted in HTML forum rather than here....but from a previous css thread, someone offered the execellent method of creating a form, with labels and fields:

<label for="fname">First Name:</label>
<input type="text" id="fname" name="firstname" maxlength="30">

My question deals with the "for" attribute and how to use it when your label is for more than one input. (i.e Language: Eng or Fre).

<label for="lang">Language:</label>
<input type="radio" id="lang"> Eng
<input type="radio" id="lang"> Fre

One can't have more than one id...so?

[bedlam]

Use a <select> tag instead for multiple choices and you'd be ok I think. This seems to work:

<label for="lang">Language:</label>
<select name="select" id="lang">
<option>French</option>
<option>English</option>
</select>

-B

[TGecho]

Labels are intended to be used for single elements. I think the proper way to code it would be this:

<fieldset>
<legend>Language:</legend>
<input type="radio" name="lang" id="eng" value="eng"> <label for="eng">Eng</label>
<input type="radio" name="lang" id="fre" value="fre"> <label for="fre">Fre</label>
</fieldset>

Labels are for individuals, fieldsets are for groups. The legend is the the label for the group.

[bedlam]

Whoops-

You're right of course!

-B

[skube]

Well that makes very good sense TGecho. However, how would one style it with css to make everything appear in one line? Like so:

Language: (radio) Eng (radio) Fre

[SuzyUK]

TGecho.. great answer!

skube..

either just set those particular input id's to display: inline;

or if you have a block rule which is making your labels display: block too then you can target both the inputs and the labels through a fieldset id (making all display: inline... ) for that particular fieldset

Suzy

[skube]

Suzy, ok this is what I have:

<style type="text/css">
legend,input,label { display:inline;}
</style>
<fieldset>
<legend>Language:</legend>
<input type="radio" name="lang" id="eng" value="eng"><label for="eng">Eng</label>
<input type="radio" name="lang" id="fre" value="fre"><label for="fre">Fre</label>
</fieldset>

But it's still appearing as:
Language:
() Eng ()Fre

Is there anything else to try?

[bruhaha]

Suzy's suggestion looks right in theory, but the browsers don't display it that way (at least not in IE or Netscape). "display:inline" does move the border in, but there is still a line break between the "legend" and the input elements.

The only way I see around this is to remove one set of tags --either "legend" or "fieldset" (or both, if you wish). Of course, part of the reason folks use these is to group the options in their own little boxes. If that's not what you want, you might not want to bother with these tags.

[skube]

So, something like this instead?

<style type="text/css">
div.legend,input { display:inline;}
</style>
<fieldset id="prefernces">
<div class="legend">Language:</div>
<input type="radio" name="lang" id="eng" value="eng"><label for="eng">English</label>
<input type="radio" name="lang" id="fre" value="fre"><label for="fre">French</label>
</fieldset>

[bruhaha]

Skube,

What you posted will display properly (that is, it will all be in one line), but I'm not sure why you want to mess around with creating a separate "div" whose style you then have to reset to display inline.

You could simply remove the DIV tags --write "Language:" between <fieldset> and the first input. Or, if you wish to further stylize your ad hoc legend (set the font, etc), you could place it between SPAN tags (which will display inline by default.)

[skube]

Acutally, what I really wanted to achieve, (before I started messing with fieldset, legend and labels) was something like this:

<style type="text/css">
div.section {border-top: 1px solid; padding:10px}
div.fieldset,div.data,div.input,div.label{float:left}
div.fieldset,div.input {width:200px}
div.label{width:200px; margin-right:10px; text-align:right }
input {margin-right:5px}
.clear{clear:both}
</style>
<div class="section">
<div class="fieldset">Preferences</div>
<div class="data">
<div class="label">Language:</div>
<div class="input">
<input type="radio" name="lang" id="eng" value="eng">English
<input type="radio" name="lang" id="fre" value="fre">French
</div>
<div class="clear"></div>
<div class="label">Preferred Salutation:</div>
<div class="input">
<input type="radio" name="salutation" id="mr" value="mr">Mr.
<input type="radio" name="salutation" id="ms" value="ms">Ms.
<input type="radio" name="salutation" id="mrs" value="mrs">Mrs.
<input type="radio" name="salutation" id="dr" value="dr">Dr.
<input type="radio" name="salutation" id="hon" value="hon">Hon.
</div>
</div>
</div>

I was trying to get around using all the divs. The above code seems a little verbose and not really as symantically correct as it could be. Unfortunately, I have no idea how else I can get the same type of alignments without using tables.

p.s. - I guess thread has now mutated back to a css issue, sorry.