Webフォーム作成の記事
ARTICLEフォーム作成で必要なHTMLの知識とは。基本や作成例を紹介
フォーム作成には、プログラミング言語が用いられる場合があります。特にHTMLは、よく使われるプログラミング言語なので、どういったことができるのかは確認しておきましょう。HTMLを利用した基本的な知識や作成方法について紹介します。
フォームについて知ろう
メールフォームや問い合わせフォームなど、フォームという言葉自体は聞き慣れている人が多いかもしれません。しかし、フォームを作成するためには、フォームの定義をより具体的に知らなければなりません。
まずは、フォームについてよく知っておきましょう。
さまざまな種類のフォーム
フォームは、用途によってさまざまです。
Webサイトで使うアンケートフォームや問い合わせフォームをはじめ、出欠確認に用いるフォームや、サービスの入退会などに使われるものなど、多くの種類があります。
さらに、企業がWebサイトで利用するフォームだけではありません。顧客データや商品のデータを管理しているデータベースにおいても、データの抽出や編集のためのフォームが使われているのです。
フォームの種類については、「フォーム作成サービスで作れるフォーム一覧。ツールの使い方も紹介」をご一読ください。
作成サービスやツールで作る
Webサイトに問い合わせフォームを設置したり、イベント申込受付時にフォームを利用したり、フォームを活用する企業が年々増加傾向にあるようです。このような動きに伴い、フォームを作成するサービスやツールを提供する事業者も増えています。
プログラムがわからない場合でも、こうしたツールやサービスを利用することで、簡単にフォーム作成が可能です。デザインが凝っているもの、機能性が高いものなど、ツールやサービスによってさまざまです。自分に合うサービスを探してみてはいかがでしょうか。
フォームについて詳しく知りたい方は「フォーム作成の基礎知識まとめ。主なシステムやツールの使い方とは」をご一読ください、
プログラミング言語の基礎知識
プログラミング言語と聞くと、難しいイメージがあり敬遠している人も多いのではないでしょうか。
フォーム作成においても決して簡単ではありません。しかし最近では書籍だけでなく、ブログや動画サイトなど、簡単にプログラミング言語を学べる環境があります。
まずは、プログラミング言語がそもそも何なのか、種類や基本的な定義について把握していきましょう。
プログラミング言語とは
プログラミング言語は、簡単に言うと『コンピューターに命令するための、コンピューターが理解できる言語』です。人間がコンピューターと会話するための専用言語と言うと、よりイメージが湧きやすいですね。
自動車のエンジンや、信号機や掲示板、冷蔵庫や電子レンジといった家電にもプログラミング言語は使われているのです。
インターネットの普及によって、独学でプログラミング言語を学習する人が増えています。Webサイトのプラグインや、ブログのレイアウトもプログラミング言語がわかれば自由に改変できます。
プログラミング言語の種類
プログラミング言語の数は、世界中で数百種類にのぼると言われています。その中でも、よく利用されているメジャーなプログラミング言語について紹介しましょう。
古くからあって、現在でも使われているのが『C言語』です。記述の自由度が高く、移植性が高いため多くの人が利用しています。その後も、C++やC＃などがC言語を元に生まれました。
『Java Script』は、上記の言語とはまったく違うので注意が必要です。こちらはWebページにもよく利用される言語で、HTMLと親和性が高いのも特徴でしょう。
人工知能向けの『Python』や、WordPressで使われる『php』なども、よく利用されるプログラミング言語です。
フォーム作成に使われる言語
Webページで利用するフォーム作成のための言語は主に『HTML』と『CSS』の2種類です。
HTMLは、Webページの土台とも言うべきプログラミング言語で、WebページのほとんどがこのHTMLを用いて書かれています。
Webサイトの位置を指定する技術をスタイルシートと呼び、CSSはスタイルシート言語の1つです。見出しの位置やサイドに表示するフレームの位置などは、CSSによって決められます。
他にも、先述したJava Scriptや、エクセルでフォームを作る場合はVBAという言語がよく使われるので、覚えておきましょう。
メールフォームの作成方法について詳しくは、「メールフォームの作り方まとめ。プログラミングとサービス利用」をご一読ください。
HTML5とは
Webサイトのカスタマイズに利用するプログラミング言語として、HTML5というのもよく耳にします。HTML5がどのようなプログラミング言語なのか、HTMLとはどう違うのかについて見ていきましょう。
HTMLの改定版
HTML5とは、シンプルに言ってしまえばHTMLの改訂第5版です。
HTMLの開発自体は、1993年が最初となります。そこから更新を重ね、1999年にHTML4が公開され、現在のホームページ作成を支える言語として利用されてきました。そして2014年に新たに開発されたのが、HTML5なのです。
どのような部分が改良され、どんな特徴を持っているのかを見ていきましょう。
シンプルで見やすい構造
HTML5は、文書構造を表す新しい要素が加わることで、文章全体がシンプルに見やすくなりました。
ヘッダを表す『header』、フッタを示す『footer』、日時を示す『time』や動画を再生するための『Video』といった便利な要素があります。
これによって、それ以前のバージョンではタグを多用しなければならなかった機能を、シンプルな文章で表示できるようになったのです。
API追加でより高機能に
API（Application Programming Interface）は、アプリケーションをプログラミングする際に、利用する命令や関数の記述ルールを定義したものです。
ドラッグ&ドロップ機能やユーザーの位置情報の取得、グラフィックを線画で描写するといった、文章作成以外に利用する機能を、簡単に組み込めるようになりました。
Web APIは、HTML5やCSSの言語を利用して、Web上に呼び出すことが可能です。そのためAPIを使うには､これらのプログラミング言語についてある程度理解している必要があります。
フォーム作成の基本
それでは、実際にHTMLを利用したフォーム作成について学んでいきましょう。
formタグやinputタグなどの基本的なタグをはじめとした、各項目について解説していきます。
各項目の名称
フォームの項目には、役割にあわせた名前がつけられています。それぞれ紹介しましょう。
- テキストフィールド：名前や住所や連絡先を入力するテキスト
- テキストエリア：1行で書ききれないメッセージや問い合わせを入力する
- ラジオボタン：複数の選択肢が表示され、うち1つ選ぶ
- セレクトボックス：クリックすると選択肢が現れるので、その中から選ぶ
- チェックボックス：複数の選択肢が表示され、チェックする
- 送信ボタン：入力した内容を送信するためのクリックボタン
主に使用するのは上の項目になります。名前や機能をそれぞれ覚えておいてください。
formタグ
HTMLでフォームを作成するには、<form>というタグを使います。
タグとは、プログラミングにおける役割を端的に表すものです。HTMLでは『<>』で囲むことで、他の文字とは違うタグとして扱います。
<form>と</form>の間に、フォームに必要な機能であるテキストフィールドや、セレクトボックスといったものをHTMLで記述していきましょう。
action属性
action属性とは、<form></form>内で入力された情報の送信先を設定するための属性です。
主に確認画面を表示する場合に使用します。
記述の仕方は以下のとおりです。
<form action=”送信先のURL”></form>
method属性
method属性とは、フォームで入力されたデータの送信形式を指定するための属性です。
指定方法は「GET」と「POST」の2つがあり、記述の仕方は以下のとおりです。
<form action=”送信先のURL” method=”get or post“></form>
以下にGETとPOST2つの特徴と説明します。
getメソッド
getメソッドは入力した項目をURLに付加してサーバーに送る方法です。
getメソッドの特徴は以下のとおりです。
・URLにパラメーターが付加される
・入力できる文字数に制限がある
・URLをパラメーター付きで保存・共有ができる
などがあります。
getメソッドのメリットは、検索結果をそのまま保存したり、シェアができるといったものがあります。
デメリットとして、入力された値がそのままURLに載ってしまうため、パスワードなどの個人情報を入力してもらう場合などは、セキュリティ面でおすすめできません。
そのような入力項目の場合は、次に紹介するpostメソッドを使用するようにしましょう。
postメソッド
postメソッドは入力されたパラメーターをURLに付加せずにサーバーに送る方法です。
postの特徴は以下のとおりです。
・URLパラメーターが見えない
・送信する文字数に制限がない
上記の特徴のメリットとして、URLパラメーターが見えないため、パスワードなど第三者に見られたくない値や長文入力の際は、postメソッドを使用することをおすすめします。
inputタグ
それでは次に、フォームの中身について触れていきましょう。
<input>はテキストフィールドの作成に使います。
<input type=”○○” name=”□□”>
と、上のような書き方をします。typeは、入力する属性を示すものです。○○がnumberなら数字、emailならメールアドレスを入力するという意味になります。
□□は入力項目を管理するIDやクラスを入れるもので、任意に決められます。名前を入れる場合はyourname、電話番号ならtelといった入力です。
フォーム作成の基本について知りたい方は、「フォームの作成にはどんな方法がある？基本や主な方法のまとめ」をご一読ください。
それでは以下にinputタグの代表的な種類について紹介していきます。
text属性
text属性は、氏名などの単一行テキストの入力欄になります。
text属性の記述の仕方は以下のとおりです。
<label for=”my_name”>氏名：</label>
<input type=”text” name=”my_name” id=”my_name”>
labelタグ
ここでlabelタグについて触れておきます。
inputタグをはじめ、入力項目だけを表示しても、ユーザーはそれが何の入力項目なのかを認識することはできません。
そこで必要になるのがlabelタグです。
上記のようにinputタグで氏名の入力項目を作成した場合、labelタグを使用し、「氏名」と合わせて表示することで、ユーザーが入力すべき事項を認識することができます。
labelタグの記述方法は以下のとおりです。
<label for=”text_id“>氏名：</label>
<input type=”text” name=”name” id=”text_id“>
ここで重要なのが、labelのfor属性の値とinputのid属性の値を同じ値にするということです。
両者を同じ値にすることで、関連付けを行うことができます。
email属性
email属性は、ユーザーにメールアドレスの入力をしてもらう場合に設定します。
text属性と同じように表示されていますが、「××××××××＠×××.××」という形式に当てはまらない場合はエラー表示をしてくれます。
email属性の記述の仕方は以下のとおりです。
<label for=”mail“>メール：</label>
<input id=”mail” type=”email” name=”mail”>
radio属性
radioタグとは、上記のように複数の選択肢から1つを選択してもらう場合に使用します。
radioタグの記述の仕方は以下のとおりです。
<input id=”male” type=”radio” name=”sex” value=”male”><label for=”male”>男性</label>
<input id=”female” type=”radio” name=”sex” value=”female”><label for=”female”>女性</label>
check属性
check属性は、主に複数の選択肢の中から、ユーザーに複数項目選択してもらう場合に使用します。
check属性の記述の仕方は以下のとおりです。
<p>好きなスポーツ</p>
<input type=”checkbox” id=”football” name=”sport” value=”サッカー”><label for=”football”>サッカー</label> <input type=”checkbox”id=”baseball” name=”sport” value=”野球”><label for=”baseball”>野球</label>
<input type=”checkbox”id=”basketball” name=”sport” value=”バスケ”><label for=”basketball”>バスケ</label>
file属性
file属性とは、上記のようにユーザーにファイルを送信してもらう場合に設定します。
file属性の記述の仕方は以下のとおりです。
<input type=”file” name=”example” accept=”.png, .jpg, .jpeg, .pdf, .doc“>
file属性では、ユーザーが送信できるファイルの形式を上記のようにacceptを使って指定することができます。
submitタグ
submitタグとは、上記のようにユーザーが入力した情報を送信するためのボタンになります。
submitタグの記述の仕方は以下のとおりです。
<input type=”submit” value=”送信する”>
textareaタグ
textareaタグは上記のように、長文を入力してもらう場合に使用します。
textareaの記述の仕方は以下のとおりです。
<label for=”message”>お問い合わせ内容</label><br>
<textarea name=”message” rows=”20″ cols=”80″ id=”message”></textarea>
入力欄には、textareaの必須項目であるrows属性とcols属性を指定することにより、入力欄の高さと幅を指定することができます。
select属性
selectタグとは、上記のようにプルダウンメニュー項目を作成する場合に使用します。
selectタグの記述の仕方は以下のとおりです。
<select name=”name” id=”name”>
<option value=”見積もり”>見積もり</option>
<option value=”相談”>相談</option>
<option value=”お問い合わせ”>お問い合わせ</option>
</select>
問い合わせフォームの作成ポイントと役割
それでは、問い合わせフォームを作成する際の、具体的なポイントについて見ていきましょう。
入力画面
入力画面は、実際にユーザーに必要な項目を入力してもらうための画面です。どんなことを入力するかはフォームの用途によって変わってきます。
問い合わせフォームであれば、本人確認のための名前、返信するための連絡先の項目は最低限必要です。住所や性別、年代までは必要ないかもしれません。テキストエリアは長く取った方が良いでしょう。
アンケートフォームであれば、個人情報の類は不要かもしれませんが、チェックボックスやラジオボタンといった選択項目が必要になります。
どんな項目が必要かにあわせて、機能をフォーム内に入力してきましょう。
確認画面
確認画面は、入力画面で入力した内容を、ユーザーが確認するために設置するものです。送信を完了する前に、この画面で内容に誤りがないかを確認できるようにしましょう。
<input>のタグ内にreadonlyという属性を入れます。これは、入力された数値や文章をこの画面内では変更できないようにするための属性です。
最後に確認画面の下に、送信完了ボタンを設置しましょう。
送信完了画面
送信完了画面には、送信が終わったことに対するお礼のメッセージが表示されるようにします。同時に、送信者とWebサイトの問い合わせ担当者に対してメールを送信する必要があるでしょう。
$flg = bSENDMAIL3($address,”○○@△△.com”,”（担当者）です。今回はお問い合わせいただきありがとうございました”,$body);
こちらは、フォームに入力された送信者に対してメールを送るための設定になります。○○@△△.comは担当者のアドレスが入ります。
$flg = bSENDMAIL3(“○○@△△.com”,”○○@△△.com”,”（担当者）です。今回はお問い合わせいただきありがとうございました”,$body);
一方こちらは、Webフォームを作った担当者に対しメールを送信するための設定です。○○@△△.comは上記同様、問い合わせを管理する担当者のアドレスを記入してください。
メールフォームのメリットに関しては、「メールフォームは設置した方が良い？メリットや作成方法のまとめ」をご一読ください。
まとめ
フォーム作成にHTMLを利用することで、自分の好きなようにデザインや機能を付けることが可能です。
フォームは、今や企業のWebサイトのどこかには設置されています。訪問者が使いやすいフォームであれば、入力しやすく、アンケートの回答率の向上などにも役立つでしょう。
デザインも優れた機能性溢れるフォーム作りに挑戦してみてください。
また、簡単にフォーム作成をしていきたい方には、弊社のマルチデバイス対応のフォームが簡単操作で作成できる Webフォーム作成サービス「SPIRAL®」もおすすめです。問い合わせ・資料請求は無料ですので、まずはお気軽にお問い合わせください。
