web-dev-qa-db-ja.com

HTML5の型付き数値入力が正しく整列されないのはなぜですか?

ご存知かもしれませんが、HTML5ではinputtype="number"フィールドは「カスタマイズ」されています。 2つの小さな矢印がフィールドに追加されます( w3school example )が、数値は左揃えのままです。

数値は右揃えにする必要があることを確認しました( この質問 で説明されています)。

入力フィールドにも適用されますか?もしそうなら、なぜそれがデフォルトで実装されていないのですか?

60
Alex

数値フィールドは常に右揃えである必要はありません

  1. 数値を他の数値フィールド(財務諸表など)と比較する場合、数値を右揃えすることはしばしば意味があります。これにより、比較可能性とスキャン可能性が向上します。

  2. ただし、数値フィールドが無関係であるか、フォーム内のテキストフィールドと混在している場合があるため、左揃えを使用すると視覚的なフローが向上する場合があります。

  3. #1と#2に加えて、HTMLコントロールはデフォルトで左揃えになる傾向があるという事実に加えて、HTML5番号コントロールもデフォルトで左揃えにしておくのが理にかなっています。

CSSまたはインラインスタイルを使用して、入力のテキストの配置をいつでも変更できることに注意してください(例:<input type="number" style="text-align: right;">または<input type="number" style="direction: rtl;">)。

次に、正しい配置が常に意味をなさない理由の例をいくつか示します。

right alignment can be disruptive when fields are mixed with text

129
tohster

頭のてっぺんに2つの問題があり、input type ="number"

  1. 数値セレクターが表示されていない場合、数値が右から少し不自然に浮いているため、かなり奇妙に見えます。

  2. すでに数字が入力されていて、さらに数字を追加したい場合は、最後の数字と数字セレクタの間の小さな余白をクリックする必要があります。これはマウスでは簡単ではなく、タッチスクリーンでは想像もできません。

このフィドルを見て、テキストの最後に数字を追加してみてください: http://jsfiddle.net/qp5g4ro0/

注:これらの問題はどちらも巧妙な実装で修正できると思いますが、デフォルトでは問題が発生します。

9
DasBeasto

UXに関する多くの質問と同様に、答えは「状況によって異なります」です。数値は比較しやすくなるため、右揃えになります。ただし、入力フィールドには、比較するのに意味のある場所に数値を入力している場合とそうでない場合があります。自信をもって言うことはできないため、デフォルトでは、右揃えよりも左揃えの方が理にかなっています。

7
Peter

数値を左揃えにするか右揃えにするか(10進数で揃えるか)かは、それらが使用されているコンテキストに基づいています。

これは変更できるため、「正しい」デフォルトはありません。

2
DA01