はてブしね！どこの世界にlabel要素内にa要素付けるバカがいるんだ！

Tweet

別にしなんでもいいけれども、input 要素の type 属性が checkbox とか radio とかのとき、そのアイテムだけじゃ選択しにくいから、label 要素を使って、アイテムの説明書きのテキストをクリックしても選択できるようにしますよね。

処置前

<input type="checkbox" id="sod" />ソフトオンデマンド

ソフトオンデマンド

処置後

<input type="checkbox" id="moodyz" /><label for="moodyz">ムーディーズ</label>

ムーディーズ

「ソフトオンデマンド」のほうは、チェックボックスをクリックしないと選択できないけれども、「ムーディーズ」のほうは、ムーディーズという文字列をクリックしても選択できるよ。

ちなみに、僕はかつて、linklabel 要素を知らずに、一生懸命 JavaScript で同じものを実装しようとしていました……

つわけで、linklabel 要素をクリックすると、関連づけしたアイテムの状態が変化する、つうのがベース。

～～～

さて、はてなブックマークでは。

▲はてぶのラジオボタンの脇のラベルをクリックすると、ラジオボタン選択にならずに、別のページに飛ぶよ。

なんで、linklabel 要素の中に a 要素入れるかなーﾌﾟﾝｽｶ。

これってブラウザ側が悪いことになるの？ マークアップはあくまでマークアップって言われるとそれまでなんだけれども。

（2006.12.19 9.38訂正）

<del>link</del><ins>label</ins>

はてなブックマークのコメント欄で指摘がありました。ありがとうございました。

（2006.12.19 9.42追加）

<strong>▲はてぶのラジオボタンの脇のラベルをクリックすると、ラジオボタン選択にならずに、別のページに飛ぶよ。</strong>　を追加

FLASH ムービー見れないと意味がわからないので追加しました。

2006.12.18 00:34 投稿　大野 義貴 [Web] | 固定リンク |