95+ CSS Forms
In the ever-evolving landscape of web design, creating captivating and user-friendly forms is a crucial aspect of delivering a seamless user experience. To aid designers and developers in this endeavor, we are thrilled to present our collection of CSS forms. This handpicked selection features an array of free HTML and CSS form code examples sourced from CodePen, GitHub, and various other trusted r
【Tips】ただただフォーム最適化をまとめたチートシート的なもの - Qiita
概要 主に「2016年 - 2017年」の記事から引っ張ってきて、ただただ羅列したものです。 なので、このまとめ自体の最適化が成されてないですが、そこはご容赦ください… ユーザビリティ・アクセシビリティ 分かりやすさ 入力項目は必要最低限にする 項目名は簡潔で短く分かりやすいものにする できる限り入力フィールドの数は最小限にする 一つの項目の入力フィールドを複数に分けない 例：姓名、電話番号、郵便番号など 必須項目は、「＊」ではなく「必須」と表示する ラベルやヒント（○文字以上必要です）をplaceholderに設定しない フォーカスした際に消えてしまうため、入力例を入れてあげる程度にする フォーカスした際の入力フィールドのデザインを変える 入力フィールドのサイズは、入力される値に合わせる リアルタイムでチェック出来るバリデーションを実装する エラーメッセージは、上部にすべて表示するのでは
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
CSS3のappearanceプロパティを使ってフォームのselect要素を装飾する | Rapid Progress
つい最近、フォームを作る際によく使われるselect要素の見た目を調整する必要があったので、その時にやったことなどを備忘録を兼ねてメモします。つい最近、フォームを作る際によく使われるselect要素の見た目を調整する必要があったので、その時にやったことなどを備忘録を兼ねてメモします。 select要素といえば、 ↑こんな感じで、ブラウザ毎にデフォルトで矢印がついちゃいます。 個人的にはこれでいいだろと思う派なんですが、そうもいかないときもあるので… 以下、select要素の装飾方法となります。（※2013年11月時点IE非対応） 1.矢印を消す まず、右側の矢印をCSS3のappearanceプロパティを使って非表示にします。 ■CSS Sample 1 2 3 4 5 select{ -webkit-appearance:none; -moz-appearance:none; ap
郵便番号を入力すると住所を自動補完してくれるjQueryプラグイン・jquery.jpostal.js
郵便番号から住所を自動補完してくれるライブラリのご紹介。他にもいくつかありますけど使いやすかったので備忘録として。 よくあるやつ。メンテも不要との事なので助かります。 <script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script> <script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>ライブラリはgooglecode.comにホストされているものを直接読み込みます。 $('#postcode1').jpostal({ postcode : [ '#postcode1', '#postcode2' ], address : { '#ad
[Google調べ] 入力フォームの最適化のために必須な4つの設定
[対象: 全員] Google Research Blogがユーザーテストに基づいてまとめたレポートから、入力フォームの完了にもっとも大きな影響を与えた設定をこの記事では紹介します。 次の4つの設定になります。 入力条件を事前に指示する エラーメッセージをフィールドの横に配置する 必須の項目と任意の項目を区別しやすくする ラベルをフィールドの上に配置する 順に説明します。 入力条件を事前に指示する 入力条件（たとえば、パスワードの最低文字数）は、フォームを送信する前にフォームのなかで指示します。 このガイドラインの適用は、フォームの完了と被験者の評価に大きなプラスの影響を与えました。また、被験者のコメントにも（前もって指示してもらった方がいいと）頻繁に現れました。 エラーメッセージをフィールドの横に配置する ユーザーがすぐに訂正できるように、エラーメッセージは入力フィールドの隣に配置します
![[Google調べ] 入力フォームの最適化のために必須な4つの設定](https://cdn-ak-scissors.b.st-hatena.com/image/square/f00f4804fe59acd36d8e9d02e50d10db7dc9a119/height=288;version=1;width=512/https%3A%2F%2Fwww.suzukikenichi.com%2Fblog%2Fwp-content%2Fuploads%2Fsplash_1200_675.png)
なんだかちょっと楽しい...。フォームの新しい入力属性と疑似クラス | バシャログ。
こんにちは。mackyです。いやー、夏ですね。夏が終わったらもう年末ですね。私は毎年この時期から猛スピードで一年が終わります。早く走らないと。。詳しくはコチラをご覧ください。 さて、今日は、HTML5で新しく追加された入力属性にちょっと「なんか楽しいかも...」と感じたので、この気持ちが冷めないうちにまとめることにしました。 autofocus オートフォーカス。 ページを開いたときにフォーカスされるようになる。ちなみに、emailはHTML5で追加されたtype属性の値で、メールアドレス専用のキーボードを表示させることが出来る。 <form> <label>お名前: <input type="text" name="name" class="text" autofocus/></label> </form> お名前: autocomplete オートコンプリート。 入力候補はdatali
やってられるか！！蹴りたいフォームの１２要素 | WP-E (仮)
UXとか難しいことはよくわかんないですが こんにちわ！@ampersand_xyzです。UXとかUIデザインとか、かしこさが低いので小難しいことはわからないですが、個人的にかつ主観バリバリで「イヤだな」って思うことはわかる！ 飛行機やホテルの予約などで、ちょいちょいお問い合わせフォームや予約フォームを使うのだけど、その時に思わずイラッとしちゃうようなフォームの要素を思い出してまとめてみました。 （1）要件的に適切でなさそうな必須項目が多い 名前や返信先などの情報が必須になるのはそれはもちろん構わないけれども、 所属部署名、とか、業種、とかそういうのが必須の場合。 もちろん、問い合わせる先やその内容によって、 例えば、保険等に関する問い合わせだと業種によって契約の内容が違ってきたりするので必須になるのは頷けるけれども、これが食べ物の通販の問い合わせフォームとかで必須だったら「？」って感じる。
電話番号入力時等に自動でタブを入力してくれるjQueryプラグイン「Autotab」:phpspot開発日誌
jQuery Autotab Demo 電話番号入力時等に自動でタブを入力してくれるjQueryプラグイン「Autotab」 電話番号フィールドを複数にわけているけど、入力がおわったら次のフィールドに自動でうつる、というアレが簡単に実装できます。 単に移動するだけではなくて、入力値をフィルタすることも可能です 関連エントリ Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 より良いフォームの入力ヒント実装jQueryプラグイン「Label Better」 フォーム要素にフォーカスした際のヒント表示を簡単に実装できるjQueryプラグイン「FormHelp」
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
離婚回避マニュアルを購入したいと思っているなら・・・ ｜ 口コミ・レビュー投稿 E-BOOKデータベース
離婚回避マニュアルを購入しようとしているなら、こちらのリンクをよく確認したほうがいいです。 このWEBサイトで、女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～の購入によって一体何ができるのかを、よく理解してから購入されることをおすすめします。 また、レビューや口コミが掲載されていれば、それもよく確認しましょう。 次の女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～に関した情報も購入の参考になるかもしれません。 販売商品名称：女性が書いた男性のための離婚回避マニュアル～妻と絶対に離婚したくないあなたへ～ 教材説明：画期的な究極の離婚回避マニュアルをご紹介します。絶対に離婚したくない夫に徹底的な女性目線でお伝えする、離婚回避バイブルです。市販のマニュアルの多くは、男性が男性目線で書いたものであり、「妻の感情」をまったく無視しています
jQueryでキーボードのキーコードを調べる方法｜BLACKFLAG
先日紹介した「jQueryを使ってキーボードからの操作でイベントを実行させる方法」にて、 各キーボードに付与されているキーコードを使って制御しましたが 各キーにはどのキーコードが設定されているか調べるツール（？）を 作ってみた（ほぼ自分用）ので併せて紹介してみます。 キーボード操作からイベントを実行させるサンプルでは 矢印キー「←」「→」「↑」「↓」の4つを使って実装しました。 他のキーから操作を設定する際、下記の入力フォームにカーソルを入れ、 実際にキーボードのキーを押すと、そのキーに設定されているキーコードが表示されます。 jQuery KeyCode Examine 中身は大したことないのですが、 下記の様になっています。 ◆HTML <div id="container"> <p>入力フォームにカーソルを入れ、キーコードを調べたいキーを押してください。</p> キーコード ： <i
iPhoneのformで「Go」とか「開く」を押したときにformが送信されないようにする | notizbloc
<form action="" method="post"> <input type="text" name="" value="" /><br /> <button type="submit">送信</button> </form> とかで、PCのフォームの場合は <form action="" method="post" onsubmit="return false;"> <input type="text" name="" value="" /><br /> <button type="submit" onclick="submit();">送信</button> </form> とやれば、enterを押したときに送信されるのを防ぐ事が出来る。が、iPhoneだとonclickが効かないので変わりに、 <form action="" method="post" onsubmi
jQuery でフォームの2重送信を禁止する方法
連続送信はサーバーサイド側でワンタイムトークンなどで禁止すれば良いと思いますが、クライアントサイドで複数のステップをしっかりと設けていないフォームでは誤って2回エンターキーを押してしまったりすると、データが送信されたのに関わらず、されたことがユーザーに分からなくなってしまうので、JavaScript 側で保険として2重送信を防止すると良さそうです。 $('form').submit(function() { $(this).submit(function () { alert('フォームからのデータ送信は一度ずつ行なって下さい。'); return false; }); });
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEでlabelの中のimgがクリック出来ないのを、CSSだけで対応する < ノート < allis(オールイズ)
公海555000kk线路检测—首页（欢迎您）
クレジットカード入力補助フォームの実装ができるjQueryプラグイン「Creditly.js」:phpspot開発日誌
[js] スマートフォンのAjax フォーム送信時にキーボードを消す![[js] スマートフォンのAjax フォーム送信時にキーボードを消す](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
jQueryで二度押し防止 | 私的雑録