割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
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つ目：ラベルをフィールドの内側のトップに配置した場合 ラベルの配置を内側トップに変えるとどうなるか ラベルを内側トップに配置するのが機能するフォームとは まと
Contact Form7よりも使いやすいお問い合わせフォーム用WordPressプラグインMW WP Formの紹介 2014.04.11 WordPressプラグイン お問い合わせフォーム お問い合わせフォーム用WordPressプラグインの定番と言えばContact Form7ですが、 MW WP FormはContact Form7の弱点を全てカバーできる素敵なプラグインです。 MW WP FormとContact Form7の違いは、 「お問い合わせ画面」「確認画面」「送信完了画面」「エラー画面」を作ることが出来る点と、 メールのデータをデータベース内に保存する事が出来る点です。 （保存機能はオフにできます） 今回はシンプルなフォームの作り方を解説したいと思います。 はじめに、プラグインを有効化後、固定ページより 「送信画面」と「送信完了画面」の２つのページを作成してください。
及川卓也 / Takuya Oikawa @takoratta 良く言われるが、この欄は全角で入力などと利用者側に強いるのはどうしてなんだろう。システム側で簡単に変換できるのに。前考えたのは利用者の入力したものを受付システム側で勝手に変更することに法的なリスクがあるのではないかということだったけれど、確認UIを出せば済むのでは？ 2011-01-22 09:40:49
&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
iCheck jQuery plugin - highly customizable checkboxes and radio buttons チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」。 一般的なチェックボックスを少し調整してクールにしたものや、リデザインした物など、クールにカスタマイズすることが出来ます。 シンプルなデザインにしてみた物。 ボタンっぽくしてみたもの よりカスタマイズしてみたもの 関連エントリ 独自デザインのラジオボタン・チェックボックスを超簡単実装できるjQueryプラグイン ２次元のラジオボタンを作るチュートリアル＆jQueryサンプル
最近のデザイントレンド、フラット、サークル、ミニマル、ブラーなどを取り入れ、ディテールにこだわった美しいデザインのフォームのPSD素材をPixelsDailyから紹介します。
Google Codeの閉鎖に伴い、2016年以降、この記事のとおりにやっても動作しません！対応方法はこちら。 →Google Codeの閉鎖に伴い、設置済みajaxzip3が2016年1月死亡確定。引き続き利用するにはjsの読み込みをgithubに変更が必要。 ボクぁ超レベルの低いWeb系エンジニアを自負しているんですけど（？）、よくフォームの制作時に「郵便番号入力したら住所が自動で入るヤツ、あれ入れてください」って言われてて、右こめかみの血管を何本も逝かせたもんです。 通常は、Webページ側にAjax仕込むのは当然として、サーバサイドにも住所を返すアプリを設置する必要がありました。とはいっても、郵便番号に対応した住所を返すというシンプルなもの。 ただし。 知ってるか知らんかわからんけど、郵便番号ってのは毎月更新されるものなんです。日本郵便が提供しているこちらの郵便番号データベースを見れ
ニーハオ！カヤックのHTMLファイ部のしんちゃんアル！ 中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中！ こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです！ 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基本の要素6つ 登録と無関係の要素はなるべく表示しないように！ 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に！ バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう！ これら一
15 Simple & Effective jQuery Plugins that Enhance Your Forms | Onextrapixel - Web Design & Development Online Magazine フォームをカッコよくするjQueryプラグイン集１５。 デフォルトのフォームってかっこ悪いですが、TwitterBootstrapばりにカッコよくしてくれるjQueryプラグインが色々。 既に紹介されているものも含まれていますが、新しいものもあるようなので是非チェックしてみましょう。 関連エントリ デザインがクールなタグクラウドを実装できるjQueryプラグイン「jQCloud」 時間の入力を楽にすることが出来るjQueryプラグイン アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」
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
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
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とは各種ファイルに互換性がありませんのでご注
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ページを開く
Blogger