HTML5数値入力フィールドをよりユーザーフレンドリーにする方法は？
HTML5標準を採用するようにWebサイトをアップグレードしています。 0-99の整数のみを受け入れるフィールドがあります。もともとは次のコードを持っています：
<input name='age' type='text' size=2 maxlength=2>
HTML5を使用すると、クライアント側のチェックを一部省略できます。
<input name='age' type='number' min=0 max=99>
ただし、sizeおよびmaxlengthは無制限であるため、ユーザーエクスペリエンスは複数の面で低下します。
- ユーザーは長さの入力を妨げられない
- ユーザーは、入力の制限が何であるかを視覚的に区別できません
- 送信できなかった場合でも、ユーザーは数字や小数以外を入力できます。
代わりにtype='tel'の使用を提案している人を見かけました。しかし、それは私がまだ非数字を排除するためにJavaScriptを必要とすることを意味します。より良いオプションはありますか？
[〜＃〜]更新[〜＃〜]
上記の問題がFirefoxブラウザに限定されていることに気づきました。 Google Chromeは、最小最大値に基づいて数値入力のサイズと最大長を自動的に計算し、非常に必要な視覚的な手掛かりを提供します。
これを見てください JsFiddle
Ceefinの answer は非常に優れた点です。詳細に集中しすぎると、UXについて実際に重要なこと、つまりユーザーエクスペリエンスを見過ごすことができます。フォームよりもイライラするエクスペリエンスはありません。それは簡単な質問をし、それからあなたに答えさせません。この種の過剰検証は郵便の住所ではひどく一般的です。クレジットカードの正しい住所を入力することが許可されなかったため、取引をあきらめるしかありませんでした。
それで、あなたは多くの100歳以上のユーザーがいないかもしれませんが、なぜそれらを除外するために特別な努力をするのですか？実際、なぜあなたが本当にそうすることができる方法がないのに、なぜ年齢を確認しようとするのですか？ユーザーが正しく答えられない、または答えない場合、ユーザーからその情報を取得することはできません。
同様に、ほとんどの場合、フィールドにラベルを付ける最善の方法は、フィールドの横にラベルを付けることです（そしてHTML <label> 鬼ごっこ）。人々は何世代にもわたってこのようなフォームに記入してきました。イノベーションは、ユーザーよりもデザイナーの自我に役立つ場合があります。
ユーザーが必要とする入力を明確に定義したラベルは、入力フィールドの最大長の問題を回避する必要があります。現在インターネットを使用している99歳以上の人々がいる可能性があるため、おそらく最大長は3にする必要があります
watermark（入力が空の場合は灰色のテキスト）を0-99。
これは明確に述べています：
- 入力は数値でなければなりません
- 範囲は0〜99です
jquery-watermark のような、これに対する既製のソリューションさえあります。
ユーザーがあらゆる種類の入力を使用できることを確認してください。マウスまたはキーボード（またはその点でタッチ）。そして、次のような視覚的なヒントを通じて：
- 入力フィールドの幅
- 入力フィールドの左側にある代表的なアイコン
- プレースホルダーテキスト/アイコン
- 可能な（i）アイコンと右側にホバー情報
- コンテナー内の入力ボックスを視覚的にラップする
視覚的なヒントとテキストによるヒントの両方を提供することで、ユーザーを大幅に支援できるはずです。ただし、ブラウザの互換性に関する問題は、JavaScriptを使用してのみ修正できるようです。とにかく、上記のように、問題を防止する最善の方法は、ユーザーがそもそもその問題を起こさないようにすることです。