📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| 200行目: | 200行目: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<input type="text" autofocus> | <input type="text" autofocus> | ||
</syntaxhighlight> | |||
<br><br> | |||
== ラベル == | |||
==== for属性 ==== | |||
for属性は、labelタグとフォームコントロール (input、select、textarea等) を関連付けるために使用する属性である。<br> | |||
<br> | |||
<u>for属性の値は、関連付けるフォームコントロールのid属性と一致させる必要がある。(大文字・小文字も区別される)</u><br> | |||
<br> | |||
ラベルを押下する時、関連付けられたフォームコントロールにフォーカスが移動する。<br> | |||
<br> | |||
<u>for属性は、<label>タグ専用の属性であり、他のHTML要素では使用できない。</u><br> | |||
<br> | |||
<u>※注意</u><br> | |||
<u>同じページ内で同じid値を複数使用してはいけない。</u><br> | |||
<br> | |||
for属性を使用するメリットは、スクリーンリーダーでの読み上げが適切になり、クリック / タップ可能な領域が広がることである。<br> | |||
<br> | |||
<syntaxhighlight lang="html"> | |||
<!-- 基本 --> | |||
<label for="username">ユーザ名:</label> | |||
<input type="text" id="username"> | |||
<!-- チェックボックス --> | |||
<label for="agree">利用規約に同意する</label> | |||
<input type="checkbox" id="agree"> | |||
<!-- ラジオボタン --> | |||
<label for="male">男性</label> | |||
<input type="radio" id="male" name="gender"> | |||
<label for="female">女性</label> | |||
<input type="radio" id="female" name="gender"> | |||
<!-- テキストエリア --> | |||
<label for="comment">コメント:</label> | |||
<textarea id="comment"></textarea> | |||
<!-- プルダウン (セレクトボックス) --> | |||
<label for="country">国:</label> | |||
<select id="country"> | |||
<option value="jp">韓国</option> | |||
<option value="jp">中国</option> | |||
<option value="us">アメリカ</option> | |||
</select> | |||
</syntaxhighlight> | |||
<br> | |||
また、for属性を使用せずに、<label>タグの中にフォームコントロールを直接入れることもできる。<br> | |||
<syntaxhighlight lang="html"> | |||
<!-- ネストした記法 --> | |||
<label> | |||
ユーザ名: | |||
<input type="text"> | |||
</label> | |||
<!-- チェックボックス --> | |||
<label> | |||
<input type="checkbox"> | |||
利用規約に同意する | |||
</label> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
<br><br> | <br><br> | ||