生年月日の入力欄のレスポンシブ対応についていろいろ考えてみた
先日、生年月日の入力欄をレスポンシブに最適化する良い方法はないか検証してみたら、想像以上に大変だったのでメモを残しておきます。 日付の入力と言えど実はいろいろな実装方法があって、マルチデバイスに対応しながら要件にあった実装をするにはどうしたらいいのか、改めてゼロベースで考えてみました。結局、最終的には振り出しに戻った感じなんですけどね（結論を先に見たい方はこちらからどうぞw）。 近い将来、レスポンシブな日付入力欄の実装が必要な方々の参考になれば幸いです。ちなみに、以下に書いたもの以外に「これいいよ」というのがあったら、ぜひご教授願いたいです。 要件定義とチェックポイント 今回、日付入力欄を実装した際の要件は以下の通りです。生年月日のように年の選択が必須な日付の入力欄の実装だったので、たとえば、ホテル予約の日付選択などとはちょっと違った要件になっています。 a. 年が選択しやすい 生年月日の
input type="date"で日付選択の入力欄を作る｜HTMLリファレンス
HTMLの<input type="date">は、日付の入力欄（フィールド）を作成するために使います。具体的には「年」「月」「日」の3つの値を入力するフィールドが作られます。
徹底図解 入力フォームのデザイン・UXを高める15の方法 - ポップインサイト
サインアップ画面やデータ入力画面の「フォーム」は、サイトやアプリ設計において最も重要な要素の1つです。本記事では、入力フォームデザインのUXを高める15のルールをご紹介します。 ポップインサイトでは、ユーザーリサーチのファクトにもとづいたWEBサイト改善を支援しています。WEBサイトのUX改善に課題がある方はお気軽にご相談ください。⇒UXデザイン/UXリサーチについて相談する ※紹介資料の無料ダウンロードはこちら ※関連記事：【EFOとは？】入力フォーム最適化施策8選：CVR（コンバージョン率）改善のコツ ※この記事はuxdesign.ccの記事を許可のもと翻訳・編集したものです。 翻訳元記事：Design Better Forms (2016/7/5) 著者：Andrew Coyle
【2023年最新事例付き】入力フォーム作成の際に注意したい12のポイント | えそらLLC UX ブログ
入力フォームを作る上で注意したい12のポイント 1. 可能な限り項目数を減らす 良い例：PayPay（アプリ） – 初回入力に必要な情報がかなり絞られています。 新規登録や申し込みの段階で必ずしも必要でない項目や、わざわざユーザーが入力する必要のない項目は削除しましょう。登録後に別途取得するなどの工夫ができるかもしれません。特に「任意」となる項目はこれに該当する可能性があります。 2. 関連のあるラベルと入力欄はグループ化する 良い例：出前館（サイト） – ラベルは入力欄のすぐ左上に、氏名や住所など関連のある項目は間隔を狭くしてグループに見えるようにしています。 ラベルと入力欄は等間隔に並べず、入力欄のすぐ近くにラベルを設置したり、視覚的にグループであることが分かるようにしましょう。対応する入力欄の特定が困難だと、ユーザーは入力に通常よりも時間を要し、離脱に繋がってしまうこともあります。
Bootstrap Form おさらい - Qiita
BootstrapのFormは、書き方にいろいろパターンがあり、いまいち整理できていないので、調査を兼ねてまとめてみる。 結論から言えば、ドキュメントをよく読めば、いろいろ理解できる。 事前に知っておきたい Formをいじるまえに知っておきたいこととしては、 レイアウトにより（inline, horizontal）、マークアップが異なる。 text系(input,textarea,select)と、その他のものは扱いが違う。 horizontalではform-groupがrowと同じ概念になる（なので要素をcol-xで分割） の３つ。 私は、いろいろな差をBootstrapが吸収してくれるはずという先入観により、遠回りをしました。 素の状態 container以外は何もbootstrapの要素はない。 <div class="container"> <form> <label>name</
Vuelidate | A Vue.js library.
Package contentSimple, lightweight model-based validation for Vue.js You can read the introduction post for more insight on how this solution differs from other validation libraries. If you want to use Vuelidate with Vue 3, use the Vuelidate Next version. Basic usageYou can import the library and use as a Vue plugin to enable the functionality globally on all components containing validation confi
How To Use Vuelidate to Do Form Validation - Better Programming - Medium
Using the Vee-Validate library to enable form validation for Vue.js forms Vue.js is a great framework for building front end web apps. It uses a component-based architecture which makes organizing code easy. It lets you use the latest features JavaScript has to offer, so writing code to build your apps is easier than ever. It has a lot of add-ons like routing and the flux store that you can add wh
これでわかるvue.jsのフォームバリデーションVuelidate | アールエフェクト
本文書はVue 2環境で動作確認を行っています(Vuelidate 0.x)。Vue 3の場合はVuelidate 2を利用する必要があります。 Vue.js 3の Composition APIで利用できるVulidate 2の記事も公開しています。 本文書では開発したアプリケーションを世に出す時には避けて通れないバリデーションについて解説しています。エラー処理の設定には手間がかかってあまり好きではないなという人も多いとは思います。Vuelidateを利用するとバリデーションの設定がなくなるわけではありませんがぜひこの機会にVue.jsのVuelidateのバリデーションをマスターしてください。 Vue.jsにはさまざまなバリデーションのライブラリがありますが、その中でもVuelidateとVeeValidateが有名です。本文書ではVuelidateを利用してvue.jsでのバリデーシ
とほほのBootstrap 4入門 - フォーム - とほほのWWW入門
<div class="form-group"> <label for="text1">Text:</label> <input type="text" id="text1" class="form-control"> </div> <div class="form-group"> <label for="passwd1">Password:</label> <input type="password" id="passwd1" class="form-control"> </div> <div class="form-group"> <label for="textarea1">Textarea:</label> <textarea id="textarea1" class="form-control"></textarea> </div>
SELECTタグでプレースホルダー表示する方法
↓これをやるには ↓こう書けばいいよ、という話です。 <select> <option value='' disabled selected style='display:none;'>選択してください</option> <option>A</option> <option>B</option> <option>C</option> <option>D</option> <option>E</option> <option>F</option> <option>G</option> </select> HTML5の機能のひとつplaceholderは、入力欄が未入力状態の時にうっすらテキストを表示して 入力を促すという便利なものです ↑こういう入力促進文字が、 <input type='text' placeholder='住所を入力してください' /> <textarea placeho
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
入力フォームにおけるUI設計の基本とUXを改善するためのデザインルールとは？ - Act.3 Consulting 通信
【受付終了】誰もが利用できるフォームの実装方法を解説する『Form Design Patterns』を3名様にプレゼント!