はじめに
この記事は「お問い合わせフォームを作ってみよう」チュートリアルの一部であり、このチュートリアルの【基本編】として書かれています。
この記事では、ウェブフォームの概念や利用されるシーン、HTMLでマークアップを行う上での基本構造、ウェブフォームで使用される基本的なHTML要素について解説します。
この記事の対象者
- ウェブ制作初心者の方
- ウェブフォームの基本を知りたい方
- 基本的なフォーム部品について知りたい方
この記事で学べること
- ウェブフォームの基本概念
- ウェブフォームのHTMLの基本構造
- ウェブフォームで使用される基本的なHTML要素
ウェブフォームについて
ウェブサイトは通常、何らかの目的を持って制作されます。ウェブフォームはウェブサイトの目的において重要な役割を担い、ウェブフォームの設計はユーザーエクスペリエンスやウェブサイトの成功に大きく関わります。
ウェブフォームの目的
ウェブサイトの目的の他に、ウェブフォームそのものも目的があって実装されます。
ウェブフォームは、ユーザーからのフィードバック、質問、要望、登録情報などを収集するために使用されます。具体的には以下のような目的を持って利用されます。
情報収集：
ウェブフォームは、ウェブサイトを利用してユーザーから情報を収集するための一般的な手段です。
お問い合わせフォームや登録フォーム、資料請求フォームなど、ウェブフォームを介してユーザーはサービスを利用するための必要な情報を提供することができます。
顧客対応：
ウェブフォームを通じてユーザーからの質問やコメントに対応できます。
ウェブサイトのオーナーとユーザーとのコミュニケーションを確立し、ユーザーの要望に応えることができます。
分析：
ウェブフォームによって収集されたデータは、ビジネスの意思決定や市場調査に利用することができます。
アンケートや登録フォームなどを設置することで、ユーザーの好みや要望を理解し、サービスの改善に役立つ情報を収集できます。
オンライン取引：
ウェブフォームはオンラインでの注文、支払い、予約など、ウェブサイトで収益を得るために利用することができます。
ウェブフォームを設置することには多くのメリットがあるため、大規模なサイトはもちろん、LP（ランディングページ）のような1ページ構成のウェブサイトでも設置されることが多いです。
ウェブフォームの種類
ウェブフォームは目的や用途に応じて以下のような種類があります。
お問い合わせフォーム：
ウェブサイトのユーザーが質問やコメント、提案などを送信できるフォームです。
一般的な入力項目として、ユーザーの名前やメールアドレス、件名、メッセージフィールドなどを持ちます。
ユーザー登録フォーム：
サービスを利用するためにアカウントを作成するためのフォームです。
ユーザー名やパスワード、メールアドレス、プロフィール情報などの入力項目を持ちます。
ログインフォーム：
ユーザーがアカウントにアクセスするためのフォームです。
ユーザー名またはメールアドレス、パスワードの入力項目を持ちます。
商品注文フォーム：
ECサイトで商品を購入する際に利用されるフォームです。
商品の選択、配送情報、支払い情報などを収集します。
アンケートフォーム：
市場調査などを目的に、ユーザーから意見や情報を収集するためのフォームです。
収集したい情報に応じてさまざまな入力や選択項目を持ちます。
予約フォーム：
ユーザーが予約を申し込むためのフォームです。
ホテルや飲食店、イベントなどで利用され、予約情報や人数、連絡先の情報を収集します。
これらはウェブフォームの主な種類の一部ですが、ウェブサイトの目的に応じてさまざまなフォームを作成できます。
ウェブフォームの実装に必要なスキル
ウェブフォームの実装には基本的なウェブ開発のスキルが必要であり、HTML、CSS、JavaScriptなどのフロントエンドのスキル以外にも、PHPなどのサーバーサイドに関するスキルや、セキュリティに関する知識が求められます。
チーム開発であればフロントエンドとサーバーサイドに担当を分けることができますが、個人開発では全て自分で実装しなければなりません。
高度な知識がなくても、WordPressなどのCMSや外部サービスを利用することでウェブフォームを設置することはできます。しかし、いずれにしてもHTMLでのマークアップの知識は最低限必要となります。
ウェブフォームの基本概念について説明しました。続いて、ウェブフォームをHTMLでマークアップする上での基本構造について説明します。
ウェブフォームの基本構造
ウェブフォームをHTMLで作成するには、 form 要素を使用します。以下は、 form 要素の基本構造です。
<form action="送信先のURL" method="HTTPメソッド">
<!-- フォーム部品をここに追加 -->
</form>form 要素は一般的に二つの属性を設定します。
action属性：入力されたフォームのデータを送信する先のURLを指定します。method属性：データを送信するHTTPメソッド（GETまたはPOST）を指定します。
form 要素の内部には、テキストなどの入力欄や、ラジオボタン、チェックボックス、送信ボタンなどのユーザーがデータを入力するためのフォーム部品を配置します。また、 form 要素はフローコンテンツなので基本的にはほとんどの要素を含めることができますが、 form 要素内に form 要素を含むことはできません。
基本的なフォーム部品
基本的なフォーム部品として、以下のようなものが挙げられます。
- テキスト入力に関するもの
- 単一行のテキスト入力欄
- メールアドレス入力欄
- パスワード入力欄
- 複数行のテキスト入力欄
- 項目の選択に関するもの
- ラジオボタン
- チェックボックス
- プルダウンメニュー
- 送信ボタンとリセットボタン
上記のフォーム部品を定義する際のHTML要素とマークアップの方法について解説します。まずはテキスト入力欄です。
テキスト入力欄
テキスト入力欄は、ユーザーがテキスト情報をフォームに入力するための基本的なフォーム要素です。これを使用して、名前やメールアドレス、パスワード、お問い合わせの具体的な内容などを収集することができます。
単一行のテキスト入力欄
単一行のテキスト入力欄を設置するには input 要素を使用します。以下は、基本的な単一行のテキスト入力欄の例です。
<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username">input 要素に「 type=”text” 」と指定をすることで単一行のテキスト入力欄を定義することができます。
以下のように表示されます。
フォーム部品には id 属性や name 属性の指定も行います。 name 属性はサーバー側でフォーム部品の識別を行うために使用されます。
<input type="text" id="username" name="username">フォーム部品には、アクセシビリティの観点から label 要素を使用することが推奨されます。
<label for="username">ユーザー名：</label>label 要素にはそのフォーム部品に入力すべき内容をユーザーに伝える役割を果たします。フォーム部品の見出しととらえると理解しやすいかと思います。
label 要素の for 属性に対し、対応するフォーム部品の id 属性の値を指定することで紐付けを行います。
label の for 属性の値：username
input の id 属性の値：username
ちなみに、 input 要素には value 属性を記述することで規定値を定義することができます。
<input type="text" value="規定値を設定できます。">
メールアドレス入力欄
メールアドレスの入力欄も単一行のテキストと同様に input 要素を使用します。
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">input 要素に「 type=”email” 」と指定することで、メールアドレス入力欄を定義できます。
見た目は単一行のテキスト入力欄と変わりませんが、スマホで操作する場合に最初に表示されるキーボードが英字になるなど、機能が大きく異なります。
ウェブフォームの実装では、お問い合わせがあった際に回答を送るなど、ウェブフォームを利用したユーザーに対して返信が必要になることが多いです。
メールアドレスはその返信先を示すものとして、入力が必須になっている場合があります。 required 属性を指定することで入力必須にすることができます。
<input type="email" id="email" name="email" required>パスワード入力欄
パスワードの入力欄も単一行のテキストと同様に input 要素を使用します。パスワード入力欄に入力されたテキストは通常隠され、セキュリティが高められています。
以下は、基本的なパスワード入力のHTMLコードです。
<label for="password">パスワード:</label>
<input type="password" id="password" name="password">input 要素に「 type=”password” 」と指定することで、パスワード入力欄を定義することができます。
パスワード入力欄は入力値が見えないようになっていますが、値を暗号化するといったセキュリティ対策としての機能はありません。
以下はパスワード入力欄に「 abcd 」と入力し、開発ツールのコンソールで alert(document.getElementById(‘password’).value); を実行した結果です。
複数行のテキスト入力欄
単一行のテキストやメールアドレス、パスワード入力欄では input 要素の type 属性で選択していましたが、複数行のテキスト入力欄には textarea 要素を使用します。
textarea 要素は、コメントやフィードバック、お問い合わせの内容など、長いテキストを収集するために使用されます。以下は、基本的な textarea 要素の記述例です。
<label for="comments">コメント:</label>
<textarea id="comments" name="comments"></textarea>以下のように表示されます。
input 要素との違いとして、 textarea 要素は終了タグ（ </textarea> ）が必要になります。
textarea 内に文章を記述することで、入力欄の規定値を定義することができます。
<textarea id="comments" name="comments">規定値を設定できます。</textarea>
また、 rows 属性と cols 属性を指定することでテキスト入力欄の文字数を定義できます。
rows 属性は入力欄の行数を定義し、 cols 属性は行内での文字数を定義します。これにより、入力欄の大きさをを文字数や行数を基準に調整できます。
<textarea id="comments" name="comments" rows="4" cols="50">規定値を設定できます。</textarea>
テキスト入力欄に使用されるHTML要素についてご紹介しました。これらのフォーム部品を使用することで、ユーザーからのテキスト情報を収集し、ウェブアプリケーションやサービスに活用できます。
続いて、項目の選択について解説します。
項目の選択
ウェブフォームを使用してユーザーからの情報を収集する際、全ての項目をテキストとして手入力させることはユーザーに負担を掛けることになり、アクセシビリティやユーザーエクスペリエンス的に良くありません。
ラジオボタンやチェックボックス、ドロップダウンリストなどを活用することで、ユーザーの負担を軽減することができます。これらのフォーム部品をHTMLでマークアップする方法について解説します。
ラジオボタン
ラジオボタンは、ユーザーが複数の選択肢から1つだけを選ぶためのフォーム要素です。性別、支払い方法、利用規約の承諾などの質問に使用されます。
以下は、ラジオボタンのマークアップの記述例です。
<fieldset>
<legend>性別:</legend>
<input type="radio" id="male" name="gender" value="male"><label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female"><label for="female">女性</label>
</fieldset>以下のように表示されます。
ラジオボタンは、 input 要素に「 type=”radio” 」を指定することで設置できます。 label 要素は1つのラジオボタンに対して1つ必要になります。
<input type="radio" id="male"><label for="male">男性</label>
<input type="radio" id="female"><label for="female">女性</label>ラジオボタンを設置する際、アクセシビリティの観点から fieldset 要素と legend 要素を使用することが望ましいです。
fieldset 要素はラジオボタンをグループ化し、 legend 要素はグループの見出しとしての役割を果たします。 fieldset 要素内には必ず legend 要素が必要なので注意しましょう。
<fieldset>
<legend>グループのラベル</legend>
<!-- ラジオボタンのグループ -->
</fieldset>同じグループのラジオボタンには同じ name 属性の値を指定します。また。各ラジオボタンには、それぞれが選択されたときにサーバーに送信する値を value 属性に記述します。
<input type="radio" id="male" name="gender" value="male"><label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female"><label for="female">女性</label>チェックボックス
チェックボックスは、ユーザーが複数の選択肢から複数を選ぶためのフォーム部品です。ニュースレターの購読、興味のあるトピックの選択などに使用されます。
以下は、基本的なチェックボックスのHTMLコードです。
<fieldset>
<legend>学習中の言語</legend>
<input type="checkbox" id="html" name="learning" value="html" checked><label for="html">HTML</label>
<input type="checkbox" id="css" name="learning" value="css"><label for="css">CSS</label>
<input type="checkbox" id="javascript" name="learning" value="javascript"><label for="javascript">JavaScript</label>
<input type="checkbox" id="php" name="learning" value="php"><label for="php">PHP</label>
</fieldset>以下のように表示されます。
input 要素に「 type=”checkbox” 」と指定することでチェックボックスを設置することができます。それ以外はラジオボタンと同じ構造です。
また、 checked 属性を指定することで初期の状態を設定できます。上記の例では「 HTML 」のチェックボックスをデフォルトでチェックが入った状態にしています。
<input type="checkbox" id="html" name="learning" value="html" checked>
<label for="html">HTML</label>ちなみに、 checked 属性はラジオボタンにも指定することができます。
ドロップダウンリスト
ドロップダウンリストは、ユーザーがリストから1つを選択するためのプルダウンメニューを提供します。これは、国の選択、都市の選択、カテゴリの選択などに使用されます。
以下は、基本的なドロップダウンリストのHTMLコードです。
<label for="country">国を選択:</label>
<select id="country" name="country">
<option value="usa">アメリカ</option>
<option value="canada">カナダ</option>
<option value="uk">イギリス</option>
<option value="jp" selected>日本</option>
</select>以下のように表示されます。
ドロップダウンリストは、 select 要素内に option 要素を記述することで定義できます。
select 要素には label 要素と紐付けるための id 属性と、サーバー側で識別するための name 属性を記述します。
<label for="country">国を選択:</label>
<select id="country" name="country">
<!-- ドロップダウンリストの項目 -->
</select>option 要素はドロップダウンリストの項目を定義します。 option 要素内のテキスト内容が表示されますが、サーバーなどに送信される情報は value 属性の値になります。
<option value="usa">アメリカ</option>
<option value="canada">カナダ</option>
<option value="uk">イギリス</option>
<option value="jp" selected>日本</option>また、上記の例では「 日本 」の項目に selected 属性を指定しています。
ドロップダウンリストは、通常は一番最初の option 要素が選択された状態になりますが、 selected 属性を指定することで、ドロップダウンリストのデフォルト値を変更できます。
ドロップダウンリストとラジオボタンは目的が似通っていますが、どちらを選択するかによってユーザー体験に与える影響は違います。
例えば、ドロップダウンリストは選択項目が閉じた状態で表示されるという特徴があります。選択項目が多い場合、ウェブフォームの見た目をコンパクトに表現することができますが、ラジオボタンに比べて一覧性に欠けるという問題があります。
適切なドロップダウンリストの使い方として、国や地域など、選択項目が予め想像でき、項目の数が多い場合などに適していると考えることができます。
これらのフォーム部品を使用することで、ユーザーがテキストを手入力せずに情報を提供することができるようになり、ウェブサイトやアプリケーションの操作性を向上させることができます。
送信ボタンとリセットボタン
送信ボタンとリセットボタンは、フォームの送信およびリセット操作を可能にするための重要な要素です。このセクションでは、これらのボタンのHTMLマークアップについて解説します。
送信ボタン
送信ボタンは、ユーザーがフォームに入力したデータを送信するためのボタンです。ユーザーがフォームを入力し終えたとき、このボタンをクリックすることでデータがサーバーに送信されます。以下は、基本的な送信ボタンのHTMLコードです。
<input type="submit" value="送信します">以下のように表示されます。
input 要素に「 type=”submit” 」と指定することで、送信ボタンを設置することができます。 value 属性に指定した値はボタンのテキストとして表示されます。
また、送信ボタンは button 要素でも定義することができます。見た目や機能は input 要素で定義した場合と同じですが、閉じタグがあるのでテキスト部分の装飾を簡単に行うことができます。
<button type="submit"><span style="color: red;">送信</span>します</button>リセットボタン
リセットボタンは、ユーザーがフォーム内の入力内容をリセットし、初期状態に戻すためのボタンです。ユーザーが誤って入力したデータを簡単にクリアできるようにします。
以下は、基本的なリセットボタンのHTMLコードです。
<input type="reset" value="リセットします">見た目は送信ボタンと同じです。
input 要素に「 type=”reset” 」と指定することで、リセットボタンを設置することができます。
リセットボタンも送信ボタンと同様、 button 要素で定義することもできます。
<button type="reset">リセットします</button>リセットボタンは一般的なウェブサイトで使うことはほとんどないでしょう。リセットボタンの利用シーンとしては、何らかの入力値をもとに出力を返すようなウェブツールを作成した場合にリセットボタンがあるとツールが使いやすくなるかも知れません。
ウェブフォームで使用される基本的なHTML要素の解説は以上です。
次のステップ
この記事では、ウェブフォームの概念や利用されるシーン、HTMLでマークアップを行う上での基本構造、ウェブフォームで使用される基本的なHTML要素について解説しました。
ウェブフォームで使用できるフォーム部品は他にも様々なものがありますが、この記事でご紹介したHTML要素は基本的なものなので、まずはこれらを扱えるようにしておくと良いでしょう。
次のステップの「お問い合わせフォームを作ってみよう【HTMLマークアップ編】」では、この記事でご紹介したHTML要素を使用してお問い合わせページのマークアップを行い、具体的なフォーム部品の使用方法について学びます。
