Label of radiobutton

[André Hänsel]

Hi again,

I have a radio button:
<p>
<input id="v_yes" type="radio" name="v" value="yes" />
<label for="v_yes">Ja</label>
<input id="v_no" type="radio" name="v" value="no" />
<label for="v_no">Nein</label>
</p>

This looks like this:
http://kundenweb.creations.de/usenet/radiobuttons.gif

How can I position the labels beside the radio buttons?

Regards,
André

[Jukka K. Korpela]

André Hänsel <an***@webkr.descripsit:

I have a radio button:
<p>
<input id="v_yes" type="radio" name="v" value="yes" />
<label for="v_yes">Ja</label>
<input id="v_no" type="radio" name="v" value="no" />
<label for="v_no">Nein</label>
</p>

For a simple yes/no question, a checkbox is better (more natural, more
useable) than a pair of radio buttons. But perhaps the example is just a
dummy one. If you really wanted to use such a pair, better markup would be

<fieldset>
<legend>(put here the question to be answered,
or a caption for it)</legend>
<div><input id="v_yes" type="radio" name="v" value="yes" />
<label for="v_yes">Ja</label></div>
<div><input id="v_no" type="radio" name="v" value="no" />
<label for="v_no">Nein</label></div>
</fieldset>

This naturally raises some styling issues different from those of your
markup that illogically marks the pair as a paragraph of text and causes
some default top and bottom margins on most browsers.

This looks like this:
http://kundenweb.creations.de/usenet/radiobuttons.gif

How can I position the labels beside the radio buttons?

The essential thing (for usability) is to make each label/field pair appear
on one line. This should be handled in HTML, not CSS. Using <divis my
favorite, and <br(or <br /if you wish to use XHTML on the www for some
odd reason) is another way. Using <divlets you style the label/field pair
as an element.

Other essential things are the use of a sufficient font size, preferably
letting the user decide (i.e., not setting font size at all) and sufficient
contrast between background and text color. The image illustrates how you
have made things much worse than browser defaults in this respect, so I
think _this_ is the primary problem that you should solve.

I guess that the problem you _thought_ as important now is the vertical
alignment. It is apparently causes by something in your style sheet. Since I
cannot see how you created the problem, I won't discuss the ways to solve it
except by saying that you should probably start by removing _all_ CSS rules
related to the rendering of the form. There might still be some rules in
your style sheet that mess up the rendering.

It is generally advisable to post the URL of the problem page (not just code
snippet or screen capture) before being asked to.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Evertjan.]

André Hänsel wrote on 05 jul 2006 in
comp.infosystems.www.authoring.stylesheets:

I have a radio button:
<p>
<input id="v_yes" type="radio" name="v" value="yes" />
<label for="v_yes">Ja</label>
<input id="v_no" type="radio" name="v" value="no" />
<label for="v_no">Nein</label>
</p>

This looks like this:
http://kundenweb.creations.de/usenet/radiobuttons.gif

How can I position the labels beside the radio buttons?

Beside?

You mean inside or next to?

Or this?

<p>
<label for="v_yes"
style=padding:3px;border:dotted black 1px;>
<input id="v_yes" type="radio" name="v" value="yes" />
Ja</label>
<br><br>
<label for="v_no"
style=padding:3px;border:dotted black 1px;>
<input id="v_no" type="radio" name="v" value="no" />
Nein</label>
</p>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)