custom form elementsでオシャレなフォームを実装！
当ブログは思いっきりMTのテンプレートまんまですので、
全くといって言いほどノンカスタマイズですが、
最近はフォームにアクセントを効かせたものが増えてきましたよね。
企業ともなるとセキュリティ部分を扱うフォームですので、
商品化されたものを利用する必要もあるのかもしれませんが、
個人ベースであれば、フリーのツールを使ってみるのはいいと思います。
と言うことで本日はフォームをオシャレに！
フォームにもユーザービリティを！
と言う方向けの便利なツールをご紹介いたします。
custom form elements
http://customformelements.net/
custom form elementsは、JavascriptやCSSを使って、
フォームの、主にはチェックボックスやラジオボタン、セレクトボックス等を
ちょこっとオシャレに！且つユーザビリティ、アクセシビリティの
向上にも貢献してくれるというもの。
実装にはmootool.jsが必要になります。
と言うことで...
まずは実際に実装してみましょう！
と思ったのですが、若干管理人には難しそうなので、
以下デモページをご覧下さいませ...orz
Demo ~ custom form elements
http://customformelements.net/demopage.php
チェックボックスにマウスオンをすると、
選択されている部分が動き、チェックボックスにも色が付きます
自分の記入している部分の色が変わり、視覚的にアプローチ！
セレクトボックスもCSSレイアウトを変更することで、
可愛らしい囲いの出来上がり！
ちなみにcustom form elements本体は以下よりダウンロードできます。
http://customformelements.net/howto.php
※download pageよりダウンロードページへ遷移します
※GPLライセンスになります
最近はAjaxを利用した同様のツールが頻繁に出ていますが、
ユーザー視点に立てば、使いやすくて便利な代物。
機能だけでなく、色合いなどデザインもさらに重要になりそうですね。
以下、最近紹介されていたフォーム関連ツール。
・ajaxな住所入力フォーム
・フォームのフリガナを自動入力するAutoRuby.js
・JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ
いつの日か当ブログにも導入したいものです...orz
関連エントリー
トラックバック(0)
このブログ記事に対するトラックバックURL:
http://km33.net/mt/mt-tb.cgi/227
コメント(2)
コメント(2)
あっ!!
大変遅くなっておりますorz
現在、住宅の方をちょこっとずつコーディングしておりまして…
リニューアル時には…！
コメントする
お気軽にコメントをどうぞ！
･･･リニューアル･･･しないんですかぃ？？(；△；)