送信フォームは、企業サイトとユーザーの対話に欠かせないインターフェイスです。 ユーザーはフォームを利用して会員登録や問い合わせをサイト上で行えます。 送信フォームの作成には、「HTMLとサーバサイドのプログラムが必須ですが、今回はHTML部分を紹介していきます」。 本記事ではHTMLの初学者向けに、フォーム作成時に押さえておきたい5つの要素と属性を順番に紹介します。
フォームをノーコードでカンタンに作成したい場合はクライゼルのフォーム作成サービスをご検討ください。
HTML送信用フォームでできること
企業サイト上にHTMLで作られた送信用フォームが設置されていれば、ユーザーは企業に必要なデータを送れるようになります。 HTMLで作成可能なフォームには、顧客の疑問やクレームを受け付ける「お問い合わせフォーム」や「アンケートフォーム」、メールマガジンへの登録を受け付ける「会員登録フォーム」のほか、商品・サービスなどの「資料請求フォーム」などがあります。
基本的にはどのような用途のフォームでも、HTMLの設計次第で実現可能です。 また、フォームに設置した入力項目によっては、問い合わせをしてきたユーザーの所属情報や年齢、性別、住所などの情報も回答と合わせて収集できます。 これらの情報を分析することで、より効果的なウェブマーケティング施策を立案できるようになります。
form要素
<form>要素は、あらゆるHTMLフォームの先頭に必ず置かれます。 <form></form>で括った範囲に存在する<label>タグや<input>タグなど各種HTML要素をまとめあげ、フォームの動作を正式に定義する機能をもちます。
また、<form>要素にaction属性を設定することで、入力されたデータの送信先を指定することも可能です。action属性は<form>に続けて、<form action=” “>のように記載し、ダブルクオーテーションの中に値、つまり送信先のURLを入力して使用します。
また、このほかにも<form>タグには送信時のHTTPメソッドを指定するmethod属性、フォームの名前を指定するname属性なども存在します。HTMLの扱いに慣れてきたらこれらの属性も積極的に使用するとよいでしょう。
label要素
<label>要素は、フォームの入力項目横にラベル（項目や選択肢の表示名）を配置した際、ラベルと入力項目を関連付ける場合に使います。
後述の<input>要素を使えば、フォーム上にテキストボックスやラジオボタンを表示できますが、項目名がなければユーザーは何を入力すればよいのか分かりません。
そこで<label>タグを使用し、ボックスやボタン横に「氏名」、「性別」、「住所」、「ご質問内容」などのラベル（項目名）を付ければ、ユーザーに適切な操作を指示することができます。 ラベルとフォーム入力項目を関連つけるには、<label>のfor属性を用いて、のように使用します。
このとき、for属性の値を<input>タグ内のid属性の値と一致させることで、フォーム部品とラベル名を互いに関連付けることができます。
なお、for属性を使わずに<label> </label>で括った範囲内にフォーム部品を含めるという方法も存在します。どちらの方法を選んでも、フォームの見た目に影響は生じません。
input要素
フォーム上でのデータ入力、編集を可能にするフォーム部品を設置するのが<input>要素です。 送信フォームで頻繁に見かける名前や住所の記入欄などは、全て<input>要素で作成されています。
<input>要素に属性を設定し、その値を変化させれば、様々な形態のデータフォームが作れるようになります。 たとえばtype属性の値に「text」を設定し、<input type=”text”>と記述した場合、1行タイプのテキストデータを取得する、いわゆるテキストボックスが設置可能です。
このほかにも、「submit」を設定すればデータの送信ボタンが、「radio」を使えば複数の選択肢から一つを選ぶラジオボタンが、「checkbox」を使えば複数回答が可能になるチェックボックスがそれぞれ設置できます。
また、「email」を設定すれば入力データをメールアドレスとして処理することが、「password」を使えばユーザーの入力した文字や数値を、フォーム上で伏せて表示することがそれぞれ可能です。
button要素
メッセージを表示させるボタンや次のページへ遷移するボタンなど、様々な機能をもつボタンを作りたい場合には</button>要素を使用します。
</button>要素内にあるtype属性の値次第で様々なボタンが作成可能です。 値が「submit」ならば送信ボタン、「reset」はリセットボタン、「button」は汎用ボタン、「menu」はメニューボタンがそれぞれ作成できます。
なお、</button>タグを用いて作成したボタンは、デフォルト状態ではボタンの機能を説明するテキストが表示されません。 そのため、テキストを表示するためには、</button>要素でテキストの説明文を括る必要があります。
<input>要素でもボタンは作成可能ですが、</button>要素を使えばより自由度の高いボタン設計が実現できます。
require属性
フォーム上の特定の項目を必須入力に設定する場合には、required 属性を使います。 required属性を設定すると、ユーザーが空欄のままフォームの送信ボタンを押した場合、送信をキャンセルし、代わりに該当項目への記入を促すエラーメッセージを表示します。
必須項目を無視してフォームを送信できなくなるので、ユーザーによる情報の記入漏れを防止できます。 使用方法は簡単で、必須化したいフォーム部品に「required」を追加するだけです。
たとえば、特定のテキストボックスの入力を必須化する場合には、<input type=”text” required>と記述します。
それではここまで紹介したHTMLの要素・属性を使い、実際に送信フォームを作成してみましょう。
「氏名」、「メールアドレス」、「メッセージ」の各項目への入力を必須化し、下部に送信ボタンを設置したお問い合わせフォームを作成してください。 サンプルソースは以下の通りです。
なお、ソース中の<form>タグ以前に登場する各タグは、いずれも重要なものですが、本記事では説明を省略します。
---------------------（サンプル開始）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<div>
<label for="text">氏名： </label>
<input type="text" id="text" name="fullname" required>
</div>
<div>
<label for="mail">メールアドレス： </label>
<input type="email" id="mail" name="mailaddress" required>
</div>
<div>
性別：
<label for="male">男</label>
<input type="radio" name =”gender” id="male" value="男">
<label for="female">女</label>
<input type="radio" name=”gender” id="female" value="女">
</div>
<div>
<input type="submit" value="送信">
</div>
</form>
</body>
</html>
---------------------（サンプル終了）フォーム自作のメリットとデメリットとは？
以上のように、基礎的なHTMLの知識さえあれば送信フォームは自作可能です。 自作すればフォーム制作の初期費用がほとんどかかりませんし、自分の思い描くフォームデザインを実現しやすいというメリットがあります。
高度なHTMLの知識やCSSの技術を習得するにつれて、リッチなデザインのフォームも作成可能になるでしょう。 ただし、フォームの作成作業には多大な手間がかかります。また、当然ですがデザインも非常にシンプルで無骨な外観になりがちです。
少しでも凝ったデザインや洗練されたデザインを追求するためカスタマイズしようとすると、HTML以外の知識も要求されます。
送信フォーム作成についてまとめ
本記事で紹介したHTMLの要素や属性をしっかりと学習すれば、送信フォームを自力で作成することは可能です。 一方で、残念ながら初歩的なHTMLの知識だけでは、必要最小限の機能を備えたフォームしか作れないことも事実です。
高機能かつ洗練されたデザインのフォームを作成したいという場合には、豊富な作成機能と自由度の高いデザインを可能にする「クライゼル」のようなフォーム作成ツールのご使用をおすすめいたします。
