[B! フォーム] uhamのブックマーク

input[type=file]をCSSで加工する – ハック｜オープンソース高速化AMI「kousoku AWS」

表示サンプルはこちら。 http://jsdo.it/goto_jp/rWcL HTMLはこちら。 <div class="uploadButton"> ファイルを選択 <input type="file" onchange="uv.style.display='inline-block'; uv.value = this.value;" /> <input type="text" id="uv" class="uploadValue" disabled /> </div> CSSはこちら。 .uploadButton { display:inline-block; position:relative; overflow:hidden; border-radius:3px; background:#099; color:#fff; text-align:center; padding:10

uham 2015/10/05

リンク

分かりやすいWeb入力フォームのための十戒 | POSTD

1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。そのため余白があるのであれば、ラベルを表示すべきです特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ

uham 2015/06/25

フォーム

リンク

シンプルなソースで拡張性の高いバリデータ『Ketchup Plugin』 – creamu

バリデータをフォームに簡単に組み込みたい。そんなあなたにおすすめなのが、『Ketchup Plugin』。シンプルなソースで拡張性の高いバリデータです。使い方としては、まずはjsを読み込んでfunctionを記述。次に、フォームをプレーンにXHTMLでコーディングした後、inputタグやtextareaタグに、「class=”validate(required, username, rangelength(3,20))”」といった指定を加えることで、バリデータ機能を実装することができます。「jquery.ketchup.messages.js」を編集してUTF-8で保存することで、日本語のメッセージを出力できますね。メッセージが一カ所にまとまっていて、とても編集しやすいです。バリデータのオプションはclassにカンマで区切って追加できるので、使いやすそうですね。一度見てみてくだ

uham 2012/06/19

リンク

外壁塗装見積レンジャーの脱毛日記

ピンキープラスというのはバストアップのためのサプリメントなのですが、その効果は胸を大きくするだけではないのです。他にもいろいろな効果が期待でき、それを実感している人もいるので知っておいてほしいと思います。例えば、ピンキープラスを飲んでから気分が落ち着くようになったとする口コミがあります。バストアップサプリメントなのになんでそういう効果があるのか？というと、ピンキープラスにそういった成分が含まれているからだと思います。ロディオラロゼアという成分がピンキープラスには入っていて、これはリラックス効果を生むとされているのです。したがって、ピンキープラスにはちゃんとリラックス効果を生む仕組みがあるので、口コミで言われている部分はその人がたまたまそう感じたとかではなくて、ちゃんと想定されている効果になると言えるのではないでしょうか？ピンキープラスを使って、毎日の気分が少しでも落ち着けばそれ

uham 2012/01/31

リンク

ユーザーが使いやすいフォームを設計するのに役立つチップス -Form design crib sheet

Free Download: Cheat Sheet For Designing Web Forms [ad#ad-2] チートシートはPDF, PSD, Omnigraffle形式で配付されており、内容を簡単に紹介します。 Simple form field フォームのラベルは入力フィールドの左側に配置し、すぐに理解できるようシンプルな文言にします。 Buttons ボタンはプライマリとサポートの2種類用意し、プライマリボタンはより目立つよう大きくて異なるデザインのものにします。 Optionals fields 任意入力の箇所でよく利用される「*」印は、全てのユーザーに理解されるサインではありません。可能であれば、はっきりと任意であることを明記します。 Support text 入力をサポートするテキストは、ユーザー目線で分かりやすい文章にします。 Help text アドバイスするテ

uham 2011/10/12

フォーム

リンク

[JS]地味なフォームを簡単にかわいらしいデザインにする -Ideal Forms

画像を一切使用せず、既存のフォームをかわいらしいデザインに変更するjQueryのプラグインを紹介します。チェックボックスのチェックも画像ではないですよ。 Ideal Forms デモ [ad#ad-2] Ideal Formsのデモフォームの外観は画像は使用せずスタイルシートでデザインされているので、自分用のカラーに変更することも可能です。デモでは、3つのスタイルが用意されています。スタイル：Comix Ideal Formsの主な特徴フォームに美しい外観を与える軽量（14Kb）のスクリプト。カスタマイズも簡単で、非常に使いやすいです。画像は必要なく、スタイルシートでデザインを適用しています。 [ad#ad-2] Ideal Formsの実装ファイルのアップロード以下の2つをフォルダごとアップロードします。 css/idealForms js/idealForms.js

uham 2011/09/21

リンク

フォームのselect要素内をインスタンス検索出来るようにし、美しいデザインにも変更できるjQueryプラグイン・Chosen

結構便利そうだったのでご紹介。フォームの select要素内に羅列されたoptionから、入力するだけで結果を表示するインスタンス検索を可能にするスクリプト・Chosenです。表題にはjQueryプラグインと書きましたが、このスクリプトにはjQueryプラグインとprototype の2つが用意されています。 optionの量が多くなってしまうことはよくあるので、この手のユーザビリティ向上系スクリプトは多く存在しますが、これはかなり便利ではないかなと思いました。似たようなのもうあるんですかね。通常のselectボックスでプルダウンさせると検索窓も表示、キーワードを入れるだけでソートしてくれます。いわゆるインスタンス検索が可能になるので大量のoptionが存在してもユーザーの利便性を全く損ないません。デモ見たほうが早いですね。※追記：日本語だとFirefoxのみ動かないみたい。英

uham 2011/07/20

リンク

フォームの完遂率は、フォーム前の設計で3倍以上変化する、というお話 - Feel Like A Fallinstar

ユーザビリティ系の記事でも何かと人気なのがフォーム周りのお話。たぶん最終成果に一番近いところにあるから、何だと思います。でも、一番近いから一番影響が大きい・・・という（ほぼ全国共通の）認識は実はそうでもなかったり。「フォーム前の設計」でフォームの完遂率なんていくらでも変化する、というお話を少ししたいと思います。実際にプロジェクトで起こった話を、1つ最近の安直なランディングページ（※この言葉は嫌いですが便宜上こう書いておきます）なんちゃらの流行（？）のせいで、こんな画面が増えています。とりあえずサービスの売りがドカンドカンでっかいボタンが画面に何度も何度も現れるページが長くて字がでっかい代理店さんがこの1ページを色々ごにょごにょ変えたりしていました。で、その画面を、しっかりと情報を掲載して来訪者がじっくり納得できるようなページ（群）にしたところ起こったのが下の図のような結

uham 2010/01/12

リンク

なんだかちょっと使いにくいかもしれないフォームのデザイン集

ワンダフルなデザインだけど、ちょっと使いにくいかもしれないブログのコメント欄をWebDesignDevから紹介します。 24 Wonderful But Different Blog Comment Form Designs 上記で紹介されているものから、いくつか紹介します。

uham 2009/10/15

フォーム

リンク

スタイリッシュなフォームを作るときに見るべきエントリまとめ

Form Design フォームデザインさてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。流れ的にはインスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。インスピレーションまずは、スタイリッシュなフォーム。これらは、webデザイン全体がフォームデザインとなっているまとめです。まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。くしゃくしゃっとしたような紙の一部にフォームが設置されている。こちらもメモに名前を書くかのごとく。深海に光がさす感じのイメージ。シンプルイズベストなレイアウト設計がなされている。１，２，３，