label要素

TOPページに戻る > html入門

label要素

入力項目にラベルを作る要素です
ラベルはテキストで表示され、入力項目の説明をつけることができます
入力項目と関連付けたラベル(文字)をクリックすると入力項目にフォーカスがあたり、選択された入力状態になります

使い方（書式）

<label></label>

label要素

対応ブラウザ
要素の種類	インライン要素
内容となる要素	インライン要素、テキスト

属性	説明
for属性	入力項目のID名を指定します。指定された入力項目とlabel要素は関連付けされます 入力項目には共通属性のid属性でid名を指定しておきます
共通属性	html共通属性
イベント属性	htmlイベント属性

実際の指定方法

html

<form action="mail.cgi" method="post">
<table cellpadding="5">
 <tr>
 <td colspan="2">
 連絡先メールフォーム
 </td>
 </tr>
 <tr>
 <td>
 <label for="hoge">メールの件名</label>
 </td>
 <td>
   <input type="text" name="f1" value="" size="30" id="hoge">
 </td>
 </tr>
 <tr>
 <td><label for="hoge2">※メッセージ</label></td>
 <td>
   <textarea name="f5" cols="50" rows="6" id="hoge2"></textarea>
 </td>
 </tr>
 <tr>
 <td colspan="2">
 <input type="submit" value="内容確認画面へ"> 
 <input type="reset" value="リセット"> 
 </td>
 </tr>
</table>
</form>

実際の表示

※サンプルのためフォームのみでcgiは動きません

連絡先メールフォーム
メールの件名
※メッセージ

その他のデザインはcssでスタイルを指定