html - チェックボックス: テキストを表示するには?

Question

チェックボックスの関連テキストを一緒に表示したい。

<input id="Checkbox1" type="checkbox" value="Admin"><span>Admin User</span>

これは、そのために最もよく使用されるマークアップです。spanしかし、チェックボックスに別のものを使用するのは気分が悪いです。そして、それは形でさえよく見えません。

この2つを関連付ける方法はありますか？または、これを行うための最良の方法は何ですか?

Answer 1

aLabelおよびfor属性を使用します。

for 属性は、ラベルがバインドされるフォーム要素を指定します

<input id="Checkbox1" name="Checkbox1" type="checkbox" value="Admin" />
<label for="Checkbox1">AdminUser</label>

また、あなたの入力を与えますname

Answer 2

属性を使用する代わりにfor、ネストされた を使用できます<input type="checkbox">:

<label><input name="Checkbox1" type="checkbox">Admin User</label>

Answer 3

を使用する代わりに、 -tag<span>を使用できます。<label>

<label for="Checkbox1">Admin User</label>

ラベルをクリックすると、ユーザーがチェックボックスをクリックしたかのように、ラベルをチェックボックスに「添付」します。

スタイリングについては、独自のスタイルを適用して、自分で「一緒に」見えるようにする必要があります。