Webサイト制作コースのお申し込みはこちら Webサイト制作コースのお申し込みはこちら

labelタグとは？

HTMLのlabel（ラベル）は、テキストボックスやラジオボタンなどのフォーム部品と、項目名を関連づけるHTMLタグです。

この記事では、HTMLで入力フォームを作る時に使う、label（ラベル）タグの使い方を解説します。

labelタグの構文

まずは、labelタグの構文を見ていきましょう。labelタグの使い方には次の2つの方法があり、それぞれ構文は以下の通りです。

for属性でフォーム部品のidを指定

1つ目は、labelタグのfor属性で、関連付けするフォーム部品のidを指定する方法です。

<label for="name_id">氏名:</label>
<input type="text" name="user_name" id="name_id" />

labelタグでフォーム部品を囲む

2つ目は、labelタグでフォーム部品を囲む方法です。

<label>
    <input type="checkbox" name="mail" />
    メルマガを希望する
</label>

labelタグの使い方

この章では、フォーム部品ごとに、labelタグの使い方について紹介します。

テキストボックス（input type=”textbox”）で使用

<p>
  <label form="form_id" for="textbox_id">テキストボックス：</label>
  <input type="text" id="textbox_id" name="textbox_name" />
</p>

チェックボックス（input type=”checkbox”）で使用

チェックボックスは、項目名とチェックボックスをlabelタグで囲む方法が、一般的によく用いられています。

<label>
  チェックボックス      
  <input type="checkbox" name="checkbox_name" />
</label>

ラジオボタン（input type=”radio”）で使用

ラジオボタンは、選択肢のボタンをそれぞれlabelタグで囲みます。

<p>
  <label>
    ラジオボタン１      
    <input type="radio" name="radio_name" />
  </label>
  <label>
    ラジオボタン２  
    <input type="radio" name="radio_name" />
  </label>
</p>

セレクトボックス（input type=”select”）で使用

<p>
  <label for="select_id">セレクトボックス</label>
  <select id="select_id" name="select_name">
    <option value="00"></option>
    <option value="01">北海道</option>
    <option value="02">青森県</option>
  </select>
</p>

2つの関連付け方法の違いと使い分け

ここまで、labelタグには、for属性を使用する方法と、labelタグでフォーム部品を囲む2つの方法があることを紹介しました。

以下は、2つの関連付け方法の違いをまとめたリストです。フォーム部品と関連付けるという意味では2つの方法とも同じですが、機能的に少し違いがあります。

for属性でフォーム部品のidを指定する方法

labelタグでフォーム部品を囲む方法

ポテパンダの一言メモ

昔は、labelタグで囲む方法は、古いブラウザで一部サポートされていませんでした。現在は、ほぼ全てブラウザがサポートしています。

labelタグの使用はWebアクセシビリティの基本

labelタグの使用は、WCAG 2.0のレベルA適合条件にもなっています。WCAG 2.0では、labelタグの使用について、以下のように述べられています。

コンテンツが利用者の入力を要求する場合は、ラベル又は説明文が提供されている。 (レベル A)

出典 : WCAG 2.0 解説書 「ラベル又は説明 達成基準 3.3.2 を理解する」

例えばチェックボックス部品では、labelを使用すると「チェックボックス」か「項目名」をクリックしても、チェックのON/OFFを切り替えられ、フォームの操作性が向上します。

html5で追加されたform属性

HTML5では、labelタグに新しくform属性が追加されました。

HTML4.01以前は、labelタグが所属するフォームは、自身のlabelタグを囲っている直接のformタグに所属することしか出来ませんでした。

HTML5ではform属性に、formタグのIDを指定することにより、親子関係にない、離れた場所にあるformタグにでも所属できるようになりました。

form属性の使い方

上の説明だけでは、ピンと来ないと思いますので、具体的なサンプルコードと共に使い方を見ていきましょう。

<body>
  <p>
    <label form="form_id" for="name_id">名前：</label>
    <input type="text" id="name_id" name="name" value="山田太郎" />
  </p>
  <p>
    <label form="form_id" for="mail_check_id">メルマガを希望する：</label>
    <input type="checkbox" id="mail_check_id" name="mail_check" value="ON" />
  </p>

  <form id="form_id" method="POST">
    <input type="submit" value="送信">
  </form>
</body>

▪️ formの送信結果

name：山田太郎
mail_check：ON

上記のように、form属性を指定することで、formタグと離れた場所にあるフォーム部品でも、送信（submit)時に、値を送信することができます。

ポテパンダの一言メモ

form属性は一部のブラウザで、利用できないため注意が必要です。2020年2月現在では、Firefoxのブラウザでは利用できません。それ以外のブラウザでは利用できます。

ブラウザの対応状況は、以下のリンクから確認できます。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/label

【関連記事】
▶# !DOCTYPEの宣言 – HTML5/HTML4/XHTMLで正しい指定方法

htmlのlabelタグを使用して、ユーザビリティを高めよう

htmlのlabelタグの使用方法を解説してきました。labelタグでフォーム部品と項目名を関連づけすることで、使いやすく、見やすいフォームを作成できます。

ECサイトなどでは、フォームの操作性がサイトの離脱率に直結する重要な要素です。ただ単純に入力項目を並べるだけでなく、入力に困らない見やすいフォームを作成することを目指しましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。