プラグイン不要！ jQueryで複数のセレクトボックスの選択肢を連動させる
プルダウンに親子関係 select要素にjQueryを使って親子関係を持たせる方法をご紹介します。 まずは実際に下記にサンプルを用意しました。 実際のソース HTML 都道府県のoption要素にdata-valがあることに注目してください。 同じ地方に属する都道府県は同じ値になっています。 <select class="parent" name="foo"> <option value="" selected="selected">地方を選択</option> <option value="北海道・東北">北海道・東北</option> <option value="関東">関東</option> <option value="甲信越・北陸">甲信越・北陸</option> <option value="東海">東海</option> <option value="関西">関西</opt
【jQuery】選択した商品の合計額を表示させる自動計算フォームを作る | できることからコツコツと
商品購入や見積もりフォームで、ページ上に現在の合計額を表示させたいというリクエストにヒイヒイ言いながら対応したあの日のメモ。 ○○円以上で送料無料とか、割引価格に切り替え用のチェックボタンも対応可能。 こんなフォーム（デモあり） 商品（項目）ごとに値段（数値）があって、セレクトボックスで個数を切り替えると合計金額が自動的に更新されるフォームです。 こういうやつ。 一応デモページ <div class="form-box"> <p class="buy_itemu_menu" data-price="2500">人力飛行機 <span class="kakaku">(定価 2,500円／会員価格 2,300円)</span> </p> <select name="人力飛行機数量"> <option data-num="0" value="0個" selected>0個</option> <o
Googleフォームで自動返信システムをサクッとつくる (1/4)
Google Apps Script（以下、GAS）を使えば、Googleのアプリケーションにちょっとした機能を加えて実用的なサービスに仕立てられます。今回は、問い合わせフォームを簡単に作成できる「Googleフォーム」を使って、問い合わせメールへ自動で返信するシステムを作ります。 【フォーム作成】問い合わせフォームを作る Googleフォームは、問い合わせやアンケートなどのフォームを簡単な操作で作成できるWebアプリケーションです。まずは企業サイトを想定した、シンプルな問い合わせフォームを作成してみましょう。 1. https://drive.google.comにアクセスしてGoogleドライブを開きます。「作成」ボタンをクリックし、「フォーム」を選んでください。
MW WP FormでURL引数をもとに動的にvalue値を設定する方法
MW WP Formに用意されている各フォーム項目のショートコードにおいて、value値が設定可能ものに関してはフィルターフック「mwform_value_xxx」が使用できます。 フィルターフック「mwform_value_xxx」を使うことで、URL引数で渡された値をもとに動的にvalueを設定することができるので、テキストフィールドやラジオボタンの初期値を設定する、のようなことが可能です。 フォーム項目のショートコードを記述するときにvalue値が設定されているとフックが実行されないので注意してください。 例 フォーム ... [mwform_text name="hoge"] ... functions.php /** * @param String $value valueの初期値 * @param String $name name属性値 */ function my_mwfo
レスポンシブデザインのフォームを設計するときに気をつけたい7つのステップ | UI改善ブログ by f-tra
単一のウェブページの装飾やレイアウトを、画面の横幅サイズにあわせて変化させる「レスポンシブ・ウェブデザイン」。 管理するファイルがひとつで済む、どんなデバイスにも対応できる等大きなメリットがありますが、同じコンテンツをどんなデバイスサイズでも快適に閲覧できるようにデザインするのは至難の業です。 とくにユーザビリティが重要な役割を担う入力フォームにおいては、どのような工夫をしたら良いのでしょうか。 本日の記事では、レスポンシブ・ウェブデザインのフォームを設計するときに気をつけるべきポイントについて考えてみたいと思います。 ※今回は新たにフォームを設計する前提で書いていきますが、もちろん、すでにお持ちのフォームを改善する場合でも活用していただければ幸いです。 ステップ1: 独自レイアウトを用意する EFOのテクニックのひとつに、フォーム専用のレイアウトを用意するというものがあります。 これはフ
チェックボックスをチェックしないとサブミットできないボタン omnioo lab. record | オムニオラボ WEB, LAMP, jQuery, ITのお話
jQueryを使ってチェックボックスにチェックを入れないとサブミット（送信）できないボタンを作る方法です。最近、個人情報保護法関係でやたらとこの機能を使ってまして、何度も何度も使うので面倒なので、コピペで使えるようにしたいと思います。実は私もどっかでコピペしてきたもののような気がします。やり方はあんまり複雑じゃないので、指示通りに設置すればOKです。Sample jQuery読み込みます。 以下のソースを所定の場所に貼ります。 チェックボックスのinputのnameとjQueryのソース内のname要素を合わせます。(*1)コードではprivateかprivateではじまるものにする。 おわり。エラーが出た際（つまり、チェックボックスにチェックが入っていなかった時）のアクションはelse以下に適当に書きます。 <script type="text/javascript" src="/js/
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
フォームの「ガッカリ離脱」を防いでコンバージョン率UP！ 送信後エラー・ゼロ作戦／15か条の7 | 勝手にEFO分析-エントリーフォーム改善
フォームの送信ボタンをクリックしたとき、エラーが表示されたらガッカリしてしまいますよね。そうしたことが原因の「ガッカリ離脱」を防ぐために、エラーがない状態になるようにユーザーを導き、確認画面、完了画面に進んでもらうことが、完了率アップには極めて重要です。今回は、入力項目ごとに、ユーザーが入力した内容がフォームの求める形式になっているようにするための改善ポイントをご紹介します。 この記事では、入力フォームを改善して入力完了率を上げる！エントリーフォーム最適化15か条の【第7条】「入力エラーをリアルタイムで伝えるべし」をご紹介します。リンクをクリックするとこの記事下のまとめに飛びます。 「ガッカリ離脱」を未然に防いで、入力完了率アップをしようエントリーフォームにひと通り入力を終えて「確認／完了ページ」へ進もうとしたのに、エラーメッセージがでてガッカリした経験はありませんか？ ガッカリしたユーザ
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
フォームの入力内容をリアルタイムにチェックするサンプル
「jQuery-Validation-Engine」を使って、フォームの入力内容をその都度自動チェックし、ミスがあればバルーンで警告を表示します。 入力項目がフォーカスを失った際と、「チェック＆送信」ボタンがクリックされた際に、各入力内容のチェックが行われます。 ※各入力欄を何も触らずに、とりあえず末尾の「送信」ボタンを押してみて下さい。一括してチェックが行われます。 ※エラーメッセージのバルーンは、バルーン自体をクリックすると消えます。 «解説記事に戻る テキスト入力欄 【基本】 ◎必須項目： (必須) 【文字数の指定・制限】 ◎最低6文字入力： (必須) (オプション) ◎最大12文字入力： (必須) (オプション) ◎5～10文字の範囲で入力： (必須) (オプション) 【文字種の制限】 ◎英数字のみを入力（0～9、A～Z、a～zのみ）： ◎英字と空白のみを入力： ◎数字のみを入力（
【jQuery】フォームのリアルタイムエラーチェックはjQuery Validation Engineプラグインが簡単
Home › プログラミング › 【jQuery】フォームのリアルタイムエラーチェックはjQuery Validation Engineプラグインが簡単 フォームのエラーチェックでいちいち読み込みが走るのはサーバ側もユーザーさんもストレスかかりますよね？ クライアント側でリアルタイムにエラーを表示させることでフォームのコンバージョン率も上がるみたいですし、ユーザーさんのイライラも軽減できる。 これは導入しておいて損はないですね。 フォームエラーチェックのjQueryプラグインをいくつか調べましたが、その中でもポップアップでエラーを表示してくれる「jQuery Validation Engine」が気に入りましたので、その使い方を紹介したいと思います。 プログラミングやWordPressを習得するのに一番近道な方法とは？
Formalize CSS - Teach your forms some manners!
Break the cycle of inconsistent form defaults, style forms with impunity! Feel free to ping me on Twitter A Familiar Tale We've all been there. You are nearly done with a beautiful site design, only to arrive at the task we all dread – form styling. Depending on operating system and browser, default form elements can look okay or horribly disfigured. Cargo cult adherents say that styling form ele
これはいい！ドロップダウンに画像と説明文を追加·ddSlick MOONGIFT
ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 見よ、この格好いいドロップダウン！テキストに加えて画像が表示できるようになっています！ ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん！ もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応！ デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
[ablogcms]エントリーの作成中にブラウザの「戻る」を防ぐ - CMS専門 Web開発者ブログ
エントリーの作成中に不用意にブラウザの「戻る」ボタンを押してしまうと、ユニットの情報が消えてしまうことがあります。 ということでエントリー編集中にページを移動しようとするとアラートを出すスクリプトを書いてみました。 使い方 preventback.js 上記のページからファイルをダウンロードするなりコピペするなりしてください。 ページ内のどこでも良いのでjsを読みこめばokです。 おすすめの構成 /path/to/theme/js/preventback.js にファイルを保存 /path/to/theme は使っているテーマの場所です。そこにjsというフォルダを作ってファイルを置いておきます。 /path/to/theme/admin/entry/field.html を編集 /admin/entry/field.html はエントリーのカスタムフィールドを定義しておくテンプレートです。
入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
Trust Formのα版ファーストリリースです。 « カクニンプラスのweb日誌
2011年の９月から開発を進めていたWordPressにコンタクトフォームを設置できるプラグイン「Trust Form」をα版にて公開します。 α版ですので、まだ、お客さんのところへの納品などは避けてくださいね！ 使って頂いて、フィードバックなどございましたら@horike37までご連絡頂けますと幸いです。あ、こんなフックほしい！とかもうれしいです！対応するWordPressのバージョンは3.3以上になります。このプラグインには特徴としては以下の３つです。 洗練されたユーザインタフェース 入力、確認、完了の3ステップのフォーム 投稿されたお問い合わせの管理機能 ダウンロード 今日(2012/1/5)でまだWordPressの公式ディレクトリへの申請が受理されてないのでGithub上で公開しています。 右側のリンクよりダウンロードして下さい。Trust Form – Github 設置
jQueryでテーブルの行ごとクリックしてチェックボックスにチェックを入れられるようにする
jQueryでテーブルの行ごとクリックして チェックボックスにチェック出来るよう にするTipsです。ユーザーがデータを 見ながらフォームを送信する際に、分か りやすくしてあげよう、という目的です。 行ごとクリッカブルにする、みたいな感じ。 ちょっとサーバー移転作業もあるので適当な記事が日々続きますけど・・まもなく移転完了します。 Sampleサンプルです :hover使うのでIE6だけ色が変わりませんけど、チェックはクロスブラウザで可能です。 コード$(document).ready(function() { $('input[type=checkbox]').click(function() { var t = $(this).prop; if(t('checked')) t('checked', ''); else t('checked', 'checked'); }); $('ta
HTML の label タグに必ずつけたい CSS
CSS に1行加えるだけで ラベルまわりがとってもわかりやすくなる。 「そんなん当たり前」という人もいるかもしれないけど Gmail やら Twitter やらのログイン画面を見たら 実装されてなかったので一応。 label というのはフォームの部品とセットで使うやつで、 ある部品とその項目名を結びつけるやつね。 ↓このようなチェックボックスがあるとき 次回から自動的にログイン ↓こんなふうにラベルを指定しておくと <input type="checkbox" id="rememberme"> <label for="rememberme">次回から自動的にログイン</label> テキスト部分とチェックボックスが関連づけられるので テキストをクリックした時も チェックボックスにチェックが入るようになりますね。 ここをクリックでチェック入れられるよ 小さいチェックボックスにマウスカーソルを
【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました！ | HTML5でサイトをつくろう
【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました！ ウェブ・ページのフォームではテキスト入力フィールドやチェックボックスなどのユーザーインターフェースを使用しますが、HTML5ではユーザーインターフェースがさらに追加されたことで注目されています。 特にinput要素ではさまざまなtype属性が追加されました。今回は新たに追加されたtype属性をソースをみながら表示を確認していきたいと思います。 HTML5でinput要素に追加されたtype属性 下記に各属性ごとの特徴をピックアップし、現状で対応しているブラウザの画面キャプチャを掲載しました。だだし、現状(※2011年9月)の対応状況になります。 search 『type=”search”』の主な特徴 1行テキストの入力フィールドで表示され検索向けであることを表します。 input要素の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...