Q&A
丁寧に答えて頂ありがとうございました
前提・実現したいこと
labelタグとinputタグは
html
1<label>hello! 2 <input type="text"> 3</label>
html
1<label for="hello">hello!</label> 2<input type="text" id="hello">
という、2つの書き方があるとprogateなどで知りました
発生している問題・エラーメッセージ
質問1
html
1<label for="hello">hello! 2 <input type="text" id="hello"> 3</label>
という書き方はできますでしょうか？
質問2
labelタグで囲むのと、for属性を使うのは何が違いますか？
どちらが優れている、オススメ、など、あったら教えてくださると助かりますm(_ _)m
質問3
電話番号などでフォームinputを2つにわけたい時、どう書久野が一般的でしょうか？
自分で考えてみたのはこんな感じで、ラベルをクリックすると最初のinputタグにフォーカスがあたってくれるのでこれでいいかなと思い、今まではこれを使ってました
html
1<label> 2 hello! 3 <input type="text"> 4 <input type="text"> 5</label>
該当のソースコード
html
1<label for="hello">hello! 2 <input type="text" id="hello"> 3</label>
試したこと
補足情報（FW/ツールのバージョンなど）
ご教示お願いします
回答2件
0
ベストアンサー
TL;DR;
- 関連付け方法の併用 ⇒ できる
- 関連付け方法の違い ⇒ ほとんど同じ
- 1つのラベルに複数のフォーム要素を関連付ける ⇒ できない
関連付け方法の併用
できます。
2つの関連付けの方法を併用した場合、label要素に内包される関連付けが可能な要素(labelable element)は、for属性で指定した値のid属性を持つ要素でなければなりません。もしも、for属性で指定した値のid属性を持たないlabelable elementをlabel要素内に内包した場合、そのlabelable elementはfor属性で指定したlabelable elementではないということになるので、HTML5の文法に違反してしまいます。
2つの関連付け方法の違い
ありません。両者とも、ラベルとラベル付け対象の要素の対応を示すものです。
ただし、2つの方法にはそれぞれ幾つかの利点、欠点があります。それらを踏まえたうえで、どちらの関連付け方法を使用するかを選択すると良いと思います。
for属性を使い関連付ける方法
- HTML文書内の複数箇所にラベル付け対象の要素と関連付けられた
label要素を記述することができる。 - HTML文書内でユニークでなければならない
id属性を付与する必要があるため、id属性が既に使われていないか考慮する必要がある。 - ラベル付け対象の要素と関連付けられた
label要素が、HTML文書内のどこに何個あるのかが分かりづらい。
関連付け対象の要素をlabel要素に内包する方法
- 文書内でどの
label要素とラベル付け対象の要素が関連付けられているかがわかりやすい。 id属性の管理をする必要がない。- クリックできる範囲が
for属性を使った場合よりも広くなる場合がある。 - 複数箇所にラベル付け対象の要素と関連付けられた
label要素を記述することができない。
1つのlabel要素に複数のlabelable elementを割り当てる
どちらの関連付けの方法を使ったとしても、無理です。
質問文にもある以下のコードは、ラベルと関連付けられていないlabelable elementがlabel要素内にあるため、文法違反となります。
HTML
1<label> 2 hello! 3 <input type="text"> 4 <input type="text"> 5</label>
そのため、label要素以外の方法で1つのラベルと複数のlabelable elementを関連付ける必要があります。その1つの方法として、aria-labelledby属性を使用することができます。aria-labelledby属性を使うと、この属性に指定した値と同じ値のid属性を持つ要素をラベルとして使うことができます。ただし、aria-labelledby属性は、label要素で関連付けたときのような、「ラベルをクリックすると関連付けられたフォーム要素にフォーカスが当たる」動作を行わないことに注意が必要です。
HTML
1<label for="hello" id="label-hello">テキスト</label> 2<input type="text" id="hello" aria-labelledby="label-hello"> 3<input type="text" aria-labelledby="label-hello">
投稿2018/08/24 12:39
総合スコア14731
0
質問1
for付きのlabelでinputを囲んでも問題ありません
単純に言えばforが優先されます
HTML
1<label for="hello">hello! 2<input type="text"> 3</label> 4<input type="text" id="hello">
質問2
使用用途が異なるので、自ずと使い分けらられるでしょう
隣接するテキスト（もしくは画像）とinputを紐付けるなら囲むほうがよい
なぜならidを無駄にフル必要がないから
離れた場所にあるものを指定するにはforしか選択肢はありません
質問3
例示の処理でもいいですが、実質前の方にしかフォーカスが行かないので
普通に前の方だけlabelで囲めばいいんじゃないでしょうかね？
投稿2018/08/24 12:38
総合スコア114779
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/24 15:18
2018/08/24 15:44