HTML5のプレースホルダをもっと良くする「JVFloat.js」:phpspot開発日誌
maman/JVFloat.js GitHub HTML5のプレースホルダをもっと良くする「JVFloat.js」。 inputの中にグレーで入力するもののヒントを表示できるプレースホルダですが、入力しちゃうと、あれ、これなんだっけ？となる場合がありそうです。 入力数が多くて、曖昧な入力が多いと、使い勝手が悪くなってしまうかも。というわけで、プレースホルダはそのまま表示しつつ、テキストを入力すると、入力したものの上にラベルでヒントを表示してくれるようにするJSライブラリです。 内容を入力すると、ヒントが小さくなって入力したものの上に表示されて分かりやすい また一歩、フォームが進化したかもしれないと思いました。 関連エントリ フィールドへの適切な入力文字数を分かりやすく教えてくれるjQueryプラグイン「wChar」 次世代のクレジット番号入力を提供するプライスレスなJS「Skeuocard
ログインフォームをクリエイティブに演出できるpsdデザイン集「15 Creative Free Login Form with PSD」
TOP > WebService > ログインフォームをクリエイティブに演出できるpsdデザイン集「15 Creative Free Login Form with PSD」 ユーザーが自分のページにログインするための玄関・ログインフォーム。シンプルになりがちですが、時にはデザインにもこだわりたいもの。そこで今回紹介するのが、デザイン性の高いログインフォーム素材を集めた「15 Creative Free Login Form with PSD」です。 ログインフォームにクリエイティブ性を持たせた、使いやすいデザイン素材が豊富に紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■GraphicsFuel.com | Login form PSD アナログチックなボックスが可愛らしいデザイン。ポップなサイトをよりクリエイティブに演出
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」:phpspot開発日誌
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」 2011年01月25日- jQuery File Upload Demo 複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」。 「Upload files」ボタンを選択するとダイアログが開き、複数ファイルを一括して選択。その後すぐアップロードが始まり、プログレスバーを通して進捗を表示、アップされたファイルのサムネイルも次のように表示してくれるという、ファイルアップロードのフルセットを提供してくれます。 アップされたファイルの横に表示されているごみ箱アイコンをクリックすればすぐさま削除も可能。 HTML5ベースなプラグインなのでFlashも不要です。 アップロードの受け口としてphpのソースも同
HTML5 Formsを学ぼう - jsdo.it - Share JavaScript, HTML5 and CSS
<div class="slide"> <h1>HTML5 Formsを学ぼう</h1> <p>HTML5から新たに使えるようになったフォーム周りの機能について調べたことをざっくりとまとめたメモです. <p>作成日: 2010/09/28 <p>書いた人: 8th713(<a href="http://twitter.com/8th_713" target="_blank">Twitter</a>) </div> <div class="slide"> <h2>対象ブラウザ</h2> <p>Windows版の以下のブラウザで調べた結果を基準にしています. <ul> <li>Google Chrome 7.0.517.17 dev <li>Safari 5.0.2 <li>Opera 10.62 </ul> <p>Firefox4b6はフォーム周りの新機能にほとんど対応してないっぽいので除外
livedoor Techブログ : 変な CAPTCHA だっていいじゃないか にほんじんだもの
こんにちは。開発のシニアスペシャリストをやっております、通称「にぽたん」こと谷口公一です。 私たちが日頃使っているネット上のサービスで、web 上のフォームの最後等に「ここに書かれている文字を入力してください」のように、絵に描かれた文字を目で読み取って入力するよう求められる場合があります。 言うまでもありませんが、これは通称「キャプチャ (CAPTCHA)」と呼ばれているもので、画像データは、人間ならそれを肉眼で認識して入力が行なえますが、機械には少し難しくなるため、フォームに文字を入力しているのが、機械ではないことを判定するためにこういう仕組みが存在します。 世の中にある CAPTCHA は、やたらと字がグチャグチャで読み取るのが非常に困難なケースもあります。 これは当然、安易に、白地に黒い文字を書いたような単純な画像を CAPTCHA に用いれば、それを解読するシステムは簡単に開発出来
長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプル:phpspot開発日誌
長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプルが公開されています。 長々としたフォームは利用者が入力を躊躇してしまいますが、ウィザードにすることでその抵抗を軽減できますね。 この変換を自動で行えるjQueryのサンプルが公開されています。 図１：長いフォーム スクリプトを実行すると次のようにウィザード形式に変換できます。 図２：ウィザード形式（Step1〜Step3） チュートリアル記事になっているので、見ながら簡単に実装できます。 フォームを作成する時は、参考にしてみてもよいでしょう。 次のエントリにて具体的手法が見れます。 Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)
スタイリッシュなWEBフォームの実装例いろいろ:phpspot開発日誌
25 Stylish Examples of Web Forms スタイリッシュなWEBフォームの実装例がいろいろと紹介されており、一部ご紹介。 フォームというと簡単なデザインで済ましてしまう場合が多いと思いますが、こうしたところにもこだわっていると力の入れ加減が伝わってきますね。 デザイン自体もなかなか難しいと思いますが、参考にして綺麗なフォームが作れそう。 Alexandru Cohaniuc 壁に貼ったみたいなインタフェースでオシャレ Tea Round App 角丸で立体的なフォームがナイス Grooveshark 子ダイアログ風のポップアップフォーム Substrakt Matt Pixelight Creative 全部見る デザインを学んだ上で、ユーザビリティについても考え、あくまで利用者視点にたった使いやすいフォームを作りたいものですね 関連エントリ CSSでデザインされた
ステキングなフォームデザインまとめ
Previously I put together a showcase of interesting and creative blog comment design. It was a fun exercise and fascinating to see the different approaches taken to the standard comment format. Wildvuur Going through this process, I was also struck by the creativity of the design work that went into some of the comment forms on these sites. As I’ve been traversing the web since, I’ve been noting s
Ajax＆PHPでアニメーションするコンタクトフォームを作成するサンプル:phpspot開発日誌
Creating an Ajax contact form - from start to finish :: ENHANCE Ajax＆PHPでアニメーションするコンタクトフォームを作成するサンプル。 デモページを見る 必須入力値を入力しないとエラーになったりする機能はついているみたいだけど、入力値チェックはないみたい。 送信時にフォームが子気味よくアニメーションするため、ちょっとした訪問者への驚きや、フォームデザインに懲りたい人にはよさそう。 HTMLもクリーンなので、CSSでデザインしやすくなってます。 関連エントリ CSSでユニークなコンタクトフォームを作るチュートリアル 携帯サイトのフォーム設計ポイント CSSを使ってファンシーなボタンを作成するテクニック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォーム入力の進捗をプログレスバーで表示できる「Fort」:phpspot開発日誌
クレジットカード入力補助フォームの実装ができるjQueryプラグイン「Creditly.js」:phpspot開発日誌
いろいろなサイトのフォームのログインを集めた -Login Forms Design Showcase