質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
for

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

36883閲覧

labelタグはfor属性を使うべきか、inputタグを囲むべきか

SanaeYamazaki

総合スコア14

for

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

4グッド

6クリップ

投稿2018/08/24 12:18

編集2018/08/24 12:18

前提・実現したいこと

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/ツールのバージョンなど)

ご教示お願いします

awewewew, khk81164, zfr46995, vml70641👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

TL;DR;

  • 関連付け方法の併用 ⇒ できる
  • 関連付け方法の違い ⇒ ほとんど同じ
  • 1つのラベルに複数のフォーム要素を関連付ける ⇒ できない

関連付け方法の併用

できます

2つの関連付けの方法を併用した場合、label要素に内包される関連付けが可能な要素(labelable element)は、for属性で指定した値のid属性を持つ要素でなければなりません。もしも、for属性で指定した値のid属性を持たないlabelable elementlabel要素内に内包した場合、そのlabelable elementfor属性で指定したlabelable elementではないということになるので、HTML5の文法に違反してしまいます。

2つの関連付け方法の違い

ありません。両者とも、ラベルとラベル付け対象の要素の対応を示すものです。

ただし、2つの方法にはそれぞれ幾つかの利点、欠点があります。それらを踏まえたうえで、どちらの関連付け方法を使用するかを選択すると良いと思います。

for属性を使い関連付ける方法

  • HTML文書内の複数箇所にラベル付け対象の要素と関連付けられたlabel要素を記述することができる。
  • HTML文書内でユニークでなければならないid属性を付与する必要があるため、id属性が既に使われていないか考慮する必要がある。
  • ラベル付け対象の要素と関連付けられたlabel要素が、HTML文書内のどこに何個あるのかが分かりづらい。

関連付け対象の要素をlabel要素に内包する方法

  • 文書内でどのlabel要素とラベル付け対象の要素が関連付けられているかがわかりやすい。
  • id属性の管理をする必要がない。
  • クリックできる範囲がfor属性を使った場合よりも広くなる場合がある。
  • 複数箇所にラベル付け対象の要素と関連付けられたlabel要素を記述することができない。

1つのlabel要素に複数のlabelable elementを割り当てる

どちらの関連付けの方法を使ったとしても、無理です
質問文にもある以下のコードは、ラベルと関連付けられていないlabelable elementlabel要素内にあるため、文法違反となります。

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

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SanaeYamazaki

2018/08/24 15:18

aria-labelledby属性を使おうと思います ありがとうございました
guest

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

yambejp

総合スコア114390

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SanaeYamazaki

2018/08/24 15:19

丁寧に答えて頂ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問