ラベルのマークアップ

質問

<input name="price_min" type="text" value="" id="price_min" />～
<input name="price_max" type="text" value="" id="price_max" />円

このようなフォーム要素があるとき、
どのようにラベル付けをするのが妥当なのでしょうか？

<label>
価格：<br>
<input name="price_min" type="text" value="" id="price_min" />～
<input name="price_max" type="text" value="" id="price_max" />円
</label>

このように、ひとつの<label>に対して二つのコントロールを含めることはできるのでしょうか？

現在は<span>価格</span>
のように<span>タグで代用しています。

ぜひアドバイスをお願いします。

回答No.1

himajin100000 · ベストアンサー

>このように、ひとつの<label>に対して二つのコントロールを含めることはできるのでしょうか？
DTD上はValidとなるが，label要素の説明に以下の文がある

http://www.w3.org/TR/REC-html40/interact/forms.html#edef-LABEL

The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.
label要素はコントロールに対して情報を付けるために使用される。
各label要素は【厳密に一つの】form controlと結びつけることが出来る。

つまり二つ以上につけるのが正しいとは思いません。
<label for="price_min">価格下限<label>
<input name="price_min" type="text" value="" id="price_min" />～
<label for="price_max">価格上限<label>
<input name="price_max" type="text" value="" id="price_max" />円

という風に分けるしかないと思います

===========
メモ:
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
暗黙的にlabelとcontrolを結びつける(訳注:多分for属性を使わずに、ということだと思う)ためには，control elementはlabelの内容に含まれていなければならない。このとき，labelは一つだけcontrolを含める。
label(の文字列)そのものはコントロールの前か後ろに配置する。

#mayって訳しづらい

回答No.4

steel_gray

下限□円 上限□円
よりも
□～□円

スタイルシートで不要と思えるものを消してしまっては？
しっかりマークアップする事と、どう見せる、どう聴かせるか、は別でしょうから。

回答No.3

神崎 渉瑠（@taloo）

<p>
<label for="price_min">価格：</label><br />
<input name="price_min" type="text" value="" id="price_min" />～
<input name="price_max" type="text" value="" id="price_max" />円
</p>

私が作るとこうなるかな。
fieldsetとpは、一応使い分けているつもりなので、そのときに応じて変わります。
この書き方をするとIEでforが効かなくなりますが、その辺はJavaScriptで対応。

fieldsetを使う場合、HTML4ではlegend必須、XHTMLでは省略可です。
<br>がHTMLの書き方、<input />がXHTMLの書き方になってますが、、、？

> #mayって訳しづらい
私は「～してもよい」と訳しています。
canの弱い表現というか、丁寧というか、ニュアンスの違いというか。

回答No.2

steel_gray

ラベルのマークアップの仕方としては#1さんと同意見で1:1になるべきだと思います。
複数のコントロールをまとめるにはfieldsetが妥当だと思います。
<fieldset><legend>価格</legend>
<label for="price_min">下限<label>
<input name="price_min" type="text" value="" id="price_min" />円
～
<label for="price_max">上限<label>
<input name="price_max" type="text" value="" id="price_max" />円
</fieldset>

お礼

やはりラベルとコントローラは1対1が妥当なようですね。

しかし、

下限□円
上限□円

よりも

□～□円

（□は入力フィールド）

のほうが直感的なような気もするのですが・・・

マークアップって難しいですね；