1. ホーム
  2. html

[解決済み] label要素の中にinput要素を入れるべきですか?

2022-03-14 15:41:39

質問

のネストに関するベストプラクティスはありますか? labelinput HTML要素?

古典的な方法です。

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

または

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>

解決方法は?

W3'sより HTML4仕様 :

ラベル自体は、前、後、または周囲に配置することができます。 関連するコントロール


<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

または

<input type="text" id="lastname" />
<label for="lastname">Last Name</label>

または

<label>
   <input type="text" name="lastname" />
   Last Name
</label>

なお、3つ目のテクニックは、テーブルをレイアウトする際に、ラベルをあるセルに、関連するフォームフィールドを別のセルに配置する場合には使用できません。

どちらか一方でも有効です。私は1つ目か2つ目の例を使うのが好きです。その方がよりスタイルをコントロールできるからです。