HTMLのlabelの使ってフォーム操作性を向上! HTML5追加されたform属性も紹介
  • facebookページ
  • twitterページ
  • 2020.02.19

    HTMLのlabelの使ってフォーム操作性を向上! HTML5追加されたform属性も紹介

    labelタグとは?

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

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

    labelタグの構文

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

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

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

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

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

    labelタグの使い方

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

    テキストボックス(input type=”textbox”)で使用

    チェックボックス(input type=”checkbox”)で使用

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

    ラジオボタン(input type=”radio”)で使用

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

    セレクトボックス(input type=”select”)で使用

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

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

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

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

    • 1つのフォーム部品に対し、複数のlabelタグを指定できる。
    • id属性は、html文書内でユニークである必要があり、被らないように注意が必要

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

    • labelタグに項目名と、フォーム部品が内包されるため分かりやすい。
    • 1つのフォーム部品に、複数のlabelタグを指定できない。
    • labelタグをCSSで装飾すると、項目名とフォーム部品までもが装飾される。
    ポテパンダの一言メモ

    昔は、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属性の使い方

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

    ▪️ formの送信結果

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



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE