The 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 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
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=
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
Feedbackボタンをクリックするとサイド からフォームのパネルをスライドさせる jQueryプラグイン・contactableをご紹介 致します。情報元は去年の記事ですが、 自分が使いたかったのでメモ的にエントリ。 ユーザーにも優しいのでお勧めです。 わざわざページ移動せずともパッと送信出来るのでユーザビリティにも繋がりそうです。何より、インストールして使うので日本語に出来るのは大きいですね。テキストを日本語に直したデモをご用意しました。 デモ ※メールはダミーにしているので実際に送信は出来ません。 フォームテキストを日本語に変えるには梱包されているjquery.contactable.packed.jsの中を変更します。ちょっと横長なので探し難いですが。。デモでは以下のように変更しました。 (function($){$.fn.contactable=function(options)
55 Spectacular Login Form Designs すぐれたログインスクリーンを 55 つも集めたリンク集。特に目立つのがページの中央に大きくログインフォームを表示させているのが多数を占めています。まるで、OS やデスクトップアプリケーションのようなログインスクリーンのようですね。今後、独自 ID だけではなく、OpenID を導入した際に見やすいフォームを実現させるかが課題です。Digg が良い感じですが、他の見せ方も模索されていくでしょう。 100 Outstanding Login Forms こちらは倍の 100 のログインスクリーンを集めたリンク集。上記のまとめとかぶっているサイトも多数ありますが、ビジュアルよりラベルの付けた方のバリエーションをたくさん見ることが出来るのはこちら。ラベルとインプットフィールドの位置関係がフォームの書きやすさにどれだけ関わるのか検証
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
Internet, Medienproduktion, Programmierung, E-Learning
既存のフォームにも利用できる、テーブルを使用しないスタイルシートベースのフレキシブルなフレームワークをRobert M. Sandy Jr.から紹介します。
【javascriptでラジオボタンを無効化する方法】2つの質問に回答してもらうアンケートがあります。選択肢が4つあって、第1問で「もっとも好きなもの」、第2問で「もっとも嫌いなもの」をラジオボタンで一つずつ選択してもらうのですが、第1問と第2問で同じ選択肢を選択できてしまうと矛盾が生じます。そこで、第1問でラジオボタンどれか一つを選択すると、第2問でその選択肢だけ無効化するjavascriptを設置しようと考えました。第1問と第2問のnameは当然変えますが、選択肢4つのvalueは第1問と第2問で共通のものを使いたいと思います。また、第2問の方を先に選択してしまった場合、同様に第1問の同じ選択肢が無効化するようにしたいのです。ラジオボタン無効化のサンプルコードを参考に作ろうとしたのですが、うまくいきません。どのように書けばいいか、ご教示いただければ助かります。
HTMLテーブルを使ってデータを表示する時、テーブルの列や行数は多くなると、表示しにくくなります。Super Tablesは、テーブルの表示を見やすくなるJavaScriptライブラリです。 動作環境 ◇ ブラウザー:Firefox 2+, Internet Explorer 5.5+, Safari 3+, Opera 9+ and Chrome (Windows環境テスト済み) ◇ ライセンス:MIT Style License 機能・特徴 ◇ テーブルのヘッダ固定できる ◇ 縦横スクロールバーによる列数、行数の多いテーブルも表示しやすくなる。 ◇ 左にある列を複数固定可能 ◇ スキン・カスタマイズ可能(CSS)
今回はjQueryを使って、「問い合わせフォーム」にバリデーション(検証)機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。 バリデーションルールをclass属性で設定 「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか?」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス(確認)」に入力されたテキストが同じか――をチェックします。
入力フォーム(テキスト: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
もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き) 第10回今すぐできる!ユーザビリティを向上させるフォーム操作実践(2):プラグインを使わずにバリデーションを実装 バリデーションをプラグインを使わずに実装する フォームは主にコンバージョンに直結する場合が多いと思いますので、ユーザビリティを向上させる、つまりユーザーに最後まで入力してもらえるようなフォーム作りはとても重要です。 どのような機能を持って使いやすくするのか、にはそのサイト自体のターゲットユーザー層を認識した上で盛り込む必要がありますが、どんな方法で使いやすくできるのかは知っておいて損はありません。 前回は、ラベル要素を利用して、直感的に分かりやすくする方法を紹介しましたが、今回・次回にかけては少し突っ込んでJavaScriptで行うバリデーション(※1)を実装してみたいと思います。 入力された文字列をチェックす
登録や申し込みページの入力フォームにおいて、郵便番号を入力すると住所欄が自動入力される機能は、ユーザの入力負荷を軽減する便利な機能です。実はこの機能、正しく郵便番号を入力してもある条件下ではエラーとなってしまうことがあることをご存知でしょうか。今回は入力フォームでの「郵便番号」の意外な盲点についてご紹介します。 ただ、「会社」で用いられている郵便番号は一般的な郵便番号と異なる場合があります。 郵便番号は、特定の企業(1日の配達量が一定量を超えるような事業所)に対して「大口事業所個別番号」という事業者向けの郵便番号を割り当てており、該当する企業はこの割り当てられた郵便番号を使用しています。 しかし、郵便番号から「住所を自動入力する機能」が参照している郵便番号は必ずしもこの「大口事業所個別番号」に対応しているわけではありません。入力された郵便番号が対応していない「大口事業所個別番号」であった場
JavaScriptでパスワード強度のチェックを行うチュートリアル&サンプルがNettutsで公開されています。 次のように、ボックスに適当な文字列を入れることで、リアルタイムにパスワード強度が分かります。 長さ、大小英数字チェック、数字、シンボルによるボーナスと、ペナルティによってスコア付けして点数を決めているようです。 単純に、サイトのパスワード決定の際の強度チェッカーとして使えそうですね。 詳細は以下のエントリを参照してください。 Build a Simple Password Strength Checker - Nettuts
サンプルページ 概要 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)
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ページを開く