フォーム

フォームとは、WebサイトやWebアプリで、情報を入力・選択し、送信するためのユーザーインターフェースです。Webフォーム、入力フォームとも呼び、問い合わせや登録などに使います。

ここでは、利用者が情報を渡すための入力画面や操作を指します。HTMLの特定の要素だけを意味する用語としては扱いません。

主な用途は、利用者が入力した情報を受け取り、登録・申し込み・問い合わせなどにつなげることです。W3C WAIのチュートリアルも、ログイン、登録、コメント、購入などを利用例に挙げています。[1]

• 問い合わせ：相談内容や返信先を伝える。
• 会員登録：利用を始めるための情報を入力する。
• 申し込み・注文：希望する内容や必要な条件を選ぶ。
• アンケート：質問への回答や意見を送る。

これらは用途の例です。入力項目の種類や必要な情報は目的によって変わり、問い合わせ用の画面がすべての入力UIを代表するわけではありません。

構成を考えるときは、入力する場所だけでなく、その意味を示す案内と、操作後の結果までを含めて捉えます。見た目の枠だけでは、何を入力し、何が起きたかを説明しきれません。

入力項目とラベル

ラベルは、入力欄や選択肢が何を求めているかを示すものです。W3C WAIのチュートリアルは、ラベルなどを使って各コントロールを識別できるようにすることを説明しています。[1]

たとえば、メールアドレスの入力欄なら「メールアドレス」という名前が、何を入力する欄かを伝えます。追加の説明を添えるなら、入力が必要な形式や、何のために使う項目かなど、目的に合う内容を示します。

送信・エラー表示の基本

操作の結果は、入力を受け付けたのか、修正が必要なのかが分かるように示します。W3C WAIは、完了の通知やエラーの通知、間違いを直すための案内を扱っています。[1]

たとえば、未入力の項目があるなら、どの項目を修正すればよいかを伝える形が考えられます。確認画面と完了画面を別々に用意すること自体が、この仕組みの定義ではありません。

HTMLの<form>は、入力・送信の仕組みを記述するための要素です。MDN Web Docsは、Webサーバーへ情報を送る対話型コントロールを含む、文書内の区間として説明しています。[2]

画面や操作を含む概念としての入力UIと、HTMLでそれを記述する要素は、説明する範囲が異なります。「情報を入力する場所の意味を知りたい」のか、「HTML要素の仕様を知りたい」のかを分けて考えます。

Contact Form 7は、WordPress向けのコンタクトフォーム用プラグインです。公式の利用ガイドでも、その用途の製品として紹介されています。[3]

一般的な入力UIが対象そのものを指すのに対し、Contact Form 7はそれを作るための具体的な製品です。EFOは入力や完了までの流れを改善する取り組みを指し、作成する道具と、改善する活動という関係で整理できます。