jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
Fullscreen Form Interface | Codrops
An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields. Today we’d like to share a fullscreen form concept with you. The idea is to extend the minimal form concept and only show one question or form field at a time in fullscreen. The user can enter data in a distraction-free way and it allows to ad
フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察 | コリス
あなたのフォームは、ユーザーが簡単に利用できますか？ もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。 ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。 Why Infield Top Aligned Form Labels are Quickest to Scan by anthony 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 フォームは入力前、入力後の分かりやすさが大切 最近のフォームで見かける問題 1つ目：ラベルとフィールドを上から順番に配置した場合 2つ目：ラベルをフィールドの内側に配置した場合 3つ目：ラベルをフィールドの内側のトップに配置した場合 ラベルの配置を内側トップに変えるとどうなるか ラベルを内側トップに配置するのが機能するフォームとは まと
textareaやinputの初期値を消すjQueryプラグイン(placeholder title属性版)
使用にあたっての注意 再配布はご遠慮くださいませ 改変は自由にしてくださって構いませんが、最上部にあるコメント部分は削除しないでください。 このスクリプトを使用し、何らかの問題が発生しても一切責任は負いません。 使用に関しては自己責任でお願いいたします。 ご要望、バグなどございましたらお問合せフォームまで 設置方法1 head要素内にjquery.js、jquery.placeholder.title.jsの順に読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.placeholder.title.js"></script> 設置方法2 下記のように設定させたい要素を指定し、記述してください。 $('#form textarea
Contact Form7よりも使いやすいお問い合わせフォーム用WordPressプラグインMW WP Formの紹介 | mono-lab（モノラボ）
Contact Form7よりも使いやすいお問い合わせフォーム用WordPressプラグインMW WP Formの紹介 2014.04.11 WordPressプラグイン お問い合わせフォーム お問い合わせフォーム用WordPressプラグインの定番と言えばContact Form7ですが、 MW WP FormはContact Form7の弱点を全てカバーできる素敵なプラグインです。 MW WP FormとContact Form7の違いは、 「お問い合わせ画面」「確認画面」「送信完了画面」「エラー画面」を作ることが出来る点と、 メールのデータをデータベース内に保存する事が出来る点です。 （保存機能はオフにできます） 今回はシンプルなフォームの作り方を解説したいと思います。 はじめに、プラグインを有効化後、固定ページより 「送信画面」と「送信完了画面」の２つのページを作成してください。
Web登録フォームで半角や全角などの入力を強いる理由を考えてみた
及川卓也 / Takuya Oikawa @takoratta 良く言われるが、この欄は全角で入力などと利用者側に強いるのはどうしてなんだろう。システム側で簡単に変換できるのに。前考えたのは利用者の入力したものを受付システム側で勝手に変更することに法的なリスクがあるのではないかということだったけれど、確認UIを出せば済むのでは？
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
&lt;script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&amp;pid=877160106″&gt;&lt;/script&gt;&lt;noscript&gt;&lt;a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&amp;pid=877160106″ target=”_blank” &gt;&lt;img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&amp;pid
チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」:phpspot開発日誌
iCheck jQuery plugin - highly customizable checkboxes and radio buttons チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」。 一般的なチェックボックスを少し調整してクールにしたものや、リデザインした物など、クールにカスタマイズすることが出来ます。 シンプルなデザインにしてみた物。 ボタンっぽくしてみたもの よりカスタマイズしてみたもの 関連エントリ 独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン ２次元のラジオボタンを作るチュートリアル＆jQueryサンプル
最近のデザイントレンドを取り入れた美しいデザインのフォームのPSD素材のまとめ
最近のデザイントレンド、フラット、サークル、ミニマル、ブラーなどを取り入れ、ディテールにこだわった美しいデザインのフォームのPSD素材をPixelsDailyから紹介します。
いつのまにかajaxzipが進化して、メンテ不要の住所入力支援ツールになっててビビった件。 - motooLogue
Google Codeの閉鎖に伴い、2016年以降、この記事のとおりにやっても動作しません！対応方法はこちら。 →Google Codeの閉鎖に伴い、設置済みajaxzip3が2016年1月死亡確定。引き続き利用するにはjsの読み込みをgithubに変更が必要。 ボクぁ超レベルの低いWeb系エンジニアを自負しているんですけど（？）、よくフォームの制作時に「郵便番号入力したら住所が自動で入るヤツ、あれ入れてください」って言われてて、右こめかみの血管を何本も逝かせたもんです。 通常は、Webページ側にAjax仕込むのは当然として、サーバサイドにも住所を返すアプリを設置する必要がありました。とはいっても、郵便番号に対応した住所を返すというシンプルなもの。 ただし。 知ってるか知らんかわからんけど、郵便番号ってのは毎月更新されるものなんです。日本郵便が提供しているこちらの郵便番号データベースを見れ
Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント
ニーハオ！カヤックのHTMLファイ部のしんちゃんアル！ 中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中！ こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです！ 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基本の要素6つ 登録と無関係の要素はなるべく表示しないように！ 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に！ バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう！ これら一
フォームをカッコよくするjQueryプラグイン集１５:phpspot開発日誌
15 Simple & Effective jQuery Plugins that Enhance Your Forms | Onextrapixel - Web Design & Development Online Magazine フォームをカッコよくするjQueryプラグイン集１５。 デフォルトのフォームってかっこ悪いですが、TwitterBootstrapばりにカッコよくしてくれるjQueryプラグインが色々。 既に紹介されているものも含まれていますが、新しいものもあるようなので是非チェックしてみましょう。 関連エントリ デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」 時間の入力を楽にすることが出来るjQueryプラグイン アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」
22 Free and Premium Well-Designed Web Form PSD Files - Designbeep
Web forms such as contact forms,subscription forms etc.are important elements of websites and blogs to keep connected with the users and readers.In the this high competitive online business world webmasters do not spend too much time to create a web form however we should always consider the importance of these web forms.You know most of the web forms are really simple and poorly designed but you
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
フォームメール2 - PHPスクリプト | サイト作りの小役立ち工房
sformmail.php 【本体】 sfm_config.php 【設定ファイル】 sformmail.css 【共通CSS】 sfm_form.html 【入力フォーム用】 sfm_confirm.html 【確認画面用】 sfm_completion.html 【送信完了画面】 sfm_mail_tmpl.php 【メール送信用テンプレート】 sfm_reply_tmpl.php 【自動返信用テンプレート】 /utf-8 【UTF-8用サンプル】 /shift_jis 【SHIFT_JIS用サンプル】 ご利用の際は、設定ファイル及び付属のHTMLファイルを参考にして下さい。 現在、自宅環境とレンタルサーバ「heteml」で動作確認しています。 PHPのバージョンや環境によっては動作しない可能性があることをご了承下さい。 ※バージョン1.xxとは各種ファイルに互換性がありませんのでご注
さまざまなデザイン・レイアウトのフォームデザインまとめ「28 Brilliant Form Layouts in User Interface Design」
TOP > Design , WebDesign > さまざまなデザイン・レイアウトのフォームデザインまとめ「28 Brilliant Form Layouts in User Interface Design」 企業サイトやポートフォリオサイトなどへの設置が必須となっているコンタクト・問い合わせ用のフォーム。デザインがどうしても、シンプルでワンパターン化してしまいがちだと思います。そんな時に役立つ、さまざまなデザイン・レイアウトのフォームデザインまとめ「28 Brilliant Form Layouts in User Interface Design」を今回は紹介したいと思います。 見やすく・入力しやすさも重視されている、デザイン性の高いフォームばかりが集められています。気になったものをピックアップしていますので、下記より御覧ください。 詳しくは以下 ■SVN / GIT Su
パターン化しがちなお問い合わせフォーム！そんな人のためのインスピレーションデザイン
海外サイトのお問い合わせフォームを集めてみました。お問い合わせフォームは作るけどパターン化してるって思ったことありませんか？ インスピレーションの素敵なサイトをリストアップしましたので、今後のサイトデザインに悩んだ時に参考にしてください。 ページフッターにお問い合わせフォームがあるサイトもあるので、スクロールしてご覧ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HappyJs.com is for sale | HugeDomains
[CSS]使いやすいスタイリッシュなフォームを実装する17のチュートリアル | コリス
Blogger