Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームHTMLリファレンス(アルファベット検索)><label>タグ

HTMLタグ辞典
タグ一覧(ABC順) 目的別タグ一覧 スタイルシート一覧(ABC順) 目的別スタイルシート一覧

<label>…フォームの項目(部品)とラベルの関連付けをする

使用タグ

HTMLタグ

<label 属性="属性値">〜</label>

開始タグと
終了タグ

両方必須

内容となる
要素

インライン要素、テキスト
(label 要素を除く)

対応ブラウザ IE6 WinFireFox WinSafariFireFox MacIE5 macOpera

解説

<label>タグインライン要素でこれを使うと、フォームの項目(部品)とラベルを関連付けることができます。ページ上でラベルをクリックしたときや、アクセスキーを押したとき、入力項目をクリックした場合と同じような動作をします。
フォームの項目(部品)とラベルを関連付けるには、2通りの指定方法があります。ひとつは、label 要素の for 属性にフォームの項目のID名(input 要素にID名を指定しておく)を指定するという方法があり、もうひとつの方法は、<label>〜</label>内にフォームの項目を記述する方法です。この方法は、Internet Explorer 6 には対応していないようですので、現時点では label 要素の for 属性を用いた方が良いでしょう。

属性と働き

属性 働き 指定できる値
for="ID名" フォームの項目(input 要素textarea 要素select 要素)と項目名を関連付けすることができます input 要素などにID名を指定しておき、その指定した値を記述する

使用例

記述例
<form action="sample.cgi" method="post">
<fieldset>
<legend>ユーザー情報</legend>
<label for="id1" accesskey="p"> ID:</label><input type="text" name="id" size="10" id="id1">
<label for="pass" accesskey="p">パスワード:</label><input type="text" name="password" size="20" id="pass">
</fieldset>
<fieldset>
<legend>評価</legend>
<input type="radio" name="hyouka" checked="checked" id="kannsou1"><label for="kansou1" accesskey="g">上出来</label><br>
<input type="radio" name="hyouka" id="kannsou2"><label for="kansou2" accesskey="n">ふつう</label><br>
<input type="radio" name="hyouka" id="kannsou3"><label for="kansou3" accesskey="b">よくないと思う</label><br><br>
</fieldset>
<input type="submit" value="送信">
</form>
↓
[ブラウザでの表示例]
 ブラウザ
ユーザー情報
評価



関連情報ページ

ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

logo
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system