ラジオボタンでグラフィカルなトグルボタンを作ってみる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） HTMLでトグルボタンを実装するにはinput[type=radio]が近道ですが、 リッチな雰囲気にする為に見た目を制御したい。今回はそんなお話です。 「ラジオボタンがすでにグラフィカルでは？」という細かいつっこみは置いといて頂き、 本稿ではより自由度高く外見をカスタマイズする方法を記していきます。 ラジオボタンでなくともトグルボタンはJavaScriptで作れますが、 択一で選択する仕組みをわざわざ自前で実装するよりも、 その為に作られた物をその為に使って実現してみます。 マークアップ 例えばこんなHTMLとCSSを書きます。 血液型を選択する簡単なトグルボタンです。 HTML <form class="question"> <h1>あなたの血液型は？</h1> <ul class="bloodtype-list"> <li
[CSS]フォームを入力する際、気持ちいいアニメーションで入力欄をちょっとだけ目立たせるスタイルシートのテクニック
ユーザーがフォームの入力欄をフォーカス・アクティブした際、アニメーションを加えて入力欄をちょっとだけ目立たせるスタイルシートを紹介します。 アニメーションでおっと思わせるだけでなく、入力欄が複数並んでいる時にアニメーションで目立たせるとフォーカスを失わずに入力できる効果もありますね。 Some :active & :focus effects 使い方は簡単、CSSファイルを外部ファイルとして記述し、input要素にclassを加えるだけです。CSSファイルは上記ページの下部「Download」からダウンロードできます。 エフェクトのカラーを変更したい場合は、CSSファイルで一括置換するだけでOKです。 HTML <head> ... <link rel="stylesheet" type="text/css" href="active_and_focus.min.css" media="a
かっこいいグリッドベースの入力フォームが作れる『Grid forms』が良さげ！ | バンクーバーのうぇぶ屋
フォームのレイアウトっていざ作ろうとすると結構迷う事多いですよね。フォームのデザインはもちろん、どうしても入力項目が多くならざるを得ない時なんかは、考える事は底知れずって感じです。 今日はそんな時にもしかしたら便利ってなるかもしれないJS／CSSフレームワークの一つ『Grid Forms』をご紹介させて頂きます！ フォームデザイン苦手ーって人も、ちょっとこの辺から触ってみても良いかもですね〜。 Grid Forms Grid FormsのGithubからファイルをダウンロードしてみると、既にサンプルファイルが用意されているので、それ見ながらちょっとお話した方がいいかもっすね。 サンプルを開くと以下のようなフォーム例が表示されると思います。 なんか紙の入力欄みたいですね。ネットに慣れて居ない人へのアプローチも、もしかしたら良さげかな？ 試しにちょっと作ってみましたが、とにかく楽。これが物の３
フォームでユーザーにヘルプをツールチップで実装するjQueryプラグイン・jQuery FormHelp
割と需要ありそうなので備忘録ついでにご紹介。ツールチップで実装する、テキストのフォームヘルパーです。「こういう具合に入力してね」みたいなのを明示するやつ。 フォームのそれぞれの項目にヘルプを作るスクリプトです。マウスホバーやフォーカスでツールチップを出す、というもの。プラグインで実装するほどのものでも無いかもですけど、これはこれで楽そう。 動作サンプルです。HTMLを普通にマークアップするだけで自由にツールチップ内に実装できるのは楽ですね。 コード 本体とプラグインを読み込みます。 $.formHelp();コールします。 <input id="input-email" type="email"/> <span class="helptext" data-for="#input-email"> <p>ここにツールチップ</p> <hr> HTMLが自由に使えます <ul> <li>One<
フォームで戻るボタンを押して戻った後にリセットが効かない。 - hi-kick.design blog
入力フォーム作ってて、確認画面用意したとき 「確認画面で不備に気づき、戻って修正するときに、メンドクサイからリセットボタン押して新規に入力しなおす。」 正直こんな操作する人は稀なのですが、そうしてくださいとの要望でしたので、そうしてみることに。 「リセットボタン置いとけばいい」ということで <input type="reset" name="Submit" value="リセット"> で済めばいいのですが リセットボタンは「初期値に戻す（リセットする）」とのことなので 最初に入力画面を開いた時には「初期値」は未入力の状態だから見た目上リセットされて 確認画面から戻ってきた時は既に値が入ったときが「初期値」になってしまうので、リセットボタンを連打してもダメなんですね；； んで「リセット」じゃなくて「クリア」する方法はWebクリエーターのひとりごとさんの方法が簡単でした function cl
高機能ライブラリ「jQuery」とそのPlugin「Validation」 - すぎゃーんメモ
非常に高機能で便利なJavaScriptライブラリとして評判の「jQuery」をちょっと触ってみた。 jQuery Pluginが豊富に存在する、というのも人気の理由のようで。 formの入力チェックをしてくれる「Validation Plugin」というものを使って試してみた。 bassistance.de » jQuery plugin: Validation 忘れてしまわないうちにメモっておこう。 最も簡単なサンプル それぞれ上記リンクからダウンロードして、「js」というディレクトリに放り込んでおいた。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>title</title> <script type="te
[WordPress] Contact Form 7で確認用メールアドレスのチェックを確認画面で行う | Cherry Pie Web
（2014年7月19日 Contact Form 7 3.9 で大幅な内部構造の変更が行われましたが、下記のカスタマイズに関しましては3.9での確認を行っておりません。ご了解ください。 動作確認のご連絡などいただけますと大変うれしいです） Contact Form 7 には確認用メールアドレスというものがない 様々な機能を持っている「Contact Form 7」ですが、結構欲しいのに標準にはない機能の一つが、確認用メールアドレスの整合チェック機能です。 連絡用メールアドレスや、メールアドレスをIDとして使用する場合など、間違えてしまうと致命的になるものを2度入力させるというケースは、よくあると思います。 これは、下記のサイトにある方法で実現できます。 Contact Form 7で確認用メールアドレスの入力フォームを加える方法 こちらのページに書いてあるコードを functions.ph
![[WordPress] Contact Form 7で確認用メールアドレスのチェックを確認画面で行う | Cherry Pie Web](https://cdn-ak-scissors.b.st-hatena.com/image/square/e7bab71058a320a258a96c8a8a35eaf091dc09a5/height=288;version=1;width=512/https%3A%2F%2Fwww.cherrypieweb.com%2Fwp%2Fwp-content%2Fuploads%2F2024%2F02%2Fogp.jpg)
jQuery始めました。9（ラジオボタンで表示項目の変更） | サーバ管理
ラジオボタンで表示項目の変更 コード： function entryChange1(){ radio = document.getElementsByName('entryPlan') if(radio[0].checked) { //フォーム document.getElementById('firstBox').style.display = ""; document.getElementById('secondBox').style.display = "none"; //特典 document.getElementById('firstNotice').style.display = ""; }else if(radio[1].checked) { //フォーム document.getElementById('firstBox').style.display = "none";
リアルタイムフォームバリデーション jQuery.validation.js :: 5509
お知らせ（10.08.06）： jQuery.validation.jsはアップデート・修正対応などを終了しました。 仕様などを変更したバリデーションプラグインを公開したので、そちらの方を参考にしてください。（validation.jsにはあるのにexValidationでは実装していない機能もありますが、基本的に実装は行いません） どんなフォームにも使えるjQueryのフォームバリデーションプラグイン: exValidation jQuery.validation.jsはフォーム入力のイライラを軽減して、Webブラウジングとかショッピングをもっと快適にするためのjQueryプラグインです。(もちろんサーバサイドでのチェックは必須ですが…) jQuery.validation.jsのサンプルを見てみる トピックス 特徴 ダウンロード 導入方法 1.JSファイルを読み込む 2.input要素
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
Trust Formを使ってみました。｜WordPressプラグイン | wald-grun/blog
wordpressのメールフォームプラグインであるTrust Formがなかなか使いやすそうなので自分用メモ。 DL先 WP公式リポジトリ Trust Form 公式サイト？ ※開発者さんのブログだと思うのですが、違ったらすみません。 設置方法 管理画面のプラグインから、新規追加でインストール可能です。またはリンク先からDLして、FTPでアップロードします。 有効化したら左メニューにTrust Formの項目が出来ていますので、管理画面を開いて設定します。 ドラッグアンドドロップで直感的に操作できます。左の設置できるフォーム一覧から右の設定エリアにドラッグしてドロップ すると、フォームになります。 それぞれの項目をクリックすると編集モードに切り替わり、項目名や、入力エリアのサイズ、必須にするか否か、バリデーションなどについて設定できます。 編集画面のタブに「確認画面」「完了画面」とあるとお
JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
こんなことありませんか？ フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか？ そんな時、押した項目によってその後の内容を変化させれば 項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。 JavaScriptはかなりの初心者なので忘れないようメモしてみました。 【サンプル】例えばお申し込みフォームで… ・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。 ・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力してください。 会員番号 会員番号を入力してください。 特典:初めての方は30%オフ！ サンプルソース(ラジオボタン) HTML [html] 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力して
複雑なお問い合わせフォームを作成するプラグイン cforms II | WordPressで企業ウェブサイト作成・商用ホームページ制作 WordPress Go Go
cforms II » delicious:days お問い合わせフォームを作成するプラグインとして以前、お問い合わせフォームを簡単に作成するプラグイン Contact Form 7を紹介したが、Contact Form 7は簡単にお問い合わせフォームを作成できるが、checkboxやradioボタンが使えない等の制約（最新バージョンでは使用できる）があり、複雑な質問事項を含むようなお問い合わせフォームを作成することができない。そこで、より詳細なお問い合わせフォームの作成を可能にするプラグインが、cforms IIである。 このcforms IIは現在、バージョン6.0まで更新されており、積極的に機能拡張が進められている。Formタグを使った設定はほとんどできるのではないだろうか。しかしながら、日本語の翻訳ファイルはまだないので英語で使うしかない。日本語翻訳ファイルを作成したので、cfor
フォーム要素の制御｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Ajax Username Check - Using Jquery!〔入力したユーザー名が存在するかチェック（PHP+jQuery）〕 autohelp〔フォーム要素クリックでヒントテキスト表示〕 focus fields〔テキスト入力欄にフォーカスが当てられた時に目立たせる〕 jQuery AlphaNumeric〔英数字の入力制限〕 jQuery controlled Dependent (or Cascading) Select List 2〔Select要素から連動プルダウンを自動生成〕 jQuery Impromptu〔ダイアログ、入力プロンプトのカスタマイズ〕 jQuery MultiSelect〔複数選択型プルダウンを扱いやすくする〕 jQuery plugin: Validation〔完璧なフォームの入力チェック〕 jquery.combobox〔Select要素からコン
画像を使わない擬似フォームUIの作り方 第01回 「CSS3を使った装飾」｜クロノドライブ
ブラウザ標準のフォームUI（チェックボックスやセレクトボックス）のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。 そういったときに、実際のフォームUIを隠し独自のフォームUIを表示し、それに対して行ったアクションを隠してあるフォームUIに反映させる手法があります（ここでは擬似フォームUIと呼びます）。 本コラムでは主にスマートフォン向けにCSS3とJavaScript（jQuery）を使い、画像を使わない擬似フォームUIの作り方を4回に分けて紹介していきます。 ※PCではGoogle Chromeのみ動作確認をしています。 第01回目の今回はCSS3を使った装飾と後ほどjQueryで
Contact Form 7 のお問い合わせフォームの使い勝手を向上させるカスタマイズ 7選
（３）Google Analyticsのコンバージョンを設定する （２）のお問い合わせ送信完了画面を設置した上で、Google Analyticsのコンバージョンを設定します。 GoogleAnalytics管理画面よりプロファイルの設定を行います。 目標名、目標タイプを登録し、「目標の詳細」の「目標 URL」に、先に設定したお問い合わせ送信完了ページのURLを入力します。 目標プロセスを設定する場合は「目標到達プロセスのステップを追加」をクリックして必要なステップを入力し、Google Analyticsの設定を完了させます。 （４）送信完了やエラーのメッセージの表示位置をフォーム上部に変更する Contact Form 7 のお問い合わせフォームの場合、「送信」ボタンをクリックすると送信ボタンの「直下」に送信完了メッセージが表示されます。このメッセージの表示位置をフォームの「上部」に変
お問い合わせフォームのWordPressプラグインのinquiry form creatorが便利だった。 / Maka-Veli .com
有名なようですし日本人Developerさんだったので既にご存知だろうと思いますけど、使ってみてなかなか痒いところに手が届いてくれたのでご紹介。あー、これはクライアントワークで使えるなぁーと思いました。簡単なフォーム程度でOKのサイトだったらコレで十分なんじゃないでしょうか。 inquiry form creatorの便利だったところ 日本語 確認画面、サンキュー画面がある フォーム項目の追加が簡単 標準でバリデーションがけっこうある ユーザーに自動返信ができる お問い合わせ内容が管理画面上で確認できる お問い合わせ内容をCSVに落とせる と、思ったんですが、同作者さん( horike 氏) の新しい（？）フォームプラグイン Trust Form のが良さそうですね。 アップデート日時が古いからおかしいなと思ったらこんなのあったのですねー・・・orz （そういえば前にWP詳しい人がT
Contact Form 7 でラジオボタンを必須にする
みんな大好き Contact Form 7！駄菓子菓子 だがしかし、そのファースト・マトリックスが如き美しいアーキテクチャは、多くの場合、日本の悪しき慣習だったりクライアントのひとことだったり、ディレクターの思いつきによってメタメタにされてしまうのであった。。。 さて、今回は ラジオボタン Contact Form 7 はなんでラジオボタンを必須にできないの？とみなさんおっしゃいます。ソレに対して Contact Form 7 のチェックボックス、ラジオボタン、メニュー のページでは、HTML の仕様 を見てみなはれと書かれています。Web 業界の中の人で仕様をちゃんと読んで仕事をする人の割合はだいたい消費税くらいなもんでしょうか。早く10%行くといいですね。 で、仕様を読んでみると「ラジオボタンてどれかひとつが選択されてなアカンやん。全部 OFF やったらブラウザがはじめのヤツを ON
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
柔軟なカスタマイズ性が魅力のフォーム生成WordPressプラグイン「MW WP Form」
WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm（プラズム）
