HTML5が進化してフォーム作りが簡単に！でもやっぱりjQueryの方がもっと便利

最近仕事で登録フォームを作っている。

普通の会員登録フォームで以下のような内容。

• 名前
• フリガナ
• 郵便番号
• 住所
• 電話番号
• メールアドレス
• メールアドレス再入力
• 備考テキストエリア

こういうごく普通の内容を入力するフォームなのであるが久しぶりにこういうフォームを作ってちょっと感動的だったのがjavaScriptなしでもHTML５だけで入力内容のチェック（バリデーション）が出来るようになっていること。

HTML5のバリデーション機能が凄い

これまで入力チェックというとjavaScriptで値をチェックして入力内容に不備があったり間違ったことを書いていたりするとエラーが出るようにしたりしていた。

これは結構あちこちにフリーで配布されているもののなんだかんだで設定に時間がかかっていた。

それがだ、HTMLのタグにrequiredと入れておくだけで入力必須となり送信ボタンを押してもエラーが帰ってくる。無茶苦茶コーディングが楽になっとるやんけ！

他にもtype=”number”としておけば数字かどうかをチェックしてくれたりとjavaScriptなしでバリデーションが簡単に設定できるようになっている。

HTML5のバリデーションはブラウザによって差異がある

HTML5の機能をそれぞれのブラウザが独自に実装している状態なのでもちろんそれぞれのブラウザで差異が生じている。IE１１、Chrome、ファイヤーフォックスでチェックしてみたが一応使えるようにはなっていた。

ただ、type=”xxx”の部分に関しては種類によって実装されていないものもある感じだったのでチェックは必要だろう。
参考http://www.htmq.com/html5/input.shtml

特に日付入力に関してはカレンダーが出てきて超簡単に入力できるブラウザもあれば普通のフォームなブラウザもあり、かなりばらつきが激しい。

結局jQueryを使うことになった

HTML5の入力チェック機能は凄い便利！って思ったけど、チェックしていると７文字に指定したはずがいくらでも入力できたりメールアドレスを再度入力してもらって同じ値かどうかをチェックする機能を実装しようとしても流石にまだそういう超便利な機能は実装されておらず結局javaScriptを書くしか無い感じだった。

そこで使ったのがjQueryを使ったバリデーションでものすごく簡単に実装できて無茶苦茶高機能で痒いところに手届く感じ。
参考jQuery Validation Pluginが使いやすくておすすめ

最大文字数チェックとか再入力チェックとか数字チェックとかそういうのが全部出来て１時間ぐらいで簡単に実装できてしまった。

フォームはHTML5で実装が楽になったけどまだjQueryを使ったほうが楽のまとめ

HTML5でサイトを作るのが当たり前の時代になってちょっとしたフォームなら簡単にバリデーションまでHTMLで作ることが出来るようになった。

ほんと素人みたいなコーダーでも普通のフォームぐらいならバリデーションを設置できるようになっているだろう。

ただ、やっぱりちゃんとした会社の信頼のおけるフォームを実装しようとしたらちゃんとしたjQueryのバリデーションを使ったほうが圧倒的にちゃんとしたものが出来て利用者にも親切なフォームが作れるだろう。

あとはちゃんとしたサーバー側の知識も無いとこういった簡易的なフォームをそのまま使ってしまったりするとSQLインジェクション対策やクロスサイトスクリプティング対策が不十分でサイトが乗っ取られたりする恐れも考えられる。

フォーム周りはセキュリティーの知識が無い人が触るにはかなり危ない世界なので気をつけたい。

感謝→Amazonの履歴を御覧いただきありがとうございます。収益はサイト運営に大切に使わせていただきます。