label要素の中に複数のinput要素があると？

Tweet

Category html5, JavaScript 2012/01/19

問題

こんなHTMLを書いたんだけど、だめなのかな？

その他の入力欄をクリックすると、その他のラジオボタンはチェックされていいんだけど、入力欄からフォーカスが外れてしまうみたい。

その他の入力をしたら、ラジオボタンもその他にしたい。

<label>
    <input type="radio" name="hoge" value="1"> はい
</label>
<label>
    <input type="radio" name="hoge" value="2"> いいえ
</label>
<label>
    <input type="radio" name="hoge" value="9"> その他（右にご記入ください）
    <input type="text" name="sonota">
</label>

答え

仕様書では、だめだと言っている様子。

http://www.w3.org/TR/html5/forms.html#the-label-element

要するにlabel要素の中にはラベル付けされたコントロールは1個しかだめですよ。labelの入れ子を作るのもだめですよ。とのこと。

確かに、ラベルに関連付けされた要素は1つじゃないと、ラベルをクリックしたときにどこにフォーカスしたらよいか困ってしまう。動きもおかしくなる環境が多い（入力したいのに、クリックするとフォーカスが他に移って入力できない）。

こんな風にするのが無難だと思う。

・「その他」はラベルとして活用。「その他」をクリックすると、ラジオボタンは切り替わる。
・その他の入力欄には何か書き込まれたら、Javascriptでラジオボタンを切り替える。

<label>
    <input type="radio" name="hoge" value="1"> はい
</label>
<label>
    <input type="radio" name="hoge" value="2"> いいえ
</label>
<label>
    <input type="radio" name="hoge" value="9"> その他（右にご記入ください）
</label>
<input type="text" name="sonota" onchange="this.form.hoge[2].checked='checked'">

反則技なのでしょうけど、時間差攻撃でこんなこともできなくなはい。

<label>
    <input type="radio" name="hoge" value="1"> はい
</label>
<label>
    <input type="radio" name="hoge" value="2"> いいえ
</label>
<label>
    <input type="radio" name="hoge" value="9"> その他（右にご記入ください）
    <input type="text" name="sonota"
            onclick="var x = this; setTimeout(function(){x.focus();}, 50);">
</label>

ちょっとしたデモはこちら

無理やり対応しようとするとややこしそうなので、あくまでもラベルらしく、文字等のみにしておくのがよさそうです。