スマホでのフォーム入力をシンプルに分かりやすくできる「Leader.js」:phpspot開発日誌
pea/Leader.js GitHub スマホでのフォーム入力をシンプルに分かりやすくできる「Leader.js」 最初は１個のインプット。入力していけば次々表示され、まず何をやるべきなのかが分かりやすいフォーム作りに活用できます。 入力したら次にフォーカスが移動。この要領でどんどん入力していけます あと何項目か？表示してあげてもよさそうな気もしますが、工夫次第で便利なフォーム作りに役立てられそうです 関連エントリ マークアップにValidateルールを定義してフォームバリデーションできるjQueryプラグイン「Ketchup」 BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」
タッチデバイス対応、フォームのデザインをミニマルやフラットにしたり機能を強化するスクリプト -iCheck
フォームのラジオボタンとチェックボックスをミニマルやフラットやダークなど、今時のデザイン風に変更したり、コールバック関数や入力をコントロールできるjQueryのプラグインを紹介します。 iCheck iCheck -GitHub iCheckの特徴 iCheckのデモ iCheckの使い方 iCheckの特徴 1KBで超軽量 クロスブラウザ対応 IE7+, Firefox2+, Chrome, Safari3+, Opera9+ スマートフォン・タブレットなどのタッチデバイスをサポート iOS, Android, BlackBerry, Windows Phone キーボード操作をサポート タブ、スペース、矢印キー、他のショートカット HTML/CSSベースでカスタマイズが簡単 Retina対応のスタイルを6種類用意 チェックボックスとラジオボタンは15のオプションでカスタマイズ 8つのコ
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
最近のデザイントレンドを取り入れた美しいデザインのフォームのPSD素材のまとめ
最近のデザイントレンド、フラット、サークル、ミニマル、ブラーなどを取り入れ、ディテールにこだわった美しいデザインのフォームのPSD素材をPixelsDailyから紹介します。
jQueryの独自セレクトボックスを作成するjQueryプラグイン「jQuery.customSelect()」:phpspot開発日誌
jQuery Custom Select Box Plugin - jQuery.customSelect() jQueryの独自セレクトボックスを作成するjQueryプラグイン「jQuery.customSelect()」 次のように、カスタマイズしたセレクトボックスを生成できます。非対応ブラウザも素のselectが出るので安心。 CSSを使って自分好みのデザインにするのが簡単にできそうなのが特徴です $(element).customSelect();と初期化するだけで使えて、CSSも通常、オープン時、フォーカス時等の場合に応じて設定できるので便利。 関連エントリ selectボックスを超カッコよくするjQueryプラグイン「Chosen」
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
フォーカスで伸縮するクールな検索窓のデモ:phpspot開発日誌
Expandable Mobile Search Form フォーカスで伸縮するクールな検索窓のデモが公開されています。 場所を取らず、そこまで目立たせたくないような場合にコンパクトに収納できそうです。 非フォーカス状態 フォーカスすると以下のようになります。アニメーションが効いてて良い感じ もう一つのデモは、単なる虫眼鏡アイコン フォーカスで普通の検索窓に。 IE8移行とその他ブラウザなら動作するみたいでほぼ実用に使えます 関連エントリ 次世代の検索フォームを作成するjQuery＆CSS3サンプル リストを検索＆ソートできる7KBのJavaScriptライブラリ「List.js」 クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」
機能一覧│ステップメールCGI 楽メールPRO
ステップメール機能 予めメール文と日程を設定しておくと、個々の登録者毎のスケジュールで自動的にメールが送信される非常に便利な機能です。 「メールセミナー」「フォローメール」等、通常では手間のかかる作業を完全自動化することができます。 登録時の自動返信 楽メールで作成したフォームから登録があると同時に設定したメールが返信されます。 これにより、通常のメールフォームとしての利用や簡易的な商品購入フォームにも利用できます。 個別情報差込 メールの件名や文中に「○○様」といった各登録者の名前が入ると、非常に親近感が増します。 件名や文中に指定のタグを入れることで、このようなOne to Oneマーケティングが手軽に行えます。 また、お名前だけでなく、全ての登録情報を挿入できなすので、お問い合わせフォームやアンケートフォームといった形で幅広く応用が可能です。
[CSS]CSS3を使って美しい検索フォームを実装するチュートリアル
CSS3の角丸やグラデーションを少しだけ使って、美しい3種類（ライトグレー・ダークグレー・グレー）の検索フォームを実装するチュートリアルを紹介します。 デモページ 実装 HTML デモ3種類のHTMLは基本的に全て同じで、親のdiv要素のclassが異なるだけです。 <div class="lighter"> <form> <span><input type="text" class="search rounded" placeholder="Search..."></span> <span><input type="text" class="search square"><input type="button" value="Search"></span> </form> </div> <div class="dark"> <form> <span><input type="text"
入力箇所も手書き風にしたコンタクトフォームを制作するチュートリアル
メモ状のデザインのフォームに、ユーザーが入力した箇所のフォントをブラウザのデフォルトから変更し、手書き風にしたコンタクトフォームを制作するチュートリアルを紹介します。 デモページ：日本語は設定されてないため、ブラウザのデフォルトフォント 実装 フォームの制作はHTML+CSSだけでなく、メモ状のUIを作るPhotoshopのチュートリアルも掲載されています。 ここでは、デザイン部分は省略して、以下フォームの実装を紹介します。 HTML: 基本構造 まずは、HTML5を使ってフォームを配置する前の基本構造から。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pen & Paper Form</title> <link href="style.css" rel="stylesheet" /> </head>
チェックボックスで選択したグループに入 | PHP & JavaScript Room
<script type="text/javascript"> function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、 テキストボックスを有効化（false） */ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=""; }else{ /* チェックボックスの場合 */ frm.elements[name+i].checked=false; } /* 無
入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス
jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。 How to Create A Multi-Step Signup Form With CSS3 and jQuery デモページ フォームの下部にある「プログレスバー」の存在もユーザビリティ的に見逃せない存在です。 [ad#ad-2] フォームのデモ フォームは全部で4つのステップで構成されており、さまざまなスパイスが含まれています。 2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。 フォームの実装 HTML：基本構造 フォームの基本構造は、4つのステップをそれぞれdiv要素に格納します。 <div id="container"> <form action="#" method="
ITクオリティ シンプルで効果的なjQueryドロップダウン式ログインフォーム
Twitterで使われているような、ドロップダウン式のログインフォームを手軽に導入したいと言う人のための簡単コード。 jQueryで手軽に導入 サンプルデモ ダウンロードページ 2011/03/09(水) 09:14:31| jQuery | トラックバック:0 | コメント:0
[JS]使いやすく高性能なフォームが簡単に設置できるフレームワーク -jFormer
簡単なログインフォームをはじめ、お問い合わせフォーム、コメント用フォーム、ショッピングカート用フォーム、アンケート用フォームなど多種多様なタイプが用意された、バリデーション機能も備えたフォームのフレームワークを紹介します。 jQuery Form Framework - jFormer [ad#ad-2] jFormerの特徴 クライアントサイドのバリデーション サーバーサイドのバリデーション AJAXを使ったページ変更機能 CSSベースの簡単なカスタマイズ Botの防止（CAPTCHAは無し） 入力データのレジューム機能 フィールドのロック機能 フォームのテンプレートも多数用意 jFormerのデモ デモには、さまざまな実用的なフォームがあります。
iframeやtextareaをドラッグ＆ドロップでリサイズできるようにするjQueryプラグイン「TextAreaResizer」:phpspot開発日誌
iframeやtextareaをドラッグ＆ドロップでリサイズできるようにするjQueryプラグイン「TextAreaResizer」 2011年02月25日- jQuery textarea resizer plugin iframeやtextareaをドラッグ＆ドロップでリサイズできるようにするjQueryプラグイン「TextAreaResizer」 textareaのリサイズはよくありますが、iframeもリサイズできます。初期化すると、iframeの下にいかにもドラッグ＆ドロップできそうなハンドルが付きます。 ドラッグ中は要素の中身がしろっぽくなります。 ドロップ完了＆リサイズ完了 テキストエリアも対応してます。 関連エントリ テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」
ログインフォームに大切な7つの要素と重要な1つの機能
ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。 元記事では下記のCSS3で実装されたフォームもダウンロードできます。 フォームのタイトル このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。 非メンバー用のリンク 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。 ラベルとフィールド ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。 パスワードを忘れた場合 これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。 また、配置する
[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
検索フォームや見出しなどエレメントのデザインを集めたサイト -Elements of Design | コリス
Elements of Designは、ブログなどのウェブサイトでよく使うエレメントのデザインを集めたサイトです。
今日から現場で使えるjQueryのフォーム関連プラグイン15選
Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。 Create a Progress Bar With Javascript | Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが％で確認できる。 overset - jVal - jQuery Form Field V
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]フォームのボタンのクリック時の点線を消去するスタイルシート