Webデザイン

HTMLでのフォームの実装方法3種類！エラーチェック・動的要素に対応するには？

list-2389219list

Webデザインを学びたての頃は、HTMLのフォームのところで上手く行かずに詰まることがあります。

これは、実は大きな落とし穴が存在するからなのですが、今回はエラーチェックや状況に応じてフォーム内容が変わるHTMLフォームの実装方法をご紹介していきます。

高速化におすすめのレンタルサーバー
wpxshin top - HTMLでのフォームの実装方法3種類！エラーチェック・動的要素に対応するには？
2021年5月31日にリリースされた、エックスサーバーのシステムをベースにしたシン・レンタルサーバー！

月額料金がスタンダードプランで1,540円〜（税込）なので、コスパよく爆速なサイト運営が可能に！

管理画面はエックスサーバーと同じで使いやすくなっているので、これからサイト運営をする方にはおすすめです！

＼ Twitterでも口コミ良好！ ／

シン・レンタルサーバー 公式サイト

そもそもHTMLでのフォームの実装方法とは？

まずは、そもそもHTMLでどうやってフォームを実装するのかについてお伝えします。

とはいっても、formタグを書いてinputタグを書いてという説明ではないです。

submitされた値は、formタグに記載されているmethodの転送方法で、action先に送信されます。

<form action="cgi-bin/formmail.cgi" method="post">

その後の処理はaction先で行われるわけです。

それでは、質問です。お問い合わせページの場合は、どこにaction先を指定すればいいでしょうか。

値の受け取りにはPHPを使うことが多い

実は、submitされた値の受け取りには、PHPを使うことが多いのです。

検索をしてみてCGIという用語を見まくった方は多いと思いますが、そのことは一旦忘れてください。

よくあるフォームの実装方法としては以下のとおりです。

  1. HTMLでフォームをsubmit
  2. PHPで処理が書いてあるページへ値を飛ばす
  3. PHPでメールの文体に整形
  4. メールとして送信
  5. 受信ボックスに届く

簡潔に言えば、HTMLだけではフォームとして完結しにくいということです。

スキルレベルを高めよう

HTMLはプログラミングを学ぶうえで欠かせません。スキルを高めれば、プログラミングの副業にも挑戦できるでしょう。

HTMLのフォーム実装別3タイプ

それでは、値を渡す先がある程度認識できたところで、フォームの実装に入りましょう。

今回は、PHPでの処理は書かずにHTMLのフォームをいかにして実装するかだけに焦点を当てます。

筆者が個人的に使うなと感じているフォームの実装方法は下の3タイプです。

  • HTMLのみで書くタイプ
  • HTMLとJavaScriptのハイブリッド
  • submitもJavaScriptでどうにかするタイプ

これらについて、ひとつひとつ解説していきます。

HTMLのみのタイプ

まずは、フォームの基本形。全てHTMLで書いているタイプです。

<form action="" method="">
 <input type="text">
 <button type="submit">送信</button>
</form>

みたいなやつですね。かなり分かりやすいです。

メリット：簡単・分かりやすい

とにかく、このフォームを使うメリットはこれでしょう。とにかく簡単だし、分かりやすい。

さらにHTML5になってからは、入力内容のチェック機能が強くなったのでとても心強いです。

デメリット：動的コンテンツが使えない

デメリットとしては、このHTML形式ではデフォルトで表示されてしまうので、状況に応じて入力欄を変更できないことでしょう。

実際には相手の解答に合わせて項目を変えたい時もあるはずですが、この方法ではそれはできません。

(「任意」を使えばできないことはないですが...)

HTMLとJavaScriptのハイブリッド

次は、HTMLとJavaScriptをうまく使い分けたハイブリッド形式のフォームです。

HTML5からの入力チェックによって、使い勝手がかなり向上しました。今では、これが実装できれば十分かと思います。

メリット：動的コンテンツが使える

この方法は、動的コンテンツを扱うことが出来ます。相手の選択状況に応じて、フォームを変えることが可能です。

詳しいやり方については、詳細には解説しませんが、キーワードとなる言葉は「非同期通信」「ajax」「イベントハンドラ」です。

簡単な流れは以下のとおりです。

  1. inputなどにchangeイベントのイベントハンドラを付ける
  2. イベントハンドラの処理に、ajaxでのデータの受け渡しを入れる
  3. 戻り値によって、その後ろの要素を変更する

これで、inputがchange(なんらかの入力があったり、消されたり)した時に、発火して処理が起こります。

デメリット：ほとんどなし

今のところ、他の実装方法とくらべてデメリットを感じたことがないです。

強いて言えば、ajaxの実装方法が最初のうちは難しいと感じたことくらいでしょうか。

JavaScriptでどうにかするタイプ

最後のタイプは、少し変わり者です。特に理由がない場合は、2つめのやり方を使っていただいたほうがいいでしょう。

これは、JavaScriptでsubmitも行ってしまうタイプです。結論を言うと、clickイベントにイベントハンドラを設定します。

  • clickイベントにイベントハンドラをつける(submitの代わり)
  • イベントハンドラの処理に、データを飛ばす処理を入れる

メリット：submitに縛られない

メリットとしては、submit以外で送れることでしょうか。原理上、イベントハンドラを付ければ発火させられるので、clickに拘る必要もありません。

JavaScriptは、プログラミング初心者でも習得しやすい言語です。JavaScriptでできることを増やし、スキルアップを目指しましょう。

デメリット：イベントハンドラで処理を書く

デメリットとしては、イベントハンドラで処理を書かないといけないことです。HTMLのsubmitと同じ機能を実装するためにイベントハンドラを書いているのであれば、コードの無駄使いになるので諦めましょう。

まとめ

今回は、HTMLのフォームの実装方法別3タイプでした。個人的には、真ん中で紹介した、HTMLでのフォームの中にJavaScriptでの処理を加えていくタイプです。

この方法であれば、エラーチェックも行えるのでかなり使いやすいと思います。まずは、簡単なお問い合わせフォームができるようになるところから、頑張っていきましょう！

おすすめの記事