お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
【jQuery】フォームから様々な値を取得する方法まとめ | tagamidaiki.com
jQueryはとても便利なプラグインです。 JavaScriptの普及を助けたといっても過言ではありません。 jQueryのおかげで煩雑なコードをかかずに綺麗なコードで色々なものが作れるようになりました。 今回は少し忘れやすい、jQueryでフォームから値を取得する方法をまとめていきます。 テキスト よく使われる1行のテキストボックスです。 これはとても簡単でform要素に .val() で値を取得することが出来ます。 HTML <form id="test-form"> <input type="text" name="test-form" value="56"> </form> JavaScript var formValue = $('#test-form [name=test-form]').val(); var val = Number(formValue) || 0; // N
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
[JS]かっこいいインタラクションを伴ったスマフォに最適な省スペース用フォームのデモ
先月の終わりにdribbbleで公開された時に、うわっかっこいいな！と思いチェックしていたコンセプトにデモとして動作するスクリプトが開発されたので紹介します。 まずは、dribbbleでのコンセプトから。 [GIF] Mobile Form Interaction フォームの入力欄の各ラベルをプレースホルダーテキストとして表示し、タップして入力する時に、アニメーションでそのテキストがふわりと上に移動し小さく表示されます。 これはスマフォでは特に重要な省スペースとしても優れており、また入力後にそれが何の項目であったかユーザーに伝えることができます。 で、そのコンセプトにインスパイアされて開発されたスクリプトが「JVFloat.js」です。 デモのキャプチャ ※デモはダウンロードファイルに含まれています。 アニメーションのブラッシュアップやコードの最適化など宿題があるそうですが、実装はこんな感
jQueryでformを操る【nameの値を取得する/クリアする】 - シンプルシンプルデザイン JavaScript
form周り、これまでは要素を特定してループさせやすいようにidやclassを付与して、JavaScriptが結構な行数を使って面倒だったけど、jQueryを使えば「さくッ」と取得できて便利。今回は、nameの値を取得する、にフォーカスします。 input type=”text”の値が変更するたびに処理を実行する $('input[type="text"]').on('input', function () { }); inputのvalue値 サンプル <input type="" name="sample" value="" /> type=”text” $('[name=sample]').val(); type=”radio” $('[name=sample]:checked').val(); チェックがない場合は「undefined」が返ってきます（Firefox 23で確認）。
入力フォームの全角・半角を勝手に変換してくれるJavaScript
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
【jQuery】入力パーツを一味違う見た目にするjQueryプラグイン | バシャログ。
パシフィック・リムは吹き替えが見たい。minamiです。 サイトの入力画面は基本的なinput要素やtextarea要素を使うことも多いかと思いますが、一味違う見た目にすることができるjQueryプラグインを集めてみました。 扱いにくいセレクトボックスを使いやすくする『Chosen』 セレクトボックスを使いやすくしてくれるプラグインです。検索ボックスや複数選択など、UIデザインの参考にもなりますね。 Chosen エクセル風のデータグリッドを作れる『Handsontable』 エクセルのような表形式の表示を簡単に作ることができます。かゆいところに手が届くカスタマイズやTipsが紹介されています。 Handsontable 日付だけでなく時刻もピックできる『pickadate.js』 デートピッカーライブラリはいろいろありますが、モバイルフレンドリー、レスポンシブ、軽量をうたっています。日付
jQueryでチェックボックスのチェック状態を調べる方法 - 小さい頃はエラ呼吸
photo credit: Alan Cleaver via photopin cc 2013.06.14追記 コメント欄の指摘を受けて、記事を一部修正しました。 はじめに jQueryでチェックボックスのチェック状態を調べる方法をまとめてみました。 Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)posted with amazlet at 14.02.01西畑一馬 アスキー・メディアワークス 売り上げランキング: 6,298 Amazon.co.jpで詳細を見る jQueryのバージョン jQuery v1.10.1 jQueryでチェックボックスのチェック状態を調べる方法１ jQueryでチェックボックスのチェック状態を調べるには、以下のようなコードを書きます。#check1はチェックボックス要素のIDを指定します。$("#check1
jQueryプラグインChosenの使い方 - 小さい頃はエラ呼吸
はじめに selectボックスをスタイリッシュにしてくれるjQueryプラグインChosenの使い方をまとめてみました。 Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)posted with amazlet at 13.06.12西畑一馬 アスキー・メディアワークス 売り上げランキング: 4,610 Amazon.co.jpで詳細を見る デモ 以下のサイトでChosenを体験することができます。 Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better Chosenの基本的な使い方 １．jsライブラリをインクルードします。 <script type="text/javascript" src="http://ajax.googleapi
【jQuery習作】テキストエリア入力・保存後反映＆再編集の切り替え
COOKPADさんのレシピ登録ページにあるような、テキストエリアに入力・保存後反映され、再編集もできるようなものをjQueryで作ってみました。 サンプル＆ソース サンプルはこちら （IE8以上、Chrome、Firefox、Safariで動作確認済です） 挙動の流れは以下です。 テキストクリック ↓ テキストエリアに切り替え ↓ 保存＆再編集。取消をクリックすると内容はリセットされる。 HTML $(function() { var myTextBox = $(".textBox"); var myDefault = $(".default"); var myEdit = $(".editArea"); var myItem = $(".item"); var myPreserve = $(".preserve"); var myBecome = $(".become"); var my
タグ入力やコンタクト連絡先の入力に便利なUIを実装できる「Selectize.js」:phpspot開発日誌
Selectize.js タグ入力やコンタクト連絡先の入力に便利なUIを実装できる「Selectize.js」 次のような良い感じのデザインのタグ入力補完機能付きタグ入力UI、同様にコンタクトリストでも使えるUIが作れます Bootstrapと組み合わせても違和感なさそうなリッチなUIがいいですね 関連エントリ jQuery用のよく使うUIコンポーネントセット「ZinoUI」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 超クールなjQueryUIテーマ「Delta」
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
jQuery（などの）プラグインを使ってフォームにバリデーションを楽々追加する | Stronghold Archive
どうもこんばんは。お久しぶりのDaikuharaです。 今回はフォーム関連シリーズ記事として、バリデーション用のjQueryプラグインをまとめておきます。８つほどあります。 フォームの使いやすさやデザイン性を向上させる33の方法 これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。 28. バリデーション用jQueryプラグインまとめ validate.js 送信クリック時にバリデートを実行します。エラー項目をまとめて表示するタイプ。 Tasty Form Validation リアルタイムでバリデートを実行します。 デフォルトのエラー表示にかわいらしい吹き出しのスタイルが用意され
画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」:phpspot開発日誌
画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」 2013年01月18日- Image Picker 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」。 好きな画像を選んでもらう、というようなインタフェースを考えた時に、画像をそのまま表示してクリックして選ぶというのが当たり前のインタフェースですが、これをHTMLで簡単にできるようにするのはちょっと面倒。 というわけで、こちらのプラグインを活用すれば、selectボックスを簡単に画像選択UIに変換出来ます selectのoptionにdata-img-srcといった感じで画像のパスを定義しておいてあげればOK Pinterest風なレイアウトに出来るのも今時のライブラリ感がありますね 関連エントリ フォームをカッコよくするjQuery
jQueryによるフォーム部品操作のレシピ - むつらつれづれ
テキストボックスやラジオボタンなどのフォーム部品は、論理モデルとしては単純なnameとvalueの組み合わせであるものの、jQueryを以ってしても画面上では統一的に扱えずに意外と苦労する。忘れがちなので纏めてみた。 フォーム部品共通 フォーム部品（のjQueryオブジェクト）を取得する var obj = $('#target'); // id指定 var obj = $('.targets'); // class指定 var obj = $('input[@name=xxx]'); // name指定 テキストエリア、リストメニューなど同一ドキュメントで唯一なものにはユニークなidを振っておき、チェックボックスやラジオボタンなど同一のname要素で複数存在するものにはそれらで共通のclassを振っておくか、name要素で指定するのが無難か。 テキストボックス（input[@type=t
jQueryでformのアクションを変更する ~ PhoEniBiR～DevDiary
2012/02/27 jQueryでformのアクションを変更する 14:48:00 Motoi Nishiu No comments メールで送信 BlogThis! Twitter で共有する Facebook で共有する Concept一つのフォーム内に複数のsubmitボタンを配置しても、遷移先のURLを動的に変えられるようなソース。 javascript/** * changeActionURL.js * (Need jQuery) * * フォームのdefaultButtonクラスをクリックした際に、もしもactionURLが属性としてあれば、その画面に遷移する */ $(document).ready(function(){ $('[actionURL]').click(function(){ if($(this).attr('actionURL') != ""){ $('
クールなタグ入力＆オートコンプリート機能付きフィールド実装jQueryプラグイン「TextExt」:phpspot開発日誌
クールなタグ入力＆オートコンプリート機能付きフィールド実装jQueryプラグイン「TextExt」 2012年01月23日- jQuery TextExt Plugin クールなタグ入力＆オートコンプリート機能付きフィールド実装jQueryプラグイン「TextExt」。 テキストフィールドに入力するとオートコンプリートしつつ次のようにタグ風に入力できるフィールドが実装出来ます 実装コードは次のようにtextareaを初期化するだけで、補完用アイテムも配列かajaxで指定できるみたい。 こうしたインタフェースが最適な部分って最近のＷＥＢサイトでは結構ありそうですが、覚えておくと素早く簡単に実装できますね 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 紙芝居のようなアニメーションでスライドするスライダー実装jQueryプラグイン「Innov
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kotarok/jQuery.zip2addr at c7965f424bd304e90103bcd87f53bdce15a9513c
マークアップにValidateルールを定義してフォームバリデーションできるjQueryプラグイン「Ketchup」:phpspot開発日誌
jQuery, checkboxやradioがチェックされているかを調べる
