今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
フォーム・カートのカリキュラム一覧｜ferret [フェレット]
ホームページを運営していますと、売上が増えない！そんな課題に頭を悩ませることも多いことでしょう。そのとき、焦りから、商品の金額変更、集客にテコ入れなど、手当たり次第に対応してしまいがちです。 しかし、本質的なところにこそ改善の余地があり、成果を上げるのに有効と言われています手段がEFO（Entry Form Optimization ）＝です。 ホームページの売上に最も直結する改善、それがEFOです。 とくにEFOは、集客やホームページ全体の改善にかかる労力・予算と比べましても、実践しやすいというメリットがあります。 しかし、いざ実践してみようと思っても、どこから手をつけていいのか分からない、もっと労力を減らして実践したいという人のために、EFOを進めるときのポイントについてご紹介します。
![フォーム・カートのカリキュラム一覧｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/564260469b9b965b46e12600e85e6602f232dc7f/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fassets%2Fcommon%2Fferret-ogp-fb0dee94de79fa21214c3b51508df5df.png)
フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察 | コリス
あなたのフォームは、ユーザーが簡単に利用できますか？ もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。 ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。 Why Infield Top Aligned Form Labels are Quickest to Scan by anthony 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 フォームは入力前、入力後の分かりやすさが大切 最近のフォームで見かける問題 1つ目：ラベルとフィールドを上から順番に配置した場合 2つ目：ラベルをフィールドの内側に配置した場合 3つ目：ラベルをフィールドの内側のトップに配置した場合 ラベルの配置を内側トップに変えるとどうなるか ラベルを内側トップに配置するのが機能するフォームとは まと
[JS]スマフォに最適！フォームのラベルをアニメーションでぽんっと表示するスクリプト -Label Better
フォームにフォーカスすると、プレースホルダーに配置したラベルがアニメーションでぽんっと上に移動するjQueryのプラグインを紹介します。 デスクトップ用のページで使用してもかっこいいですが、スマフォ用のページにも省スペースを兼ねて使用してもいいですね。 デモページ name, mailの他にもpasswordなどのフォームも用意されています。4番目のデモでは、プレスホルダーのテキストとは異なるテキストを表示します。 また、デモにはありませんが、ラベルは上・下・左・右に移動させることもできます。 Label Betterの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法
フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。 しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。 参考：The placeholder attribute -W3C フォームに余分なHTMLを追加せず、ラベルを利用してシンプルに解決する方法を紹介します。 入力時はラベルがツールチップで 実装 実装のポイント label要素内のテキストをラベルとして利用する。 初期状態でラベルのテキストを表示する。 入力時にもラベルがユーザーの目に見えるようにする。 ラベルの配置はフォームとページのレイアウトで行われるようにする。 スクリプトが利用可能でない時でも、ラベルを利用できるようにする。 これらのポイントを踏
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
入力内容をAJAXでチェックするフォームのチュートリアル
ENHANCEのエントリーから、ユーザーの入力した内容をAJAXでチェックするフォームのチュートリアルを紹介します。 Creating an Ajax contact form - from start to finish デモ チュートリアルでは、HTML、CSS、JavaScript、PHPごとにサンプルコードが掲載されており、入力内容のチェックにはjQueryが使用されています。 フォームの各項目はolのリスト要素となっています。 olの順次付きリストは必須入力項目だけではないので違和感がありますが、divよりもいいのかな、と思ってきました。 デモではデータの受信状態まで分からないため、日本語で問題ないかどうかは不明です。
[JS]フォームに入力したパスワードを可視化するスクリプト -Show Password
jQuery Show Password Plugin デモページ 実装は既存のフォームにも簡単に組み込めます。 HTML デモのHTMLはシンプルです。 可視化は、パスワードのclass名を参照しています。 <textarea name="code" class="html" cols="60" rows="5"> <form action="#"> <ol class="forms"> <li> <label for="username">Username</label> <input type="text" id="username" /> </li> <li> <label for="password">Password</label> <input type="password" id="password" class="password" /> </li> <li class=
既存のフォームをユーザーに使いやすくする10のポイント
10 Tips for Optimizing Web Form Submission Usability [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 必須入力欄は強調する 2. エラーメッセージは分かりやすく 3. クライアントサイドのバリデーション 4. 入力している欄を明示 5. 進捗を明示 6. データの保存やキャッシュ 7. 送信ボタンの文言 8. キャンセルボタン 9. 入力例の記載 10. 垂直に配置 1. 必須入力欄は強調する ユーザーはフォームに入力した後に入力ミス・エラー表示があると、不安を感じたりイライラを募らせるでしょう。まずは、入力欄に「必須」「任意」などを記載して、入力欄が必須なのか任意なのかを明示的にユーザーに伝えるのは安全な方法となります。 2. エラーメッセージは分かりやすく フォームのエラーメッセージは、「あなたが下に必要とさせるフィー
ログインフォームに大切な7つの要素と重要な1つの機能
ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。 元記事では下記のCSS3で実装されたフォームもダウンロードできます。 フォームのタイトル このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。 非メンバー用のリンク 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。 ラベルとフィールド ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。 パスワードを忘れた場合 これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。 また、配置する
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
input要素の前と後にアイコンを添えたオシャレなフォームを実装するチュートリアル
Coloured 前後+カラーリングのパターン 実装 HTML HTMLはシンプルで、アイコンやカラーリングはclassで判別します。 <!-- 1st prefix with email icon and default color (grey) --> <input placeholder="Type here..." class="ppfix pre email" type="text"> <!-- 2nd postfix with google plus icon and default color (grey) --> <input placeholder="Type here..." class="ppfix post gplus" type="text"> <!-- 3rd prefix with home icon and blue color --> <input pla
[JS]フォームのセレクトボックスを拡張するjQueryのプラグイン -jQuery MultiSelect
セレクトボックスの項目にチェックボックスを設置し、複数項目の選択を操作しやすくするスクリプトをerichyndsから紹介します。 jQuery MultiSelect Plugin デモページ デモでは上記のベーシックなタイプをはじめ、Optgroupに対応したもの、スタイルシートでデザインを変更したもの、一括操作ができるものなどがあります。 スクリプトのオプションでは、ヘッダの有無、高さの上限、表示位置、シャドウの有無、フェードのスピードなどが変更できます。 jQuery MultiSelect PluginはjQueryのプラグインのため、実装にはjquery.jsが必要です。
55 Free Login, Sign Up and Contact Form PSD Files | Tripwire Magazine
55 Free Login, Sign Up and Contact Form PSD Files by Sonny M. Day | Last updated Sep 28, 2016 | Design, Photoshop | 4 comments In a website, login, sign-up and contact forms are essential features because they provide a mechanism where visitors can interact with the people who are running the site. Webmasters can drastically increase membership and consequently build a following who might be willi
フォーム内容が正規表現にマッチしなかったらヒント表示ができるjQueryプラグイン「InputNotes」:phpspot開発日誌
フォーム内容が正規表現にマッチしなかったらヒント表示ができるjQueryプラグイン「InputNotes」 2012年07月12日- InputNotes jQuery Plugin フォーム内容が正規表現にマッチしなかったらヒント表示ができるjQueryプラグイン「InputNotes」 文字をタイプしていて、エラーがある場合はその場で表示してくれるプラグインです。正規表現によって入力ルールを定義出来るのが特徴 数字は禁止のtextarea。数字を入れると「Do not type numbers!」となります 数字だけを入力するルールの場合。 数字なら色を変えてOK、みたいな表示にできる フォームのバリデーションの１選択肢として使えそうですね 関連エントリ クレジットカード番号をバリデートできるjQueryプラグイン「Smart Validate」 お絵かきでCAPTCHAできるようにす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dropthebit - A Bitcoin platform on-the-rise
spyrestudios.com| 502: Bad gateway
spyrestudios.com| 502: Bad gateway
[CSS]使いやすいスタイリッシュなフォームを実装する17のチュートリアル | コリス