読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

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

list-2389219list

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

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

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

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

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

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

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

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

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

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

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

よくあるフォームの実装方法としては

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

みたいな感じです。

簡潔に言えば、HTMLだけではフォームとして完結しにくいということです。(これを意外と知らない人が多い)

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

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

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

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

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

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

HTMLのみのタイプ

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

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

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

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

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

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

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

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

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

HTMLとJavaScriptのハイブリッド

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

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

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

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

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

流れだけをお伝えしておくと

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

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

デメリット:あんまない(多分)

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

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

JavaScriptでどうにかするタイプ

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

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

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

となります。

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

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

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

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

まとめ

いかがでしたか?

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

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

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら