Thursday, March 21, 2019

Why aren't HTML5 typed number inputs right aligned, and should they be?



As you may know, with HTML5 when an input has type="number" the field is "customized". Two little arrows are added to the field (w3school example) but the numbers are still left aligned.


I saw that numbers should be right aligned (as discussed in this question).


Is it applying to input fields too? If so, why it's not implemented by default?



Answer



Number fields should not always be right-aligned




  1. It often makes sense to right-align numbers when they are being compared to other number fields (e.g. in financial statements). This can help comparability and scannability.





  2. However, sometimes number fields are unrelated or are mixed with text fields in a form, so left-alignment may promote better visual flow.




  3. Given #1 and #2, plus the fact that HTML controls tend to be left-aligned by default, it makes sense to also keep the HTML5 number control left-aligned by default.




Note that you can always change the text-alignment of the input through CSS or inline styles (e.g. or ).


Here are some examples of why right alignment doesn't always make sense:


right alignment can be disruptive when fields are mixed with text


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...