和田憲幸のブログ

暇だから、というのも何ですけど全体のうちの何％程度入力が終わったかを知る機能を付けてみた。これは入力する人のためというよりは、フォームを作成する人のためと言ったほうが良いかもしれない。

メールフォームプロ3.1.3 プログレス機能サンプル

お陰様でいろんなとこでメールフォームプロを見かける事があり制作者としては嬉しい限りなのですが「入力欄多っ！！」というフォームに出くわすことも決して少なくはないものです。私のような面倒くさがり屋になると入力欄が多いフォームを見るとゲンナリします。

本機能で入力欄が何個あるのかを把握して、入力する人の気持ちをフォーム作ってる時にチラッとでも考えてくれると「入力欄多っ！！」ってフォームをこの世から少しでも減らせるかなぁと。いや、設置する人の気持ちはわかるんですよ。アレコレ根掘り葉掘り聞きたいって気持ちはね。でもそれは入力する側にとっては「鬱陶しいっ！」と思われかねないんですよね。

それ、後じゃ駄目かい？

って設問あるじゃないすか。「初見でそれいきなり聞くかね？」って質問あるでしょう実際の人間関係にも。もちろんフォームの役割にもよるけれど、私にとってフォームはある種のキッカケのような位置付けなので、サラッと気軽にpostできるというのが理想的だと私は思っています。

仕組みの説明

最初の読み込み時にhiddenエレメントを除くinput、textarea、selectなどのオブジェクトの総数を求めて、各オブジェクトに番号を順番に振っていきます。フォーカスがあたった時に自分の番号と総数からパーセンテージを表示するという比較的テキトーな機能。まぁ目安にはなるでしょう。

と、いうことで思いつきで付けた割にはオモシロイ機能になったんじゃないでしょうか。