フォームをデザインしよう
お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせないフォーム。
今回は、そんなフォームをデザインする方法をいくつかまとめてご紹介します。
JavaScriptやCSSを使えば結構いろいろなことができそうです。
FancyForm
mootoolを使ってチェックボックスとラジオボタンををクールなデザインに変えてしまうことができます。
CRIR: Checkbox & Radio Input Replacement
こちらもチェックボックスとラジオボタンをスタイリッシュにする方法
prettyCheckboxes, a solution to checkboxes
こちらもJavaScriptを使って、チェックボックスとラジオボタンにデザインを組み込む方法です。
jQuery checkbox
JQueryを使ってチェックボックスやラジオボタンをファンシーにデザイン。
Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements
JavaScriptを使ってフォームのデザインをカスタマイズ。
DropDown – xHTML/CSS/Javascript replacement of classic selectbox
JavaScriptを使ってセレクトにデザインを組み込む方法が紹介されています。
Styling dropdown select boxes
ドロップダウンにスタイルをかける方法。
<select> Something New
セレクトをスタイリッシュにする方法。
jquery-asmselect
セレクトの中から選択したものを下に追加していくことができます。
Adelaide Web Designs Releases customselect with icons
セレクト内にアイコンを追加。
Form field hints with CSS and JavaScript
フィールドをクリックすると注釈を表示させることができます。
Masked Input Plugin
日付やクレジットカード番号など桁数のわかっているものに、テキストボックスの中に下線やダッシュなどを表示する方法。
Autotab: jQuery auto-tabbing and filter plugin
決まった文字数が入力されると自動的に次のボックスへカーソルを移動させることができます。
10 CSS Form Examples
10種類ものとってもきれいなCSSフォームのサンプルを見ることができます。これは参考になります。
Building a better web forms: Context highlighting using jQuery
選択している箇所をハイライトする事ができます。
Grow a textarea
テキストエリアのサイズをユーザーが変更することができます。
Password field with strength meter
パスワードを入力すると文字数に応じてメーターがアップしていきます。
Clean and pure CSS FORM design
Tableタグを使わず、CSSだけできれいなフォームデザインを組む方法が紹介されています。
Custom Form Elements in action
mootoolを使ってフォームのデザインをカスタマイズ。
Control.SelectMultiple
JavaScriptを使って複数選択を
STYLING FILE INPUTS WITH CSS AND THE DOM
参照ボタンをスタイリッシュに
|
|
|
3月 25th, 2009 at 6:54 AM
[...] フォームをデザインしよう | DesignWalker お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせな いフォーム。今回は、そんなフォームをデザインする方法をいくつかまとめてご 紹介します。JavaScriptやCSSを使えば結構いろいろなことができそうです。Fan cyFormmootoolを使ってチェックボックスとラジオボタンををクールなデザイン に変えてしまう… original article [...]
3月 25th, 2009 at 4:46 PM
[...] Design Walker [...]
3月 25th, 2009 at 9:25 PM
[...] フォームをデザインしよう http://www.designwalker.com/2009/03/form-design-2.html [...]
3月 26th, 2009 at 2:40 AM
このサイトのまとめっていうのは、他のまとめサイトの寄せ集めなのは気のせいですか？
3月 26th, 2009 at 7:03 AM
[...] フォームをデザインしよう | DesignWalker フォームをデザインしよう | DesignWalker お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせな いフォーム。今回は、そんなフォームをデザインする方法をいくつかまとめてご 紹介します。JavaScriptやCSSを使えば結構いろいろなことができそうです。Fan cyFormmootoolを使ってチェッ… original article [...]
3月 26th, 2009 at 10:04 AM
最近のmyはてなブックマーク…
sabotemのブックマークよりピックアップ
[気になる! itemズ]
高感度かつ低雑音！ 受信性能重視のUSB接続型ラジオチューナー
同じ共用サービスで使われているドメインが分か…..
3月 28th, 2009 at 8:04 AM
[...] フォームをデザインするTipsまとめ [...]
3月 31st, 2009 at 6:01 PM
[...] http://www.designwalker.com/2009/03/form-design-2.html [...]