あなたのフォーム、PCで正常に動いているからと安心していませんか?
意外とよくある「スマホ」で起こるフォームの落とし穴、他人ごとではない!?

こんにちは! 今日も元気なカオツです!
「今年こそお腹を凹ませてプールに行くぞ!」と思いつつ、もう夏ですね。。。

今回のお題はカオツのようにのんきなことは言っていられない! 今すぐ見直して欲しい、とても重要なHTMLのお話をさせていただきます!

そもそもフォームタグ“<form>~</form>”って何をしているの?

下の画像のようにフォームタグ“<form>~</form>”は、そのフォームタグ内に内包する情報“<input>”や“<select>”などのデータを、指定されたページへ送信するために存在します。

pic1

簡単に説明すると、フォームタグとはお客様情報などの「入力データを送信する」ためのタグです。
しかし「入力データを送信する」ためには決められたルールを守る必要があります。それは…

開始タグ“<form>”と閉じタグ“</form>”で「送信したい情報」をしっかり囲ってあげること!

え……、当たり前じゃんと思った方もいるかもしれませんね。

しかし、HTMLを作っている人も神ではありません。人間です。
こういう単純なミスって結構あるものなんです。。。

間違っているフォーム要素の書き方とは?

pic2

先ほどの画像と比較して、閉じタグ“</form>”の位置が違いますよね!?

「一見なにが間違っているの?」と思う人もいるかもしれませんが、HTML文法(DOM構造)をしっかり理解している人であれば直ぐに間違いに気づくのではないでしょうか。

ちなみにDOM構造については、ヨシミ氏が前に解説しているのでご参照ください。
※参考:見慣れたサイトにするなら「真ん中寄せ!」

「“<form>”開始タグと“</form>”閉じタグは、大前提として同一階層になければならない」
これはHTMLを構成する上で基礎的なことではありますが、これ単体で不具合になるわけではないので検知されづらく、そのままというサイトも意外と多くあるようです。

では、さらに別のパターンを見てみましょう。

pic3

先ほどの画像より、少し難易度が高いかもしれません。

まず前提として知っていただきたいのは、HTMLタグ内には特定の要素しか内包してはいけないタグが存在するということ。

その中の一つが上記画像で赤色にマーカーされているテーブルタグ“<table>~</table>”になります。

テーブルタグに内包できるタグは、テーブル要素として適しているものに限られます。そのため、“<table>~</table>”の直下にテーブル要素として不適切なフォームタグが存在する場合も、先ほど同様に構文エラーが発生してしまいます。

W3Cが定める文法と構文エラーについて

構文のルールを決めている「W3C(World Wide Web Consortium)」という機関があります。
HTMLやCSSは「W3C」によって決められたルールに則って制作されていることが前提となっています。

そのルールを守らなければ、意図しない動きになってしまったり、ブラウザごとに違う見え方になってしまう可能性があります。

そういったこともあり、サイトそのものやウェブ内で扱っているサービス等のすべては「W3C」のルールに則って制作されていなければなりません。ルールを無視すると動作担保はされないということですね。

つまりは「W3Cに準拠したHTMLの書き方が安全!」ということです。

「とはいえ、PCではちゃんとフォームの情報が送信されるよ!?」

「そんなこといっても、PCではちゃんとフォームの情報が送信されているよ!?」と思う方もいらっしゃるのではないでしょうか。そこが今回のポイントです!

「PCブラウザ」と「スマートフォンブラウザ」。それぞれ2つの環境が、まったく同じだと言えるサイトは、一体どのくらいあるのでしょうか!?

おそらく表示や動き、処理等が異なるサイトばかりではないでしょうか。仮に見た目が似ていたとしても、両者完全同一環境のサイトは極めて少ないかと思われます。

「環境が異なる」上に「構文エラーがあるHTMLソース」なのであれば、想定し得ない動きをする可能性は大いに考えられます。

構文エラーでも上手くいっているのはそのブラウザが親切設計なだけ

以前、「入力」→「確認」→「完了」といった一般的な入力フォームにおいて、弊社のフォームコンバータにてスマートフォン閲覧用の変換設定をさせていただきました。

ところが、構文エラーが発生している入力ページのフォームタグ内に、非同期処理をスクリプトで入れてみたところ、

入力ページで入力したはずの情報が確認ページに送信されず、エンドユーザの入力情報がデータ蓄積できないという、とても恐ろしい体験を目の当たりにしたことがあります。

((((;゚Д゚))))ガクガクブルブル

昨今ではスマートフォンサイトを作らなくても、ASPサービスやスクリプトを使用したレスポンシブ(※画面幅に併せて自動的にレイアウト組み換えを行う)対応等でスマートフォン向けサイトを作るケースも多いと思います。

そんな時に「HTMLに問題があったばかりに、肝心のスマートフォン対応ができなくなってしまった」といった“サイトの作り直し”を要する恐れもあるのです。

今後もスマートフォンのデバイスは進化し続けることは明白です。
その度に“サイトの作り直し”を発生させることはとても効率が良いとは言えません。

間違ったHTMLソースに対して、対応できないブラウザやサービスがあることをご理解いただけましたでしょうか? 逆にいえば、正しいHTMLソースでさえあれば、ほとんどのブラウザでの閲覧や、サービスの恩恵は受けられるということです。

ブラウザを作っている人も、サービスを考えている人も、どちらも「W3C」のルールに則って作成されていますから当然ですよね。

万事に備えて、まず診断!

今回はフォームタグにフォーカスを当てましたが、実際はフォームタグに限らず、間違った記述が引き起こす「意図しない事象」は数多くあります。

世の中は便利なもので、HTMLを診断してくれるサイトもあります。(バリデーションチェックで検索!)
「意図しない事象」を発生させてしまう前に、作成したサイトを診断してみてはいかがでしょうか。

カオツのように夏になってからダイエットしなきゃでは遅いのですよ…あぁぁ

(;´д`)トホホ…