フォームをデザインしよう

お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせないフォーム。

今回は、そんなフォームをデザインする方法をいくつかまとめてご紹介します。

JavaScriptやCSSを使えば結構いろいろなことができそうです。

FancyForm

mootoolを使ってチェックボックスとラジオボタンををクールなデザインに変えてしまうことができます。

FancyForm

CRIR: Checkbox & Radio Input Replacement

こちらもチェックボックスとラジオボタンをスタイリッシュにする方法

CRIR: Checkbox & Radio Input Replacement

prettyCheckboxes, a solution to checkboxes

こちらもJavaScriptを使って、チェックボックスとラジオボタンにデザインを組み込む方法です。

prettyCheckboxes, a solution to checkboxes

jQuery checkbox

JQueryを使ってチェックボックスやラジオボタンをファンシーにデザイン。

jQuery checkbox

Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

JavaScriptを使ってフォームのデザインをカスタマイズ。

Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

DropDown – xHTML/CSS/Javascript replacement of classic selectbox

JavaScriptを使ってセレクトにデザインを組み込む方法が紹介されています。

DropDown - xHTML/CSS/Javascript replacement of classic selectbox

Styling dropdown select boxes

ドロップダウンにスタイルをかける方法。

Styling dropdown select boxes

<select> Something New

セレクトをスタイリッシュにする方法。

<select> Something New

jquery-asmselect

セレクトの中から選択したものを下に追加していくことができます。

jquery-asmselect

Adelaide Web Designs Releases customselect with icons

セレクト内にアイコンを追加。

Adelaide Web Designs Releases customselect with icons

Form field hints with CSS and JavaScript

フィールドをクリックすると注釈を表示させることができます。

Form field hints with CSS and JavaScript

Masked Input Plugin

日付やクレジットカード番号など桁数のわかっているものに、テキストボックスの中に下線やダッシュなどを表示する方法。

Masked Input Plugin

Autotab: jQuery auto-tabbing and filter plugin

決まった文字数が入力されると自動的に次のボックスへカーソルを移動させることができます。

Autotab: jQuery auto-tabbing and filter plugin

10 CSS Form Examples

10種類ものとってもきれいなCSSフォームのサンプルを見ることができます。これは参考になります。

10 CSS Form Examples

Building a better web forms: Context highlighting using jQuery

選択している箇所をハイライトする事ができます。

Building a better web forms: Context highlighting using jQuery

Grow a textarea

テキストエリアのサイズをユーザーが変更することができます。

Grow a textarea

Password field with strength meter

パスワードを入力すると文字数に応じてメーターがアップしていきます。

Password field with strength meter

Clean and pure CSS FORM design

Tableタグを使わず、CSSだけできれいなフォームデザインを組む方法が紹介されています。

Clean and pure CSS FORM design

Custom Form Elements in action

mootoolを使ってフォームのデザインをカスタマイズ。

Custom Form Elements in action

Control.SelectMultiple

JavaScriptを使って複数選択を

Control.SelectMultiple

STYLING FILE INPUTS WITH CSS AND THE DOM

参照ボタンをスタイリッシュに

STYLING FILE INPUTS WITH CSS AND THE DOM

デザインblogランキング

コメント 8 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



8 Responses to “フォームをデザインしよう”

  1. 次なるもの » Blog Archive » フォームをデザインしよう | DesignWalker Says:

    […] フォームをデザインしよう | DesignWalker お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせな いフォーム。今回は、そんなフォームをデザインする方法をいくつかまとめてご 紹介します。JavaScriptやCSSを使えば結構いろいろなことができそうです。Fan cyFormmootoolを使ってチェックボックスとラジオボタンををクールなデザイン に変えてしまう… original article […]

  2. フォームをデザインする方法 at exちゃん second (wp) Says:

    […] Design Walker […]

  3. source2 - UI Says:

    […] フォームをデザインしよう http://www.designwalker.com/2009/03/form-design-2.html […]

  4. plagiarism Says:

    このサイトのまとめっていうのは、他のまとめサイトの寄せ集めなのは気のせいですか?

  5. 次なるもの » Blog Archive » フォームをデザインしよう | DesignWalker Says:

    […] フォームをデザインしよう | DesignWalker フォームをデザインしよう | DesignWalker お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせな いフォーム。今回は、そんなフォームをデザインする方法をいくつかまとめてご 紹介します。JavaScriptやCSSを使えば結構いろいろなことができそうです。Fan cyFormmootoolを使ってチェッ… original article […]

  6. sabotem×web Says:

    最近のmyはてなブックマーク…

    sabotemのブックマークよりピックアップ

    [気になる! itemズ]
    高感度かつ低雑音! 受信性能重視のUSB接続型ラジオチューナー
    同じ共用サービスで使われているドメインが分か…..

  7. ITキヲスク | 2009年3/23~3/29の週間ブックマーク Says:

    […] フォームをデザインするTipsまとめ […]

  8. [detile]フォームデザイン « graphix-design.jp Says:

    […] http://www.designwalker.com/2009/03/form-design-2.html […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ