ワードプレス初心者向け情報サイト『webcode』WordPress初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。2018年5月20日webcode編集部FacebookTwitterはてブPocketFeedlyWebデザインを学びたての頃は、HTMLのフォームのところで上手く行かずに詰まることがあります。これは、実は大きな落とし穴が存在するからなのですが、今回はエラーチェックや状況に応じてフォーム内容が変わるHTMLフォームの実装方法をご紹介していきます。まとめそもそもHTMLでのフォームの実装方法とは?まずは、そもそもHTMLでどうやってフォームを実装するのかについてお伝えします。いっても、formタグを書いてinputタグを書いてという説明ではないです。submitされた値は、formタグに記載されているmethodの転送方法で、action先に送信されます。method="post">その後の処理はaction先で行われるわけです。お問い合わせページの場合は、どこにaction先を指定すればいいでしょうか。値の受け取りにはPHPを使うことが多い実は、submitされた値の受け取りには、PHPを使うことが多いのです。検索をしてみてCGIという用語を見まくった方は多いと思いますが、そのことは一旦忘れてください。受信ボックスに届くみたいな感じです。簡潔に言えば、HTMLだけではフォームとして完結しにくいということです。(これを意外と知らない人が多い)HTMLのフォーム実装別3タイプそれでは、値を渡す先がある程度認識できたところで、フォームの実装に入りましょう。今回は、PHPでの処理は書かずにHTMLのフォームをいかにして実装するかだけに焦点を当てます。筆者が個人的に使うなと感じているフォームの実装方法は下の3タイプです。HTMLのみで書くタイプHTMLとJavaScriptのハイブリッドsubmitもJavaScriptでどうにかするタイプこれらについて、ひとつひとつ解説していきます。HTMLのみのタイプまずは、フォームの基本形。全てHTMLで書いているタイプです。type="submit">送信</button></form>みたいなやつですね。メリット:簡単・分かりやすいとにかく、このフォームを使うメリットはこれでしょう。簡単だし、分かりやすい。HTML5になってからは、入力内容のチェック機能が強くなったのでとても心強いです。デメリット:動的コンテンツが使えないデメリットとしては、このHTML形式ではデフォルトで表示されてしまうので、状況に応じて入力欄を変更できないことでしょう。実際には相手の解答に合わせて項目を変えたい時もあるはずですが、この方法ではそれはできません。(「任意」を使えばできないことはないですが...)HTMLとJavaScriptのハイブリッド次は、HTMLとJavaScriptをうまく使い分けたハイブリッド形式のフォームです。HTML5からの入力チェックによって、使い勝手がかなり向上しました。今では、これが実装できれば十分かと思います。メリット:動的コンテンツが使えるこの方法は、動的コンテンツを扱うことが出来ます。相手の選択状況に応じて、フォームを変えることが可能です。詳しいやり方については、詳細には解説しませんが、キーワードとなる言葉は「非同期通信」「ajax」「イベントハンドラ」です。流れだけをお伝えしておくとinputなどにchangeイベントのイベントハンドラを付けるイベントハンドラの処理に、ajaxでのデータの受け渡しを入れる戻り値によって、その後ろの要素を変更するこれで、inputがchange(なんらかの入力があったり、消されたり)した時に、発火して処理が起こります。デメリット:あんまない(多分)今のところ、他の実装方法とくらべてデメリットを感じたことがないです。言えば、ajaxの実装方法が最初のうちは難しいと感じたことくらいでしょうか。JavaScriptでどうにかするタイプ最後のタイプは、少し変わり者です。理由がない場合は、2つめのやり方を使っていただいたほうがいいでしょう。これは、JavaScriptでsubmitも行ってしまうタイプです。結論を言うと、clickイベントにイベントハンドラを設定してうやります。clickイベントにイベントハンドラをつける(submitの代わり)イベントハンドラの処理に、データを飛ばす処理を入れるとなります。メリット:submitに縛られないメリットとしては、submit以外で送れることでしょうか。原理上、イベントハンドラを付ければ発火させられるので、clickに拘る必要もありません。デメリット:イベントハンドラで処理を書くデメリットとしては、イベントハンドラで処理を書かないといけないことです。HTMLのsubmitと同じ機能を実装するためにイベントハンドラを書いているのであれば、コードの無駄使いになるので諦めましょう。まとめいかがでしたか?今回は、HTMLのフォームの実装方法別3タイプでした。個人的には、真ん中で紹介した、HTMLでのフォームの中にJavaScriptでの処理を加えていくタイプです。この方法であれば、エラーチェックも行えるのでかなり使いやすいと思います。思ったことはありませんか?そんな時には、WordPressを使ってブログ...Web制作会社リーフワークスの評判は?セミオーダーパッケージがおすすめなサイトは?WEBシステムやWEBサービスのパッケージを提供する、リーフワークスの口コミです。公式サイト:https://semi.leafworks...Webデザインサイトマップの作り方!簡単にテンプレートで作成する方法Web制作をする際には、サイトマップを作る必要があります。時は、サイトマップを作るにも四苦八苦することが多いです。webcodezeroRANKINGShopify(ショピファイ)の評判は?カラーミーショップやリピートとの比較エックスサーバーの使い方をワードプレス初心者にわかりやすく画像で解説【経験談付き】ロリポップはライトプランで十分?ワードプレスを複数するならどのlolipopのプランが良い?バインドアップ(BiNDup)の評判は?料金比較やメリット・デメリットを解説ヘテムルとエックスサーバーの比較!wordpress初心者におすすめはどっち?CATEGORYWordPress(ワードプレス)初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope(グーペ)初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。Jimdo(ジンドゥー)初心者向けにjimdoに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、jimdoの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。WIX(ウィックス)初心者向けにWIX(ウィックス)に関するお役立ち情報が掲載されています。口コミや評判、メリット・デメリット、WIXの利用がおすすめな人や、他のCMSやホームページ作成ツールとの比較情報などもご紹介しています。RentalServer(レンタルサーバー)レンタルサーバーに関する口コミや評判、メリット・デメリット・料金比較などが掲載されています。ワードプレス(wordpress)運用におすすめのレンタルサーバーもご紹介しております。