タグ

関連タグで絞り込む (6)

タグの絞り込みを解除

formに関するrysterのブックマーク (27)

  • 複雑な検索式等を入力する際に最適なUIを提供できる「structured-filter」:phpspot開発日誌

    structured-filter Demo 複雑な検索式等を入力する際に最適なUIを提供できる「structured-filter」 名前が〜で、電話番号が○○、という検索式を入れたい場合に、沢山の入力欄をずらずらと並べるのはスマートではないですね。 こちらのjQueryプラグインを使えば、複雑な検索式をいい感じのUIで入力できます 関連エントリ フォームにて入力の入力UIを追加できる「jquery.signfield」 フォーム要素をフラットかつ全デバイスで統一させるjQueryプラグイン「Formplate」 フォームでの洗練されたアイテムへのタグ付けUI実装jQueryプラグイン「taggingJS」

  • 検索ページ等で詳細な検索条件を指定する際のUIが作れるjQueryプラグイン「QueryBuilder」:phpspot開発日誌

    jQuery QueryBuilder 検索ページ等で詳細な検索条件を指定する際のUIが作れるjQueryプラグイン「QueryBuilder」 検索というと、特定の項目にマッチするなど、より細かな検索ができたりするのは便利で、そのための分かりやすいUIが作れます。 関連エントリ Google画像検索風のイメージギャラリーが作れる「jQuery.GI.TheWall.js」 リストのインクリメンタル検索を可能にするjQueryプラグイン「HideSeek」 iOSの検索窓風UIが作れるjQueryプラグイン「jquery-searchinput」 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flexselect」

  • 入力フォームのプレースホルダーを使ってはいけない

    入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル

    入力フォームのプレースホルダーを使ってはいけない

  • そこそこユーザビリティの高いフォームを作った


    そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです︵サーバ側スクリプト
    ryster
    ryster 2014/01/20
    リンク

  • [JS]セレクトボックスの使い勝手をパワーアップするスクリプト -Select2

    セレクトボックスを美しいデザインにするだけでなく、各アイテムに画像を配置したり、タグやプレースホルダテキストや検索の対応、セレクトボックスのコントロールなど、さまざまなことができるjQueryのプラグインを紹介します。 Select2 GitHub [ad#ad-2] Select2の対応ブラウザ Select2のデモと実装 Select2の対応ブラウザ Select2の対応ブラウザは下記の通りです。 IE8+ ※IE7はz-indexを使った一部のものにバグあり。 Chrome8+ Firefox3.5+ Safari3+ Opera10.6+ Select2のデモと実装 各デモとともに実装方法を紹介します。 jQueryは1.7+推奨で、1.4.2から対応しています。 デモ：ベーシック（上：既存、下：Select2適用） まずは、ベーシックなデモから。 下記のシンプルな記述で、既存のセ

  • フォーム周りのエレメントのデザインを見やすいインターフェースに変更できるjQueryプラグイン・jNiceItと、似たようなやつ何個か


    どこかで使いたいなと思ってメモ。フォーム で良く使うラジオボタンやチェックボックス などのデザインを割りと簡単に見やすいデザ インに変更できるjQueryプラグインです。 この手のプラグインは沢山あるので選択肢の 一つとして、ですが、個人的には使いやすい 印象でした。 昨日に続き、今日もフォームのスクリプト。今日はフォームデザインを変更できるやつです。IE6だけちょい崩れるけどそれ以外は共通したデザインに変更できます。 ラジオボタンとかチェックボックスを画像に置換するプラグインですかね。なので、デザインの変更は基本的に画像とCSSを少し変えるだけです。尚、画像の指定もcssで行います。 左が普通で、右がリア充ですね。シンプルでいい感じです。見た目がいいほうが愛されるんですねきっと。世知辛い世の中ですこと。 マークアップも特別なことはしなくて済むのも楽かも。デザインの変更は基本的に画像を変え
    フォーム周りのエレメントのデザインを見やすいインターフェースに変更できるjQueryプラグイン・jNiceItと、似たようなやつ何個か

  • 独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン:phpspot開発日誌


    Screw Default Buttons! | Custom Radio Buttons and CheckBoxes 独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン。ONかOFFの状態の2枚の画像を用意してjQuery関数で初期化するだけで簡単に独自デザインのものが作れます。 実装コード例。超簡単ですね。 追加のCSSでよりスタイルを独自に変えることも可能です 関連エントリ 独自デザインのスクロールバーにする際に使えるjQueryプラグイン﹁jScrollbar﹂ Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン﹁Custom Youtube Player﹂ 独自デザインselectボックス実装時に使えそうなjQueryプラグイン﹁EasySelectBox﹂ CSS3で独自デザインの綺麗なボーダーを実装する例

  • jQueryベースのWebフォームライブラリ「jFormer」


    WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ﹁jFormer﹂です。 ﹁jFormer﹂はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、入力データのレジュームなど、細かな機能も標準で備わっており、フォームの開発の時間を短縮してくれます。 詳しくは以下 基本的にフォームの部分はphpで作られており、デザインをCSSで、動きなどはjavascriptを利用しています。 多彩なデモは﹁Demos – jFormer﹂からご覧いただけます。またベーシックなコンタクトフォームのつくり方は﹁Installation and Documenta
    jQueryベースのWebフォームライブラリ「jFormer」

  • フォームのバリデーション用jQueryプラグインいろいろ+α


    個人的なメモ。普段さほど使うことが 無いので、必要な時に探すのに時間 掛からないようにまとめておきます。 沢山ある必要はさほど無いのですが、 勉強用も兼ねていろいろと数を揃えて おきました。 お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。 どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js Validationの日本語Ver.です。シンプルなので使い勝手いいですね。日付の確認用プラグインも派生していますので合わせて。
    フォームのバリデーション用jQueryプラグインいろいろ+α

  • [JS]フォームの項目をユーザーが追加・削除できるようにするスクリプト -SheepIt!


    複数の電話番号や住所などを入力できる、フォームの項目をユーザーが追加・削除できるようにするjQueryのプラグインを紹介します。 SheepIt! - Form Cloning Jquery Plugin デモページ [ad#ad-2] SheepIt!の特徴 フォームのアイテムを追加したり、削除することができます。 フォームのアイテムの数をコントロールできます。 フォームのコードは通常のHTMLで実装します。 フォームのアイテムにデータをロードすることができます。 コールバック機能を備えています。 SheepIt!の実装 前述のデモのHTMLは、下記のようになります。 HTML フォームの箇所は通常のHTMLです。 <!-- sheepIt Form --> <div id="sheepItForm"> <!-- Form template--> <div id="sheepItForm

  • [CSS]フォームのボタンのクリック時の点線を消去するスタイルシート


    Firefoxで、フォームのボタン︵submit, button︶のクリック時に表示される点線を消去するスタイルシートを紹介します。Remove Dotted Outline For Buttons in Firefox Using CSS デモページ︵当方作成︶ [ad#ad-2] この中途半端な点線はFirefox固有のもので、Chrome, Safari, Operaでは表示されず、IEではボタンの内側に表示されるものです。 スタイルシートのスタディ HTML シンプルにsubmitボタンを使用します。 <input type="submit" />

  • IDEA * IDEA

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

    IDEA * IDEA
    ryster
    ryster 2010/11/26
    リンク

  • [CSS]モバイル端末にも対応、ブラウザごとに異なるデザインのフォームを美しくするフレームワーク -Formalize CSS


    既存のフォームにも簡単に適用できる、各ブラウザ、各OSや各モバイルごとのフォームの異なるデザインのギャップを埋め、美しくするフレームワークを紹介します。Formalize CSS デモページ [ad#ad-2] サポートしているOSはWindow, Mac OS X, Linux、ブラウザはIE6/7/8/9, Firefox, Chrome, Safari, Opera、モバイルはAndroid, iOS(iPhone, iPad)などです。 下記のキャプチャは、Windows XP + Firefox 3.6のものです。 他の各ブラウザやモバイルでの表示は、元記事の下部﹁Screenshots﹂に掲載されています。Formalize CSSFormalize CSS‥ノーマル時の表示
    ryster
    ryster 2010/10/22
    リンク

  • 使いやすいフォームを実装するための10のポイント | コリス

    ユーザーが混乱しない、使いやすいフォームを実装するために気をつけたい10のポイントをNoupeから紹介します。ブログのコメント欄を対象にしたものですが、フォーム全般にも言えることが多く含まれています。 Comment Form Styling: Examples and Best Practices下記に10のポイントとその概要を紹介します。 サイトではキャプチャなども豊富に掲載されています。入力フィールドはシンプルにたいていのフォームには複数の入力フィールドがあります。 フォームの目的はユーザーからの適切なフィードバックを得るのが目的なので、必要無いものや関係無い入力フィールドは削除します。ラベルは分かりやすく入力するユーザーの立場にたって、ラベル付けします。 例えば、「コメント」と単に記すだけでなく、「コメントを残してください」「あなたの意見をどうぞ」などです。また、「URL」などは用

    ryster
    ryster 2009/10/16
    リンク

  • [JS]フォームの入力フィールドにアイコンを表示するスクリプト -Sexy Forms

    フォームの入力フィールドにアイコンを表示するなど、9種類のスタイルのデザインを簡単に適用できるスクリプトをCoders.meから紹介します。

    ryster
    ryster 2009/10/11
    リンク

  • 長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプル:phpspot開発日誌


    長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプルが公開されています。 長々としたフォームは利用者が入力を躊躇してしまいますが、ウィザードにすることでその抵抗を軽減できますね。 この変換を自動で行えるjQueryのサンプルが公開されています。 図1‥長いフォーム スクリプトを実行すると次のようにウィザード形式に変換できます。 図2‥ウィザード形式︵Step1〜Step3︶ チュートリアル記事になっているので、見ながら簡単に実装できます。 フォームを作成する時は、参考にしてみてもよいでしょう。 次のエントリにて具体的手法が見れます。 Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

  • チェックボックスやテキストボックスをトゥーン調にするサンプルフォーム:phpspot開発日誌

    Styling checkboxes and inputs チェックボックスやテキストボックスをトゥーン調にするサンプルフォーム。 普通のフォームを次のようにCSSでスタイリングするサンプルが公開されています。 デモページ なかなか味がありますね。 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法 CSSでクールなINPUTフォームを作成するサンプル CSSベースのクールなフォーム、サンプル集

    ryster
    ryster 2009/07/15
    リンク

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


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

  • JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌

    Opensource - AJAX - Jqtransform - jQuery form plugin JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」。 jqTransformを使えば、味気ないフォームも以下のとおり、１行で綺麗に整形することが可能です。 ↓↓↓↓↓↓↓↓ 必要なライブラリを読み込んだら、１行で整形 $('form').jqTransform({imgPath:'/img/'}); ↓↓↓↓↓↓↓↓

  • http://www.designwalker.com/2009/03/form-design-2.html

    http://www.designwalker.com/2009/03/form-design-2.html
  • 1 2 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.