Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント
ニーハオ！カヤックのHTMLファイ部のしんちゃんアル！ 中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中！ こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです！ 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基本の要素6つ 登録と無関係の要素はなるべく表示しないように！ 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に！ バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう！ これら一
Editable for Bootstrap
Heads up! This project was significally improved and renamed into X-editable! Please use X-editable page to download newest release, create issues and view actual documentation. All futher updates will be done there. About Invokes in-place editing feature to any element of your page based on Bootstrap form and popover supported types: text, textarea, select, date validation on client and server-si
フォームを改めて考えなおしてみるエントリーフォーム最適化のまとめ（EFO） | バシャログ。
世間が彼を見捨てても、私はキムタクの月9を見続けます。 どうもこんばんは Latin です。 今回はエントリーフォームの最適化についてです。 フォームって、ウェブサイトをローンチした後は、メンテナンスが全然されていない･･･って事は結構多いのではないしょうか？ 仕様が思いの外複雑であったり、分析・改善に費やす時間がなかったりと、理由は様々だと思うのですが、今回は最低限把握しておくべき項目をまとめてみました。 フォームの初期実装時やリニューアルなどに少しでもご参考になればと思います。 【入力サポート】 選択項目は、デフォルト値に配慮する 例えばですが、都道府県のプルダウン選択なら、メインターゲット層の多い都道府県にするというヤツです。「東京都」をデフォルトにしているところを良く見かけますよね。 必須アイコン「必須」の表記で目立つ色で配置する 「※」や「*」は不親切だし、伝わりづらいようです。
立体感がリアルなON・OFFスイッチ実装jQueryデモ:phpspot開発日誌
jQuery Fancy Switch | Papermashup.com 立体感がリアルなON・OFFスイッチ実装jQueryデモ。 CSS3でやっているわけではなく、画像を切り替えているだけなのでそこまで驚くことではないかもしれませんが、かなり分かりやすいデザインであることは言うまでもなく、更にオシャレなデザインとなっております つい押したくなってしまうようなデザインですね 関連エントリ iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」 iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
★HTML5リファレンス
■フォーム機能の拡張 HTML5では、フォームに関する新しい属性や指定できる属性値が多数追加される予定です。 入力必須・妥当性チェック・入力補助など、 これまでJavaScriptで作成されることの多かった機能が、 HTMLタグの属性だけで実現できるようになりそうです。 いずれも使用頻度の高い機能だけに、各ブラウザのサポートが待ち遠しいところです。 ■<input>タグのtype属性に追加される値 HTML5では、<input>タグのtype属性に指定できる値の種類が増えています。 それぞれの値を指定した場合、例えば、<input type=”email”>を指定すると、 この属性値をサポートしているFirefox4・Opera10・Google Chromeなどのブラウザでは、 送信ボタンを押したときに入力されている値がメールアドレスとして妥当かどうかチェックしてくれます。 また、Ope
JavaScript and JQuery - UniForm JS
I believe many of you want to know the real differences between JavaScript and JQuery. You are noticing that both of these softwares start with J but besides that there are many other similarities which we are going to explore here. The fact is that many professional web developers as well as amateur one are interested in knowing these differences and similarities for better productivity and overa
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
画像のアップロードをかっこよく実装する - (ﾟ∀ﾟ)o彡 sasata299's blog
2012年02月16日11:36 Webアプリ 画像のアップロードをかっこよく実装する 久しぶりのブログですこんにちわ！最近は主になめこを栽培しております。 なめこ図鑑46%まできたお (*´ω｀*)— ささたつ(Tatsuya Sasaki) (@sasata299) February 13, 2012 ということで、今回は画像のアップロードをかっこよくやる方法について紹介します。 画像のアップロードというか、アップロードしたいファイルの選択ですかね。Twitterだとこんな感じのカメラ画像があって、それをクリックするとファイル選択画面になるんです。 アップロードしたいファイルの選択って、ふつーに実装するとこんな感じのデザインです。かっこよくない！！ まぁこんな感じですよね。 そうじゃなくて、Twitterみたいな感じで画像をクリックするとシャキーン！とファイル選択画面が出てくる、そうい
40 Contact Forms of All Time For Designer Inspiration
Contact forms are always an important part of any website. It will build the trust and allows your visitors or customers to get in touch with your support team. But one should take care when selecting the style of contact form. It should allow visitor to contact you very easily, include the only necessary fields and allow them to submit it in possible minimum time. Don’t forget to use a simple mat
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
