入力項目と項目名を関連付ける

[新着] Webテンプレートを仮オープンしました


<label>

ブラウザ
Internet Explorer Netscape6 Firefox Opera7
タイプ
インライン要素

この指定を行うと、入力項目(フォームの部品)と項目名を関連付けることができます。


<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>

これをブラウザで見ると次のように表示されます

質問:    


※サンプルのため送信できません



[特集] レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版