(初回投稿日:2013年10月08日)<label>要素は、項目名(ラベル)とフォーム部品を関連づけて、ユーザに使いやすくするための要素です。フォームの部品になるわけでもなく、単独で使う事もありませんが、便利で大事な要素です。下の「お名前:」の部分をクリックしてください。入力欄がアクティブになります。<label>要素で囲んでいるので。項目名をクリックするだけで、部品をアクティブにできます。クリックできる面積が増えてとっても便利です。HTML5.1から無効になりました。<keygen><label>の入れ子は不可です。それから、1つの<label>で複数のフォーム部品を関連づけるのも不可。1つの<label>で関連づけられるラベルと部品は1セットのみですよ。2パターンではさっそく使っていきましょう。2パターンがあります。●サンプル11つめの方法は「for属性を使う」方法。id名を、for属性で呼び出して関連づけます。id="fullname">ちなみに、上のサンプルの<input>には「type属性」が無い。それでもテキストフィールドになってますね。type属性のデフォルトは「text」だから。省略すると、type="text"なので。項目名と部品を<label>〜</label>でごっそり囲んでワンセットにする方法。↓お名前:HTMLはこちら。シンプルで使いやすく、オススメです。name="name2"></label>「注釈」なども含める事ができます1つの部品に関する「注釈」などなら、項目名と同じく<label>内に入れられます。●サンプル3このサンプルには、入力フィールドの左に「Format:」として「注釈」をつけています。(<small>要素を使っています)1行目の「Format:」部分は、クリックすると入力部品が反応しますね。2行目の「Format:」は反応しません。これは、2行目の<small>が<label>で関連づけられていないから。Format:123-4567送信内容を確認:HTMLはこちら。title="3桁+ハイフン(-)+4桁で入力してください。次の「郵便番号」(7〜12行目)は、項目名のみ<label>要素のfor属性で部品と関連づけています(8行目)。注釈の<small>(ハイライト部分)は、部品との関連付けに漏れてしまったわけです。この<small>要素にid名を付けてもダメ。<label>のfor属性は複数指定不可です。以外」を関連づけるのは不可ってことになります。注釈なども含めたいなら、<label>〜</label>でごっそり囲むのがベスト。「ラジオボタン」と「チェックボックス」は部品が小さいので、項目名のテキストをクリックして反応するほうがゼッタイ便利。<label>と併用しよう。●サンプル4項目名のテキストをクリックしても、ラジオボタンやチェックボックスが反応します。その他サンプルでは、ラジオボタンには「for属性を使った方法」を、チェックボックスには「<label>要素で囲む方法」を使っています。/></form>●サンプル5<label>要素にCSSを指定する事によって、マウスオーバーで文字色や背景色を変化させて、ユーザビリティを上げることができます。(PCブラウザのみですが)これは、部品と項目名を<label>でごっそり囲む方法が適しています。下のサンプルにマウスオーバーしてみてください。その他HTMLはこちら。value="others">その他</label></p></form>CSSはこちら。<span>要素が使われていますね。これは、フォームの見た目を整えるために使っています。指定してレイアウトを整えます。<label>はあくまでも、フォームの部品をラベリングするための要素。その役目どおりに使って、なおかつCSSでも利用できるならOKですが。