[新着] Webテンプレートを仮オープンしました
この指定を行うと、入力項目(フォームの部品)と項目名を関連付けることができます。
<label for="form1">お名前:</label>
<input type="text" name="name" size="30" id="form1">
| id="" | 任意の識別名を指定します |
|---|---|
| for="" | id="" と同じ識別名を指定します |
※識別名には、アルファベットで始まる半角英数字(一部の記号も使用可)で好きな名前を指定できます。
※識別名に使用できる記号は、ハイフン( - )、アンダーバー( _ )、コロン( : )、ピリオド( . )の4つです。
【使用方法】
通常のフォームでは、項目名(テキスト)の部分をクリックしても、その入力項目を選択したことにはなりません。
例えば次のラジオボタンの場合、丸の部分をクリックしないとその項目は選択できません。
labelタグで関連付けを行うと、項目名のクリックでその項目を選択できるようになります。
【指定方法】
まず、入力項目のタグに id="" を追加して、任意の識別名を指定します。
次に、項目名(テキスト)の部分をlabelタグで囲み、id="" と同じ識別名を for="" に指定します。
<input type="radio" name="test" value="はい" id="yes"> <label for="yes">はい</label>
同じ識別名を持った入力項目と項目名が、関連付けされることになります。
■別の指定方法
<label><input type="radio" name="test" value="はい"> はい</label>
上記の例のように、入力項目と項目名をlabelタグで囲むという指定方法もありますが、この方法はIEでは対応していません。
<form method="POST" action="example.cgi">
<p><label for="name">お名前:</label> <input type="text" name="name" size="40" id="name"></p>
<p>
質問:<input type="radio" name="q" value="はい" id="q1"> <label for="q1">はい</label>
<input type="radio" name="q" value="いいえ" id="q2"> <label for="q2">いいえ</label>
<input type="radio" name="q" value="どちらでもない" id="q3"> <label for="q3">どちらでもない</label>
</p>
<p>
<label for="msg">メッセージ:</label>
<br>
<textarea cols="50" rows="5" name="message" id="msg"></textarea>
</p>
<p><input type="submit" value="送信する"><input type="reset" value="リセット"></p>
</form>
▼これをブラウザで見ると次のように表示されます
※サンプルのため送信できません