サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
登録フォームと言えば通常は必要事項を一方的に入力していくものですが、キャラクターとの会話形式にして、まるでチャットを行っているように情報を入力できるのが「ダイアログフォーム」です。人とチャットしているときはタイピングが苦じゃない、というアイデアを元に作られた登録フォームで、コードのダウンロードも無料で行えます。 ダイアログフォーム - jsdo.it - ShareJavaScript,HTML5 andCSS http://jsdo.it/watilde/form 実際にどんな感じでフォームが表示されるのか試してみます。まずはページ右側にある再生ボタンをクリック。 すると、「会員登録ふぉーむ」という文字の下で自動的にWindows Azure 公認キャラクタークラウディア・窓辺が会話を始めます。 「ユーザーIDを入力してください」とクラウディアに言われるので、フォームに自分のIDを
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – ShareJavaScript,HTML5 andCSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – shareJavaScript,HTML5 andCSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This istext." /> </form>
※ご注意： ウイルスバスターがインストールされている環境だと、この記事は読めないようです (→参考画像) (x-autocompletetypeとは？) Webサイトのフォームにワンクリックで個人情報を自動入力してくれる便利機能。ブラウザに、あらかじめ名前やメールアドレスや住所やクレジットカード番号などの情報を設定しておく。 アンケートサイトとかに超便利 入力が苦手なオカンも便利 とにかくべんりGoogleChrome のみ対応してる (2012年4月4日時点)。 便利すぎて今後、他のブラウザも追随必至。 (ユーザーが自動入力を使うには)GoogleChrome 設定 → 個人設定 → 自動入力設定の管理 → 住所氏名メールアドレス等を入れておく (Webページ側での自動入力の設定) inputにx-autocompletetype属性をつけて、値をemail とか sname
Free Download: Cheat Sheet For Designing Web Forms [ad#ad-2] チートシートはPDF, PSD, Omnigraffle形式で配付されており、内容を簡単に紹介します。Simple form field フォームのラベルは入力フィールドの左側に配置し、すぐに理解できるようシンプルな文言にします。 Buttons ボタンはプライマリとサポートの2種類用意し、プライマリボタンはより目立つよう大きくて異なるデザインのものにします。 Optionals fields 任意入力の箇所でよく利用される「*」印は、全てのユーザーに理解されるサインではありません。可能であれば、はっきりと任意であることを明記します。 Supporttext 入力をサポートするテキストは、ユーザー目線で分かりやすい文章にします。 Helptext アドバイスするテ
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 チェックボックスやラジオボタンなど、フォーム周り のデザインを美しくする事が出来るjQueryプラグ イン・Ideal Formsのご紹介。スタイルもいくつか 用意されており、フレームワークとして使えるよう です。デザインテーマもいくつか用意されている ので好みで選ぶことも出来ますね。 ボタン、セレクト、ラジオボタンやチェックボックス等のフォームデザインを変更できます。デザイの変更はcssのみで可能なフレームワークタイプなのでノンプログラマーな方でも気軽に使えそうですね。IE6以外は対応しているようです。 フォームのデザインをガラッと変えることが出来ます。よりデザインに統一感を出せそうですね。 テーマも用意されている Ideal Formsはフレームワークとしても利
WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ「jFormer」です。 「jFormer」はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、入力データのレジュームなど、細かな機能も標準で備わっており、フォームの開発の時間を短縮してくれます。 詳しくは以下 基本的にフォームの部分はphpで作られており、デザインをCSSで、動きなどはjavascriptを利用しています。 多彩なデモは「Demos – jFormer」からご覧いただけます。またベーシックなコンタクトフォームのつくり方は「Installation and Documenta
新たに追加された5つのフォーム関連要素 前回の「HTML5でinput要素に追加された新しいタイプ13連発」までは、HTML5において＜input＞要素に対して加えられた変更を見てきました。今回は、＜input＞要素以外のフォーム（＜form＞）に関連する新要素について見ていきます。今回ご紹介する要素は、以下のとおりです。 出力値を表す＜output＞要素 ＜output＞要素は、プログラムによって生成された出力値を表す要素です。＜output＞要素を用いることで、「この部分は自動的に生成された値である」という意味を明確にできます。 for属性に、他の入力フォームのIDを指定することで、出力値の元になった入力フォームを明示的に指定できます。for属性には、複数のIDをスペースで区切って指定できます。 以下の例では、ユーザーに2つの数値を入力させ、その計算結果を自動的に算出します（このサンプ
最近では、エントリーフォーム最適化（EFO）という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
テキスト入力エリアなどの残り入力文字数をシンプルに表示するjQueryプラグインです。使い方も簡単で、指定要素に入力文字数と一緒に実行するだけです。 動作サンプル 必要なファイルを読み込む jQueryとm5simpleTextCount.jsを読み込みます。 任意の要素に対して実行する 任意のinput,textareaに対して実行します。HTML JS jQuery(function($) { $('.simpleTextCount').simpleTextCount({ maxLength: 12 }); }); ちなみにm5simpleTextCountを実行したinput要素はpaddingRight、textarea要素はpaddingRight, paddingBottomに適当な数値を当てたほうがいいと思いますよ！(そこは手動やねんで・・・ オプション オプションを指定
本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQueryUIとプラグインを取り上げます。今回は、Input Hint Overlay、Text input field filter、jQuery Validation、Password Strength、SimplestTwitter-like dynamic character countについて説明します。 はじめに 第2回「jQueryUIのウィジェットを使ってみよう」では、jQueryのユーザーインターフェースを拡張するjQueryUIのインストールから、jQueryUIのDialog、Datepicker、AutoComplete、ProgressBarの使い方を取り上げました。第3回では、第1回「jQueryUIのインタラクションを使ってみよう」でも簡単に触れたjQuery Pluginのフ
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。Create a Progress Bar WithJavascript |Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが％で確認できる。 overset - jVal - jQuery Form Field V
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ちょっと便利かも、と思ったので ご紹介。送信フォームなどを オンラインで手軽に作成できるWebサービス、Accessifyです。 パスワード（type=”password”） なんかも作れますよ。 ちょっとした入力フォームなんかをパッと作りたいときに便利かも。 なかなかお手軽なサービスでしたよ。ユーザー登録も不要で、HTMLソースを吐き出すだけの仕組みなので日本語も問題なく使えます。CMSの普及が進めば必要なくなるかもしれませんが・・・ 使い方・Step1 まず入力項目（label）を作ります。複数作る際は改行します。良ければnextを。 Step2 それぞれの項目のinput typeを選択します。必須項目はRequired field?にチェックを入れてくださ
フォーム周りでjQueryを使いたい。 そんなときにおすすめなのが、『25 jQuery Tutorials forCreating and Working with Forms』。フォームで使えるjQuery集です。 かっこいいものが揃っていますね。いくつかご紹介します。Creating a Slide-in jQuery Contact Form クリックするとスライドインして現れるコンタクトフォームBuild an IncredibleLogin Form with jQuery クリックすると、ぐいんと勢いよく現れるフォーム Using Form Labels asText Field Values ラベルタグの内容をテキストフィールドの値にして透かしテキストにしたフォームCreate a Progress Bar withJavaScript フォームの進捗状況をプ
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です -はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。はてなグループに投稿された日記データのエクスポートについて -はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記はてなグループ日記のエクスポートデータは2020年2月28
都道府県選択するやつ。 -CSS HappyLife にインスパイアされて。 実際の案件では、都道府県の内部コードは JIS X0402 もしくは ISO 3166-2 で定められたコードを使うことも多いと思います。ということで、value 値として JIS X0402 や ISO 3166-2 のコードを送るバージョンを作ってみました。 option の並び順も、JIS X0402 や ISO 3166-2 のコード順に並び替えました。個人的にはユーザの立場として、独自な並び順だと一瞬混乱するので、JIS(ISO) のコード順の並びで各サイト統一して欲しいところです。 以下のコードについては何らの権利を主張しません。ご自由にコピペなどしてお使いください。 JIS X0402 版 <select name="都道府県"> <option value="">都道府県をお選びください。</o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
