入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
Intercom: The complete AI-first customer service solution
More than a chatbot. Resolves 50% of support volume. Instantly.
なんだかちょっと楽しい...。フォームの新しい入力属性と疑似クラス | バシャログ。
こんにちは。mackyです。いやー、夏ですね。夏が終わったらもう年末ですね。私は毎年この時期から猛スピードで一年が終わります。早く走らないと。。詳しくはコチラをご覧ください。 さて、今日は、HTML5で新しく追加された入力属性にちょっと「なんか楽しいかも...」と感じたので、この気持ちが冷めないうちにまとめることにしました。 autofocus オートフォーカス。 ページを開いたときにフォーカスされるようになる。ちなみに、emailはHTML5で追加されたtype属性の値で、メールアドレス専用のキーボードを表示させることが出来る。 <form> <label>お名前: <input type="text" name="name" class="text" autofocus/></label> </form> お名前: autocomplete オートコンプリート。 入力候補はdatali
Django Best Practice への道 #3
DjangoのWebアプリを開発している際、リファクタ/テスト拡充のために集めた情報をまとめます。本記事は三部作の三つ目となります。 #1 Djangoプロジェクト/アプリケーション/設定ファイル構成 #2 Djangoテスト戦術 #2 補足編 #3 Django Model/View/From/Template戦術 書くこと Djangoの基本的な構成要素である、models.py, views.py, urls.py, forms.pyに関して、最初から知ってればよかったと思った事を書いていきます。だいぶ文章にもっさり感と字が多い感がでてますが、自分の言葉で説明することで理解を深めるという目的もあるのでご容赦ください。 あと、是非意見が欲しいっす。Django使ってる人日本に沢山いるはずなのにこの類の情報ってあんまり無いイメージがあり、以下に書いてある事を考えている人たちとお話してみた
Excel方眼紙をアプリ化する「Forguncy」のプレビュー版が無料公開
Excelのワークシートを使って複雑にレイアウトされた帳票画面、いわゆるExcel方眼紙を活用してしまおうというアプリケーション「Forguncy」（フォーガンシー）のプレビュー版をグレープシティが公開しました。 プレビュー版の公開目的は、ユーザーからのフィードバックを製品版に反映してよりよいものにしようというもの。6月30日まで機能制限なく無料で利用可能ですが、製品版との互換性は保証されないとのことです。 Excelシートを入力フォームや帳票出力として利用 ForguncyはWebアプリケーションとなっており、Webブラウザから利用します。既存のExcelシートを読み込むと、Forguncy上でそのままのレイアウトが再現されます。画像はForguncy紹介動画から。
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
入力フォームをユーザーフレンドリーにする便利なJSプラグイン4つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 私がメンバー写真に使っている(｀・ω・´)クッションが思った以上に縦に細くて個人的にツボった今日この頃です。 今回は入力フォームを実装する際に入れておくとちょっと便利になるJavaScriptのプラグインを4つご紹介します。 jQuery Label Better http://www.thepetedesign.com/demos/label_better_demo.html form部品にフォーカスを当てるとplaceholderがふわっと上に移動するプラグイン。 全体的に動きのあるWebサイトを作るときには活躍してくれそうです。 formatter.js http://firstopinion.github.io/formatter.js/ 電話番号やクレジットカード番号など、パターンのある数列を1つのform部品内で扱えるようになるプラグイン
これさえやれば1.X倍!?実際に効果が出たEFOオススメ施策ベスト10 | エフトラEFOブログ
EFOは、実際に施策を実行し、改善を繰り返すことが重要です。 当社でも、運営メディアのフォームで常に効果分析と改善を繰り返しています。 以前発表したスライドの中でもお伝えしたのですが、 今回は、当社運営メディアや当社EFOツール「エフトラEFO」をご導入いただいた企業様のフォームで実際に効果のあった施策を、その改善率とともにランキング形式でご紹介したいと思います。 まずは10位から6位のご紹介 それではさっそく、紹介していきます！ 10～6位目次 10位 住所自動入力 9位 スマートフォンに適した入力支援 8位 ガイド表示 7位 初期文言表示 6位 リアルタイムアラート 10位 住所自動入力 住所自動入力とは、郵便番号を入れると住所が自動で入る機能のことです。 郵便番号で住所を入力してくれるタイプのフォームはたくさんありますが、郵便番号入力後、検索ボタンなどを押下する必要なものがほと
[CSS]フォームにちょっとだけアニメーションを加えて楽しくするスタイルシート -Animated Toggles
フォームのチェックボックスとラジオボタンに余分はタグは使用せずに、ちょっとだけアニメーションを加えて楽しくするスタイルシートを紹介します。 Animated Toggles HTML チェックボックスもラジオボタンも通常通りにマークアップします。 余分なタグは特にありません。 <form> <h1>Animated Toggles!</h1> <div class="controls"> <input id='check-1' type="checkbox" name='check-1' checked='checked' /> <label for="check-1">Apples</label> <input id='check-2' type="checkbox" name='check-1' /> <label for="check-2">Oranges</label> </div
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗRead less
【※注: 2023年現在開発終了】受託案件で活躍しそうなWordPressメールフォームプラグイン「MW WP Form」を使ってみた
2023年9月現在、MW WP Form の開発はすでに停止しています。 新規での導入は行わないようにしてください。 詳細は、開発者のキタジマさんご自身も出演されているYouTubeチャンネル hook wp_ の放送にてご確認ください！ WordPressでメールフォームが必要なとき、 ブログとか、簡単でいい時はContact Form 7 コーポレートサイトで、一般の問い合わせを受ける程度ならTrust Form 入力項目が細かくてフロントに凝りたいときや、カスタムフィールドとかと連携させて投稿内の情報をフォームに反映させたい場合はプラグインを使わず外部のPHP製メールフォームを埋め込み という風に使い分けています。 そこに、フォームプラグインの第三極が現れました！ ことのきっかけは、使用ケースの多いロリポップやhetemlと、Trust Formの相性が今一歩なことにはじまります。
WordPress：お問い合わせフォームを簡単に設置できるプラグイン「Contact Form 7」の備忘録 - NxWorld
「Contact Form 7」はお問い合わせフォームを簡単に設置でき、様々なカスタマイズも可能なので、多くのサイトで紹介・使用されているプラグインのひとつだと思います。 公式サイトでも多くの情報がありますし、人気のあるプラグインなので検索でもいろいろと出てはくるのですが、これだけ見れば良いっていう自分好みの感じのものを作りたかったので、使う頻度が高い使用方法やカスタマイズなどを備忘録としてまとめてみました。 紹介している内容は、WordPress Ver 3.5.1 と Contact Form 7 Ver 3.4.1 で確認等行ったものです。 Contact Form 7について フォームを作成する際、ほとんどの場合PHPなどのプログラミング知識が必要になってきます。 よほどの知識・技術がある人であれば容易に作ってしまうのかもしれませんが、ゼロからのフォーム作成は結構面倒ですし、知識が
Ladda
A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. For a real-world example, check out any of the forms on slides.com. expand-left Submit expand-right Submit expand-up Submit expand-down Submit contract Submit co
MarkSheetMaker - ヤヲー!
「作ってみたいけど、JavaScript とか CGI って、全然わからない」という貴方。【ヤヲー Mark Sheet Maker】では、鑑定・診断・チェックページ作りのお手伝いをします。順番に質問に答えていくだけで、簡単に作成できます。 このページから順番に質問に答えて行くと、一つのページが作成され、表示されます。この表示されたページをあなたのパソコンに保存した後、あなたのホームページにアップロードすることになります。ホームページをお持ちでない方も、無料でホームページスペースを利用できるサービスがいろいろありますので、挑戦してみてください。いくつか紹介しておきましょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Welcome to nginx!
<input type=submit>は止めて<button type=submit>を使うべき - Qiita
Free & Beautifully Human Online Forms | Typeform
HTML/SELECTカスタマイズ
Login Form from Scratch.
Contact form in ruby, sinatra, and haml