表形式のお問い合わせフォームを作ってみよう

Contact Form 7でフォームを作成する際に、「複数のフォームコントロールが単一のlabel要素内に置かれています」というエラーメッセージに悩まされたり、フォームを表形式で作ろうとしたときにlabel要素がうまく使えなかったり、という経験はありませんか？

label要素は、アクセシビリティやユーザビリティを向上させるために重要な役割を果たします。でも、その目的や使い方が理解できていないと、エラーが出たり、使いどころを逃したりしてしまいます。

この記事では、label要素の基礎知識から、実践的な使い方までを解説します。ユーザーにとって分かりやすく使いやすいフォームを作成できるよう、一緒にレベルアップしていきましょう！

label要素とは

その名の通り、フォームの入力フィールドにラベルを付けるための要素です。ユーザーに対して入力フィールドが何のためのものかを説明します。

label要素をフォーム要素と関連付ける

label要素とフォーム要素を関連付けることには、次のようなメリットがあります。

誤入力の防止：ユーザーが入力すべき内容を明確に示すことで、入力ミスを防ぐ
ユーザビリティの向上：ラベルをクリックすると入力欄にフォーカスが移るため、操作がしやすくなる
アクセシビリティの向上：スクリーンリーダーやがラベルを読み上げることで入力内容を理解しやすくなり、音声入力を利用するユーザーもラベルを使って入力欄をアクティブ化できる

関連付けには２つの方法があります。

方法１：label要素でフォーム要素を囲む

<!-- 一般的なHTML -->
<label>
  氏名
  <input type="text" name="username">
</label>

<!-- Contact Form 7 -->
<label>
  氏名
  [text* username]
</label>

方法２：for属性とid属性を使用する

label要素にfor属性を設定する
フォーム要素にid属性を設定する
for属性とid属性の値を一致させる

<!-- 一般的なHTML -->
<label for="username">氏名</label>
<input type="text" id="username" name="username">

<!-- Contact Form 7 -->
<label for="username">氏名</label>
[text* username id:username]

fieldset要素とlegend要素

Contact Form 7でフォームを作成する場合、誤ったラベル付けによって「複数のフォームコントロールが単一のlabel要素内に置かれています」というエラーメッセージが表示されることがあります。

フォームコントロールとは、input要素、textarea要素、select要素などのフォーム要素のことです。

このエラーを解消するには、以下の2つの方法があります。

方法１：label要素を削除する

Your Country
[checkbox your-country use_label_element "China" "India" "San Marino"]

方法２：fieldset要素とlegend要素を使用する

fieldset要素：関連するフォームコントロールをグループ化し、関連付ける
legend要素：fieldset要素の子要素として使用し、そのフィールドセットの内容を説明する見出しまたはキャプションを定義する

<fieldset>
    <legend>Your Country</legend>
    [checkbox your-country use_label_element "China" "India" "San Marino"]
</fieldset>

Contact Form 7のフォームタグを使用していると、「複数のフォームコントロール」がどのように配置されているのかを直感的に把握しにくいと思います。これは、HTMLに変換されたコードを見ると理解できます。HTMLコードを確認して、フォームの構造を把握してみましょう。

<!-- エラーが出るコードの例 -->
<p>
    <label>Your Country<br>
        <span class="wpcf7-form-control-wrap" data-name="your-country">
            <span class="wpcf7-form-control wpcf7-checkbox">
                <span class="wpcf7-list-item first">
                    <label>
                        <input type="checkbox" name="your-country[]" value="China">
                        <span class="wpcf7-list-item-label">China</span>
                    </label>
                </span>
                <span class="wpcf7-list-item">
                    <label>
                        <input type="checkbox" name="your-country[]" value="India">
                        <span class="wpcf7-list-item-label">India</span>
                    </label>
                </span>
                <span class="wpcf7-list-item last">
                    <label>
                        <input type="checkbox" name="your-country[]" value="San Marino">
                        <span class="wpcf7-list-item-label">San Marino</span>
                    </label>
                </span>
            </span>
        </span>
    </label>
</p>

参考情報

もっと詳しく知りたい方は、以下の記事をご確認ください。

フォームに関する知識をより深めたい方は、MDNのウェブ開発を学ぶのウェブフォーム — ユーザーデータを扱うから始めみてはいかがでしょうか。