UI design of HTML5 FormsThe purpose of this document is to discuss and define the Forms UI in WebKit. Notation: "@foo" means "foo attribute" or "the value of foo attribute."
Ywcafe.net
Ywcafe.net This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Credit Card Application Health Insurance 10 Best Mutual Funds Accident Lawyers song lyrics Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy
フォームの入力補助を行うJavaScript「AutoSuggest jQuery Plugin」
twitter facebook hatena google pocket Googleなどの検索では1文字いれると候補が出てきます。 ユーザビリティ向上のため、このようにフォームにも入力補助があると好ましくなります。 JavaScriptのAutoSuggest jQuery Pluginを利用することで簡単に導入できます。 sponsors 使用方法 AutoSuggest jQuery Pluginからjquery.autoSuggest.jsをダウンロードします。 <link rel="stylesheet" href="autoSuggest.css" type="text/css"> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src=
25 jQuery Plugins for Working with Forms - DesignM.ag
li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> Home Categories Tutorials Resources Inspiration Freelance Interviews Design Freebies About Contact Advertise With Us Write For Us Contact Almost every website uses a form of some kind. Contact forms and other types of forms can be
フィードバック用の簡単なフォームをサイドからスライドさせるjQueryプラグイン・contactable
Feedbackボタンをクリックするとサイド からフォームのパネルをスライドさせる jQueryプラグイン・contactableをご紹介 致します。情報元は去年の記事ですが、 自分が使いたかったのでメモ的にエントリ。 ユーザーにも優しいのでお勧めです。 わざわざページ移動せずともパッと送信出来るのでユーザビリティにも繋がりそうです。何より、インストールして使うので日本語に出来るのは大きいですね。テキストを日本語に直したデモをご用意しました。 デモ ※メールはダミーにしているので実際に送信は出来ません。 フォームテキストを日本語に変えるには梱包されているjquery.contactable.packed.jsの中を変更します。ちょっと横長なので探し難いですが。。デモでは以下のように変更しました。 (function($){$.fn.contactable=function(options)
600以上のログインフォームをチェック - everything might happen tomorrow - yhassy - builder by ZDNet Japan
55 Spectacular Login Form Designs すぐれたログインスクリーンを 55 つも集めたリンク集。特に目立つのがページの中央に大きくログインフォームを表示させているのが多数を占めています。まるで、OS やデスクトップアプリケーションのようなログインスクリーンのようですね。今後、独自 ID だけではなく、OpenID を導入した際に見やすいフォームを実現させるかが課題です。Digg が良い感じですが、他の見せ方も模索されていくでしょう。 100 Outstanding Login Forms こちらは倍の 100 のログインスクリーンを集めたリンク集。上記のまとめとかぶっているサイトも多数ありますが、ビジュアルよりラベルの付けた方のバリエーションをたくさん見ることが出来るのはこちら。ラベルとインプットフィールドの位置関係がフォームの書きやすさにどれだけ関わるのか検証
55 Spectacular Login Form Designs
When designing your next website, overlook no detail, including your login form. Too many designers think to themselves, 55 Spectacular Login Form Designs When designing your next website, overlook no detail, including your login form. Too many designers think to themselves, “Two fields and a button. Simple as that.” Wrong. Your login form should stand out on your site for members to find. It shou
Manuel Boy - Director of Engineering - Phrase GmbH
Internet, Medienproduktion, Programmierung, E-Learning
[CSS]フレシキブルなフォームを作成するスタイルシートのフレームワーク -RMSforms
既存のフォームにも利用できる、テーブルを使用しないスタイルシートベースのフレキシブルなフレームワークをRobert M. Sandy Jr.から紹介します。
【javascriptでラジオボタンを無効化する方法】2つの質問に回答してもらうアンケートがあります。…
【javascriptでラジオボタンを無効化する方法】2つの質問に回答してもらうアンケートがあります。選択肢が4つあって、第1問で「もっとも好きなもの」、第2問で「もっとも嫌いなもの」をラジオボタンで一つずつ選択してもらうのですが、第1問と第2問で同じ選択肢を選択できてしまうと矛盾が生じます。そこで、第1問でラジオボタンどれか一つを選択すると、第2問でその選択肢だけ無効化するjavascriptを設置しようと考えました。第1問と第2問のnameは当然変えますが、選択肢4つのvalueは第1問と第2問で共通のものを使いたいと思います。また、第2問の方を先に選択してしまった場合、同様に第1問の同じ選択肢が無効化するようにしたいのです。ラジオボタン無効化のサンプルコードを参考に作ろうとしたのですが、うまくいきません。どのように書けばいいか、ご教示いただければ助かります。
Super Tables - テーブルのヘッダ固定・縦横スクロールさせるJavaScriptライブラリ - JavaScript入門
HTMLテーブルを使ってデータを表示する時、テーブルの列や行数は多くなると、表示しにくくなります。Super Tablesは、テーブルの表示を見やすくなるJavaScriptライブラリです。 動作環境 ◇ ブラウザー：Firefox 2+, Internet Explorer 5.5+, Safari 3+, Opera 9+ and Chrome (Windows環境テスト済み) ◇ ライセンス：MIT Style License 機能・特徴 ◇ テーブルのヘッダ固定できる ◇ 縦横スクロールバーによる列数、行数の多いテーブルも表示しやすくなる。 ◇ 左にある列を複数固定可能 ◇ スキン・カスタマイズ可能（CSS）
jQueryでバリデーション付きメールフォームを作ろう (1/3)
今回はjQueryを使って、「問い合わせフォーム」にバリデーション（検証）機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。 バリデーションルールをclass属性で設定 「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか？」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス（確認）」に入力されたテキストが同じか――をチェックします。
[携帯]の入力フォームの横幅制御方法 │ これからゆっくり考L +α
入力フォーム（テキスト：1行）の横幅サイズの調整について、いつもコーディング時に迷うのでメモしておきます。 ※前提条件：3キャリア1ソース、xhtml size="**"のみ指定 <input type="text" size="27" name="hoge" /> 他のキャリアに合わせてサイズを調整していると、auで見た時に縦に2行になる場合があります（※端末の文字サイズにも依存します）。数字が大きすぎた場合？になるようですですが、だからといってauに合わせて数字を小さくすると、他のキャリアで見た時の横幅がかなり短くなってしまいます。 後、sizeで指定すると端末で設定している文字サイズによってフォームの長さも変わってきてしまうので、そこもちょっと気になるところです。 style="width:**"のみ指定 <input type="text" style="width:80%" na
第10回 今すぐできる！ユーザビリティを向上させるフォーム操作実践（2）：プラグインを使わずにバリデーションを実装 | gihyo.jp
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き） 第10回今すぐできる！ユーザビリティを向上させるフォーム操作実践（2）：プラグインを使わずにバリデーションを実装 バリデーションをプラグインを使わずに実装する フォームは主にコンバージョンに直結する場合が多いと思いますので、ユーザビリティを向上させる、つまりユーザーに最後まで入力してもらえるようなフォーム作りはとても重要です。 どのような機能を持って使いやすくするのか、にはそのサイト自体のターゲットユーザー層を認識した上で盛り込む必要がありますが、どんな方法で使いやすくできるのかは知っておいて損はありません。 前回は、ラベル要素を利用して、直感的に分かりやすくする方法を紹介しましたが、今回・次回にかけては少し突っ込んでJavaScriptで行うバリデーション（※1）を実装してみたいと思います。 入力された文字列をチェックす
入力フォームでの「郵便番号」の意外な盲点 (ユーザビリティ実践メモ)
登録や申し込みページの入力フォームにおいて、郵便番号を入力すると住所欄が自動入力される機能は、ユーザの入力負荷を軽減する便利な機能です。実はこの機能、正しく郵便番号を入力してもある条件下ではエラーとなってしまうことがあることをご存知でしょうか。今回は入力フォームでの「郵便番号」の意外な盲点についてご紹介します。 ただ、「会社」で用いられている郵便番号は一般的な郵便番号と異なる場合があります。 郵便番号は、特定の企業（１日の配達量が一定量を超えるような事業所）に対して「大口事業所個別番号」という事業者向けの郵便番号を割り当てており、該当する企業はこの割り当てられた郵便番号を使用しています。 しかし、郵便番号から「住所を自動入力する機能」が参照している郵便番号は必ずしもこの「大口事業所個別番号」に対応しているわけではありません。入力された郵便番号が対応していない「大口事業所個別番号」であった場
JavaScriptでパスワード強度のチェックを行うチュートリアル＆サンプル:phpspot開発日誌
JavaScriptでパスワード強度のチェックを行うチュートリアル＆サンプルがNettutsで公開されています。 次のように、ボックスに適当な文字列を入れることで、リアルタイムにパスワード強度が分かります。 長さ、大小英数字チェック、数字、シンボルによるボーナスと、ペナルティによってスコア付けして点数を決めているようです。 単純に、サイトのパスワード決定の際の強度チェッカーとして使えそうですね。 詳細は以下のエントリを参照してください。 Build a Simple Password Strength Checker - Nettuts
JS習作：フォームにフォーカスしたらデフォルトテキストを消す | Blog hamashun.com
サンプルページ 概要 11月1週目のJavaScriptです。やりたかった事は以下。 input要素にデフォルトテキストが表示されていて、文字色は薄い フォーカスすると、デフォルトテキストが消えて文字色を濃く変える 何も入力せずにフォーカスを外すとデフォルトテキストが再び現れる 何か入力してあれば、再びフォーカスしても何も起こらない ソースコード jQueryを使用しています。 $(function () { var searchInpt = $("#searchText"); var defaultVal = searchInpt.attr("value"); searchInpt.css("color","#999"); searchInpt.focus(function() { if (searchInpt.attr("value") == defaultVal) { $(this)
jQuery Safari Searcher « Design it. Develop it. Use it.
I want to share my jQuery search box plugin looks like Safari one. It is really easy to customize skin by drawing new sprite. Moreover, it have all the same functionality as a real one and a bit more — incremental search with loader. I hope it would help to you guys. Below some demos and examples of usage. Download sources Simple search: <div style="width: 200px"> <!-- ← Define searcher width by s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]セレクトボックスをアクセシブルでスタイリッシュにするスクリプト -Stylish Select
selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js :: 5509