Put text input inside label for radio button?

Question

I'm trying to make a radio group specifying a bunch of options, and an extra option "other" with a text input to specify. The code for this particular radio button I'm using is

<input type='radio' name='RadioInput' value='Other' id='RadioInput_Other' />
  <label for='RadioInput_Other'>Ohter: 
  <input type='text' name='RadioInput_Other_Value' id='RadioInput_Other_Value' value='' />
  </label>

The idea is that if you give focus to the text input, the radio button corresponding to it is selected. The code above almost does this (since the text input is inside the label). However, it also shifts focus to the radio button (which is annoying, since whatever you type next is lost).

Is there any way to prevent this using XHTML1.0 / CSS2? Preferably without using javascript.

Answer 1

Placing a control inside a label associates that label with that control, and you may only have one control associated with a given label. This is therefore non-conformant HTML.

JavaScript is the better option here.