CODEWITHSUNDEEP
htmlcss
Martijn
Martijn

Reputation: 5653

Put text input inside label for radio button?

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.

Upvotes: 13

Views: 4104

Answers (1)

Quentin
Quentin

Reputation: 943142

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.

Upvotes: 4

Related Questions