http://www.designwalker.com/2010/06/jquery-forms.html
使いやすいフォームを実装するための10のポイント | コリス
ユーザーが混乱しない、使いやすいフォームを実装するために気をつけたい10のポイントをNoupeから紹介します。ブログのコメント欄を対象にしたものですが、フォーム全般にも言えることが多く含まれています。 Comment Form Styling: Examples and Best Practices下記に10のポイントとその概要を紹介します。 サイトではキャプチャなども豊富に掲載されています。入力フィールドはシンプルにたいていのフォームには複数の入力フィールドがあります。 フォームの目的はユーザーからの適切なフィードバックを得るのが目的なので、必要無いものや関係無い入力フィールドは削除します。ラベルは分かりやすく入力するユーザーの立場にたって、ラベル付けします。 例えば、「コメント」と単に記すだけでなく、「コメントを残してください」「あなたの意見をどうぞ」などです。また、「URL」などは用
[JS]フォームのエラー箇所をアニメーションでブルッとさせるスクリプト
フォームのエラー箇所にブルッとしたアニメーションのエフェクトを加えるスクリプトをJanko At Warp Speedから紹介します。 Animate validation feedback using jQuery demo デモではフィールドが空の場合にエラーとして、ブルッとしたアニメーションのエフェクトを加えます。 スクリプトのベースにはjQueryが使用されており、下記のスクリプトを記述します。 <textarea name="code" class="js" cols="60" rows="5"> $("#signup").click(function() { var emptyfields = $("input[value=]"); if (emptyfields.size() > 0) { emptyfields.each(function() { $(this).stop(
都道府県選択するやつ。
メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北
札幌Web制作のシンクグラフィカ
シンクグラフィカについて ようこそ。シンクグラフィカのWebサイトへ。SYNCK GRAPHICAは札幌でホームページ制作やスマートフォンサイト作成・Webサイトリニューアルやシステム開発を行なっています。ホームページのご相談・作成やメールフォームを中心としたフリーCGI・Javascriptの配布などをメインに活動を行なっております。比較的変なスクリプトを多数配布しておりますので、ぜひ色々見てください。特にメールフォームは秀逸なプログラムだと自負しております。 Web制作素材ダウンロード サイト内検索CGIやメールフォームCGI、WordPressやMTなどでも使えるUTF-8対応のメールフォーム、さらにさらに効果計測ができるメールフォーム、またランダムバナーなどのJavascript、履歴書EPSファイルなどのホームページ作成で役立つ素材を公開しております。 メールフォームプロCGI
アイトラッキングから検証した、使いやすいフォームの10のポイント
Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ
[JS]セレクトボックスにアイコンを配置してグラフィカルにするスクリプト -image combobox
セレクトボックスの各アイテムにアイコンを配置して、グラフィカルに認識しやすくするスクリプトをMarghoob Sulemanから紹介します。
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。
第 8 回目は「CSSを使った見栄えの良いフォーム」です。 フォームまわりは、各ブラウザによってかなり差異があります。 よって CSS だけで見栄えをよくしようとすると、結構手間だったります。 例をあげると magin・paddingが異なる borderの線がでない 背景が画像があたらない などなど そんな時に便利なのが 「niceforms」 という javascriptライブラリです。 すいませんが、今回だけは javascript を使わせてください。 niceforms のサンプルはこちら 導入方法 まずは、niceforms をダウンロードします。 次に、必要な jsファイル および cssファイル をインクルード。 <script language="javascript" type="text/javascript" src="niceforms.js"></script>
![[使える CSS テクニック] CSSを使った見栄えの良いフォーム | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
★メールフォーム MP Form Mail CGI - futomi's CGI Cafe
Web 上にて、お問い合わせや注文などを受け付け、メールを指定のメールアドレスへ送信するメールフォーム CGI です。添付ファイルも送ることができます。また、フォーム、確認画面、エラー画面は、テンプレート方式のため、自由にデザインすることができます。自動メール返信機能つきですので、お問い合わせいただいた方へのフォローも万全！ MP Form Mail CGI eCommerce 版 （メールフォームCGI） MP Form Mail CGIシリーズの最上位グレードのメールフォームCGIです。 eCommerce 版は、法人サイト、ECサイトでのご利用を前提に、あらゆる利用シーンを想定した機能満載のグレードです。 日本語は当然のことながら外国語にも対応し、また携帯サイトでのご利用もサポートしました。 詳細を見る MP Form Mail CGI Professional 版 （メールフォーム
AjaxMail：Ajaxを活用したフリーPHPメールフォーム
ウェブサイトを動的なページに変更したい、機能を拡張したいと思ったら、 Ajaxのツールを使って簡単に機能を拡張してみよう。 ウェブサイトを運営するとき、サイトを見たユーザーからコメントを残してもらうことがあります。 また、企業なら連絡方法としてメールの送信ができるように、メールフォームを用意していると思います。 こうしたウェブサイトのメールフォームをAjaxを使って導入することができます。
メールフォーム・アンケートフォーム - PHP/データベース
サンプルと機能 Web上のフォームに入力されたデータをメール送信することができます。 HTMLを書き換えるだけで入力項目を簡単に増やすことができます。 → Sample 1：アンケートフォーム → Sample 2：メールフォーム (ヘッダとフッタを変更した場合) (サンプルですので実際に送信はされません) → 主な機能・特徴 項目ごとに「入力必須」を指定することが可能 入力確認画面のON/OFF 送信後のページジャンプON/OFF 差出人に送信内容確認メールを送るON/OFF メーラーの「送信者」を送信した人が入力したアドレスにするON/OFF ヘッダとフッタの簡単編集 フォームを設置するファイルの拡張子はphpでなくてもOK このフォームは、"sendmail"のみに対応しています。 ダウンロード スクリプトをダウンロードするには「利用規定」に同意する必要があります。 →
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
しっかりと細部までデザインされたコンタクトフォームのデザイン集
http://www.designwalker.com/2009/03/form-design-2.html