サイト内検索
...HTML・XHTMLタグ...
フォーム
入力項目と項目名
- 入力項目と項目名を関連付けるには、label要素を、指定します。
- [使い方]
- <label for="form1">お名前:</label>
- <input type="text" name="name" size="30" id="sample1">
属性 | 属性値 | 説明 |
---|---|---|
id= | "" | 「"sample"」のように任意の識別名を指定します。 |
for= | "" | id=""と同じ識別名を指定します。 |
- 識別名には、
- アルファベットで始まる半角英数字を使って、自由に名前の指定をします。
- 識別名に使用できる記号は、
- ハイフン「-」アンダーバー「_」コロン「:」ピリオド「.」です。
- label要素で関連付けを行うと、
- 項目名のクリックでその項目を選択できるようになります
- [指定方法]
- 入力項目のタグに、id=""を追加して、任意の識別名を指定します。
- 次に、項目名(テキスト)の部分をlabelタグで囲み、
- id=""と同じ識別名を for=""に指定します。
- 例えば
- <input type="radio" name="sample" value="はい" id="yes">
- <label for="yes">はい</label>
- 同じ識別名を持った入力項目と項目名が、関連付けされます。
サンプル
[bodyの中]
<form method="post" action="sample.cgi"><div class="sample">
<label for="name">お名前:</label>
<input type="text" name="name" size="40" id="name">
性別:
<input type="radio" name="s" value="女性" id="s1"><labelfor="q1">女性</label>
<input type="radio" name="s" value="男性" id="s2">
<labelfor="q2">男性</label>
<label for="msg">コメント欄:</label>
<textarea cols="40" rows="4" name="message" id="msg"></textarea><input type="submit" value="送信する">
<input type="reset" value="リセット">
</div>
</form>
[ブラウザ上]