webワーカーライフ

仕事 参考情報 技術

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

投稿日:

コーディングイメージ
最近仕事で登録フォームを作っている。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

そこで使ったのがjQueryを使ったバリデーションでものすごく簡単に実装できて無茶苦茶高機能で痒いところに手届く感じ。
参考jQuery-Validation-Engineで簡単にフォーム内容をチェック!

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

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

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

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

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

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

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

人気の記事

1

毎朝「いらっしゃいませー」とみんなで大声で復唱するような普通の店舗での販売員だった私が、職業訓練を3ヶ月受けて社内WEBデザイナーになった話を紹介してみます。

2

ブラック企業で働いている人や、やりたいことができない会社で働いている人などいろいろな理由で転職したいと考えているWebデザイナーは多いと思う。 私の場合もブラック企業から逃げるように転職したり、ぬるま ...

3

Web制作の仕事で生活していこうと思うといろいろな職種がある。 Webデザイナー フロントエンドエンジニア コーダー プログラマー Webディレクター WebデザイナーやWEBディレクターはデザインや ...

-仕事, 参考情報, 技術

Copyright© Webワーカーライフ , 2019 AllRights Reserved.