フォームとは
ホームページには、「お問い合わせ」や「資料請求」などのページが用意されています。氏名や住所、メールアドレスなど項目別に入力し、個人データを収集するコンテンツをフォームと言います。情報が一方的に流れる従来のメディアと異なり、ユーザー（クライアント）が即時にサーバーに情報を送り返すことのできる双方向のメディアです。これを実現するために、HTMLにはフォームという仕組みが用意されています。個人情報を収集する重要コンテンツなので、プライバシーポリシーやSSL通信などセキュリティに関する内容も知っておきましょう。
公式サイトのお問い合わせフォームを見てみよう！
フォームの仕組み
一般的なフォームは、入力された内容をウェブサーバーへ送信します。それと同時に、プログラム側で処理された結果をウェブブラウザへ返します。この様に、ウェブサーバ上で動作するプログラムがウェブページを生成できるようにする仕組みのことをCGI（シージーアイ、Common Gateway Interface）といいます。CGIプログラムは、perlやPHPなど様々なプログラム言語を使って開発されています。
- フォーム項目を入力
項目には、「必須項目」と「任意項目」があります。必須項目は、必ず入力しなければ、送信できない仕組みになっています。それに対し、任意項目は、入力しなくても送信できます。これらは、プログラム側で設定することができます。入力後は、確認画面に推移し「この内容で送信します」など、一旦入力した内容が確認できる画面が表示されるパターンが一般的です。 - ウェブサーバーの処理
送信された内容は、即座にウェブサーバーへ格納され処理されます。ユーザーには「送信完了」などの画面が表示され、フォームが送られたことを示します。プログラムは、両者へ自動メールを送信します。 - データを取得する
フォーム提供者は、プログラムからメールを受け取とることにより、入力者とコンタクトを取ることができる仕組みになっています。メールアドレスが間違っていると、コンタクトが取れなくなるため、アドレスを2回入力する項目があり、間違いがないかどうかを確認させるフォームもあります。
フォームのパーツ
フォームには、様々なパーツ(部品)が用意されています。用途や特性を覚えておきましょう。また「フォーム①」では、テキストタイプ、テキストエリア、送信ボタンを練習してみましょう。
フォームを定義する
フォームの開始位置に<form>、終了位置に</form>を記述します。<form> 〜</form>の間にボックスやボタンなどのフォーム部品の要素を挿入します。
<form>
この中に部品を記述する
</form>フォームに、action属性を記述し、入力されたデータの送信先を指定することで、プログラムと連動させます。通信方法を指定したりフォームに名前をつけることで、確実なデータを送信します。
【記入例】
<form action="mail.php" method="post" name="contact">フォームに関するタグ
input
inputには、テキストフィールドや送信ボタンなど多くのコントロールを表示させるためのタグです。type属性を変えるといろいろなコントロールを表示させることができます。inputタグは、空要素なので、終了タグは要りません。
input要素のtype属性をtextとすると、1行だけ入力できるテキストボックスが作成されます。input要素は、フォーム内にたくさん登場しますので、それぞれに名前をつける必要があります。今回は、「氏名」の項目なので、name=”name”と指定し、電話番号項目の場合は、name=”tel”等の指定になります。メールアドレスの場合は、name=”email”と指定することで、フォーマットチェックが行われるようになり、@(アットマーク)が入力されていなければ、送信エラーメッセージが表示されたりすることが多くあります。
<input type="text" name="name">一行テキストに、サイズを指定する場合は、size=”サイズ”タグを追加して文字数に制限を設けることもできます。また、placeholder=”初期テキスト”タグを使うと、入力テキストボックス内に初期テキストを入れることもできます。
お名前
label
<label>タグは、お名前：(ラベルテキスト)とコントロールを関連付けるためのタグです。試験対策では、<p>の中に記述します。今回は、ラベルテキストの後に改行を入れて関連付けしてみましょう。
<p>
<label>
お名前<br>
<input type="text" name="name">
</label>
</p>textarea
<textarea>タグは、複数行のテキスト入力コントロールを表示するタグです。ご質問やご意見など、ユーザーが自由に入力できるエリアになります。<input>タグ同様、name属性(テキストエリアの名前)が必要です。また、<textarea>には、終了タグが必要です。
<p>
<label>
ご意見・ご感想<br>
<textarea name="comment"></textarea>
</label>
</p>submit
input要素のtype属性を「submit」とすると、ボタンとして描画されます。 各項目の一番最後に配置します。全ての項目を入力してから、ボタンをクリックすると入力されたデータが、ウェブサーバーへ送信されます。value=”送信”は、ボタンに描写されるテキストになります。また、ボタンの形状は、ブラウザやデバイスによって異なります。
<p><input type="submit" value="送信"></p>※送信ボタンを画像化にもできる
送信ボタンを、ブラウザが提供する一般的なボタンの代わりに画像を使用することができます。画像を使う場合は、type属性を「image」にします。またsrc属性で画像のパスを、alt属性で代替テキストを指定します。下記の画像をimagesフォルダーへコピーして試してみてください。
<input type="image" src="画像のパス" alt="確認する">▶︎ さらにフォームを学ぶ
以上の内容が、ウェブクリエイター認定試験の対象内容になりますが、フォームのパーツはもっとあります。続きは、フォーム②で学習しましょう。
