フォーム作成で必要なHTMLの知識とは。基本や作成例を紹介

掲載日:
2019/01/18
更新日:
2019/07/31

ソリューション

Webフォーム作成

フォーム作成には、プログラミング言語が用いられる場合があります。特に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で記述していきましょう。

inputタグ

それでは次に、フォームの中身について触れていきましょう。

<input>はテキストフィールドの作成に使います。

<input type=”○○” name=”□□”>

と、上のような書き方をします。typeは、入力する属性を示すものです。○○がnumberなら数字、emailならメールアドレスを入力するという意味になります。

□□は入力項目を管理するIDやクラスを入れるもので、任意に決められます。名前を入れる場合はyourname、電話番号ならtelといった入力です。

フォーム作成の基本について知りたい方は、「フォームの作成にはどんな方法がある?基本や主な方法のまとめ」をご一読ください。

問い合わせフォームの作成ポイントと役割

それでは、問い合わせフォームを作成する際の、具体的なポイントについて見ていきましょう。

入力画面

入力画面は、実際にユーザーに必要な項目を入力してもらうための画面です。どんなことを入力するかはフォームの用途によって変わってきます。

問い合わせフォームであれば、本人確認のための名前、返信するための連絡先の項目は最低限必要です。住所や性別、年代までは必要ないかもしれません。テキストエリアは長く取った方が良いでしょう。

アンケートフォームであれば、個人情報の類は不要かもしれませんが、チェックボックスやラジオボタンといった選択項目が必要になります。

どんな項目が必要かにあわせて、機能をフォーム内に入力してきましょう。

確認画面

確認画面は、入力画面で入力した内容を、ユーザーが確認するために設置するものです。送信を完了する前に、この画面で内容に誤りがないかを確認できるようにしましょう。

<input>のタグ内にreadonlyという属性を入れます。これは、入力された数値や文章をこの画面内では変更できないようにするための属性です。

最後に確認画面の下に、送信完了ボタンを設置しましょう。

送信完了画面

送信完了画面には、送信が終わったことに対するお礼のメッセージが表示されるようにします。同時に、送信者とWebサイトの問い合わせ担当者に対してメールを送信する必要があるでしょう。

$flg = bSENDMAIL3($address,”○○@△△.com”,”(担当者)です。今回はお問い合わせいただきありがとうございました”,$body);

こちらは、フォームに入力された送信者に対してメールを送るための設定になります。○○@△△.comは担当者のアドレスが入ります。

$flg = bSENDMAIL3(“○○@△△.com”,”○○@△△.com”,”(担当者)です。今回はお問い合わせいただきありがとうございました”,$body);

一方こちらは、Webフォームを作った担当者に対しメールを送信するための設定です。○○@△△.comは上記同様、問い合わせを管理する担当者のアドレスを記入してください。

メールフォームのメリットに関しては、「メールフォームは設置した方が良い?メリットや作成方法のまとめ」をご一読ください。

まとめ

フォーム作成にHTMLを利用することで、自分の好きなようにデザインや機能を付けることが可能です。

フォームは、今や企業のWebサイトのどこかには設置されています。訪問者が使いやすいフォームであれば、入力しやすく、アンケートの回答率の向上などにも役立つでしょう。

デザインも優れた機能性溢れるフォーム作りに挑戦してみてください。

この記事に関連するソリューション

Webフォーム作成

詳しく見る

お問い合わせ
お問い合わせ

TOP TOP

お電話、フォームからお気軽にお問い合わせ下さいお電話、フォームからお気軽にお問い合わせ下さい

0120-935-463 受付時間|平日9:00~18:000120-935-463 受付時間|平日9:00~18:00
お問い合わせ お問い合わせ 無料トライアルにお申し込み 無料トライアルにお申し込み

一部IP電話等で上記ダイヤルに繋がらない場合は、03-5575-6601におかけください。(通話料金がかかります。)

認証・制度
パイプドビッツのマネジメントシステム
個人情報保護方針

プライバシーマーク ANAB SMP ANAB ASPSaaS IaaSPaaS