タグ

formに関するjunhirabayashiのブックマーク (17)

  • jQueryを使って簡単実装!かなりカッコいいログインフォーム作成のチュートリアル:phpspot開発日誌

    Making A Cool Login System With PHP, MySQL & jQuery ? Tutorialzine jQueryを使って簡単実装!かなりカッコいいログインフォーム作成のチュートリアル。 ページのヘッダーにあるログインボタンを押すと、ニュイーンとログインフォームが降りてくるというカッコいいログインフォームの実装演習になってます。 ログインボタンを押す ヘッダーからそのままログインフォームが降りてきてそこからログイン可能です。 ソースコードのダウンロードも可能です。 関連エントリ ログインフォームのデザイン集100種 Twitter風のドロップダウンボックスなログインフォーム作成チュートリアル 超クールなログインフォームを作成するチュートリアル

    junhirabayashi
    junhirabayashi 2009/10/20
    jQueryを使って簡単実装!かなりカッコいいログインフォーム作成のチュートリアル。 ページのヘッダーにあるログインボタンを押すと、ニュイーンとログインフォームが降りてくるというカッコいいログインフォームの実
  • 都道府県選択するやつ。

    メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北

    都道府県選択するやつ。
    junhirabayashi
    junhirabayashi 2009/07/16
    select要素でマークアップ済みの都道府県のやつ
  • アイトラッキングから検証した、使いやすいフォームの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) ラベルは左寄せにすると、よ

    junhirabayashi
    junhirabayashi 2009/06/05
    Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22~33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。
  • デザイナー・コーダー必見!使えるform関連jQueryプラグインの数々 | バシャログ。

    こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに!かつ操作性を向上!できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック(バリデーション)が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日語用は別途作成し、使用することが可能です。 jQuery

    デザイナー・コーダー必見!使えるform関連jQueryプラグインの数々 | バシャログ。
    junhirabayashi
    junhirabayashi 2009/05/29
    WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかっ
  • http://www.designwalker.com/2009/03/form-design-2.html

    http://www.designwalker.com/2009/03/form-design-2.html
    junhirabayashi
    junhirabayashi 2009/03/26
    お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせないフォーム。 今回は、そんなフォームをデザインする方法をいくつかまとめてご紹介します。 JavaScriptやCSSを使えば結構いろいろなことができそ
  • 会員登録の敷居を下げる入力フォームの作り方(PC編) - キャズムを超えろ!

    エントリは、20〜40代PCをある程度使いこなしているユーザー向けの会員登録フォームの設計について述べたものである。ケータイサイトは含まないし、シニアも対象としていない。シニア向けUIについては(古いエントリだが)こちら "ユーザーID"と"メールアドレス" 減ってはきたものの、ユーザーIDとメールアドレスの両方を取るWebサービスがいまだに結構ある(ex. Remember the milk)。はてなYahooAuctionのように「ユーザーIDがニックネームに相当するコミュニティサイト」は除くとして、ユーザーIDを一般客に公開しないにも関わらずIDとメルアドの両方を取る意図がわからない。 ユーザーIDとしてメールアドレスを使うメリットは 会員登録フォームの入力必須箇所が1個減る 好みのIDが取れない事件が防げる "ID忘れ"による機会損失/幽霊会員が減る 流石に自分のメアドは忘れ

    会員登録の敷居を下げる入力フォームの作り方(PC編) - キャズムを超えろ!
    junhirabayashi
    junhirabayashi 2008/04/11
    減ってはきたものの、ユーザーIDとメールアドレスの両方を取るWebサービスがいまだに結構ある(ex. Remember the milk)。はてなやYahooAuctionのように「ユーザーIDがニックネームに相当するコミュニ
  • AjaxMail:Ajaxを活用したフリーPHPメールフォーム

    ウェブサイトを動的なページに変更したい、機能を拡張したいと思ったら、 Ajaxのツールを使って簡単に機能を拡張してみよう。 ウェブサイトを運営するとき、サイトを見たユーザーからコメントを残してもらうことがあります。 また、企業なら連絡方法としてメールの送信ができるように、メールフォームを用意していると思います。 こうしたウェブサイトのメールフォームをAjaxを使って導入することができます。

    junhirabayashi
    junhirabayashi 2008/03/27
    AjaxMailはAjaxを活用したフリーPHPメールフォームです。 具体的には (1) ewebのPHPメールフォーム にカスタマイズを加え (2) Kawa.netのAjaxZip2.0 住所検索機能を付加し (3) AdobeSpry で項目をチェック
  • 検索フォームや見出しなどエレメントのデザインを集めたサイト -Elements of Design | コリス

    Elements of Designは、ブログなどのウェブサイトでよく使うエレメントのデザインを集めたサイトです。

    junhirabayashi
    junhirabayashi 2008/01/23
    Elements of Designは、ブログなどのウェブサイトでよく使うエレメントのデザインを集めたサイトです。
  • Libelablog » Focus Field

    Focus Field Greasemonkey どうも,kei-s@libelaboです. 実は当初はGreasemonkeyでこれを実現しようとしていました.「せっかくGreasemonkeyももらったし!」と意気込んでみたものの,どうも上手くいかなくて断念しちゃいました.Greasemonkeyでの実装があれば,ぜひソースを見て勉強したいです. キーボードショートカットでfirstfield - cameraLady ということで,作りました. Install Focus Field (ver 0.1) デフォルトでは,「Ctrl+/」を押すたびにページ内のフォームを順番にフォーカスします. キーバインドは変更できますが,「Shift+何か」にするともちろんその文字が打てなくなるので,「Ctrl」の部分は固定にしています. また,「Ctrl+;」「Ctrl+:」などでは動作

    junhirabayashi
    junhirabayashi 2007/12/20
    デフォルトでは,「Ctrl+/」を押すたびにページ内のフォームを順番にフォーカスします. キーバインドは変更できますが,「Shift+何か」にするともちろんその文字が打てなくなるので,「Ct
  • AJAXを使った素晴らしいCSSフォームの47のサンプル | コリス

    noupeにエントリーされている、AJAXを使った素晴らしいCSSのフォームの47のサンプルの紹介です。

    junhirabayashi
    junhirabayashi 2007/12/14
    noupeにエントリーされている、AJAXを使った素晴らしいCSSのフォームの47のサンプルの紹介です。
  • よみがえる | ZEROFACES

    概要 よみがえるはウェブサイトのフォームの内容を保存、復元するツールです。 製作の動機 お問い合わせ等のフォームに入力した内容を誤って消してしまい、また一から入力し直している時のあの残念な感じを撲滅しよう! 仕様 保存したフォームの内容があれば復元してから保存を開始します 5秒ごとに、前回保存した内容と異なれば保存します 5分に一度は必ず保存します 保存したフォームの内容はページを離れて10分間保存します 課題 5秒ごとの保存のため完全な保存、復元ができていない 強制的に復元するためUIで復元するか問うべきか? ダウンロード よみがえる(yomigaeru.zip) ファイル構成 WWWサーバで公開するファイル yomigaeru.js 各種ライブラリと体を読み込むためのブートストラップ yomigaeru_main.js よみがえる体 prototype.js クロスブラウザ対応用

    junhirabayashi
    junhirabayashi 2007/11/19
    よみがえるはウェブサイトのフォームの内容を保存、復元するツールです。 製作の動機 お問い合わせ等のフォームに入力した内容を誤って消してしまい、また一から入力し直している時の
  • フォームのパスワード強度を表示できるExt拡張JSライブラリ「Ext.ux.PasswordMeter」:phpspot開発日誌

    フォームのパスワード強度を表示できるExt拡張JSライブラリ「Ext.ux.PasswordMeter」 2007年11月13日- Ext.ux.PasswordMeter These forms do not do anything and have very little validation. フォームのパスワード強度を表示できるExt拡張JSライブラリ「Ext.ux.PasswordMeter」。 Ext.ux.PasswordMeterを使えば、次のように、パスワードフィールドの入力に対して強度をメーターで表示することが可能です。 パスワードの強度を表示すれば、利用者のパスワード強度の強化に繋がりますね。 関連エントリ Ext2.0のアルファ版がリリース あのJavaScriptライブラリ「Ext」のバージョン2「Ext 2.0」のプレビュー

    junhirabayashi
    junhirabayashi 2007/11/13
    フォームのパスワード強度を表示できるExt拡張JSライブラリ「Ext.ux.PasswordMeter」。 Ext.ux.PasswordMeterを使えば、次のように、パスワードフィールドの入力に対して強度をメーターで表示するこ
  • フォームのデザインいろいろ - DesignWalker

    フォームのデザインいろいろ - DesignWalker
    junhirabayashi
    junhirabayashi 2007/10/25
    ブログのコメントや、お問い合わせなどで使われるフォーム。 フォームをCSSできれいにデザインされているブログやウェブサイトをよく見かけます。 っちゅうわけで、本日はきれいにデ
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    junhirabayashi
    junhirabayashi 2007/10/12
    これはかなり便利です。今風のスタイリッシュなフォームをブラウザ上でがんがん作っていくことができます。作ったフォームはHTML+画像+CSS+Javascriptでダウンロードできるので自分のサ
  • MovableTypeにお問い合わせフォームを設置

    MovableTypeにお問い合わせフォームを設置 MovableTypeにお問い合わせフォームを設置できるメールフォームプラグインをご紹介。 インストール ダウンロードしたMailForm_1_30.zipを解凍すると、MailFormというディレクトリが作成されます。 FTPでMovableTypeをインストールしたサイトにアクセスして、解凍したMailFormディレクトリをpluginsディレクトリにアップロードします。 MailForm内のmt-mail-form.cgiのパーミッションを変更します。(755とか700に) テンプレートの作成 ヘッダーメニューのデザイン > テンプレート から「ブログのテンプレート」へ。 『インデックステンプレートを作成』から新規にテンプレートを作成します。 メールフォームを表示したい箇所に以下のような記述を行います。 出力ファイル名(これがお問い

    MovableTypeにお問い合わせフォームを設置
    junhirabayashi
    junhirabayashi 2007/10/05
    MovableTypeにお問い合わせフォームを設置できるメールフォームプラグインをご紹介。 インストール ダウンロードしたMailForm_1_30.zipを解凍すると、MailFormというディレクトリが作成されます。
  • 離脱率90%は当たり前!?最後の難関『入力フォーム』の離脱を改善する

    『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

    離脱率90%は当たり前!?最後の難関『入力フォーム』の離脱を改善する
    junhirabayashi
    junhirabayashi 2007/08/08
    資料請求や会員登録など、明確なコンバージョンを持つサイトの多くが『入力フォーム』を用意しています。みなさんはこの入力フォームでの離脱率がどの程度かご存知ですか?ドキッとす
  • 入力値を簡単に制限する「yav」とかフォーム入力チェックいろいろ

    メール送信フォームやらアンケートの回答フォームやら、とにかくネット上には様々なフォームが存在しています。入力する値が間違っていると「エラー」表示を出すタイプのモノが多いですが、出される側から見れば「そんな値を入力できるようにするなよ!」「8文字までしか受け付けないんだったら、最初から入力可能な文字数を8文字に制限しておけよ!」「エラーが出たらどこを再入力すればいいのかわかりやすく表示してくれ!」などと思うこともしばしば。 というわけで、この「yav」は入力エラーチェックだけでなく、最初から入力できる値を制限したり、数字であれば範囲指定したり、入力チェック後にフォームの色を変えてわかりやすくしてくれたり、とにかくいろいろ便利な入力チェック機能を簡単に組み込むことができるオープンソースで開発されているJavaScriptファイルです。入力チェック後のエラー表示もポップアップウインドウやページ内

    入力値を簡単に制限する「yav」とかフォーム入力チェックいろいろ
    junhirabayashi
    junhirabayashi 2007/07/24
    「yav」は入力エラーチェックだけでなく、最初から入力できる値を制限したり、数字であれば範囲指定したり、入力チェック後にフォームの色を変えてわかりやすくしてくれたり、とにかく
  • 1