For long forms, it can be helpful to list all errors in an alert with links back to individual invalid inputs on each attempt to submit
Affordance: field width indicates the expected input
Form field width should afford the user space to enter the characters that will be required. Do not arbitrarily limit the width of names, usernames, passwords or emails.
Middle initial should be wide enough to accommodate 1 character
State abbreviations should be wide enough to accommodate 2 characters
Zip code must be wide enough to accommodate 5 characters
Pin numbers reflect the number of digits expected
Why we stack inputs
Do not put forms in multiple columns.
People are accustomed to scrolling vertically. There is no advantage to making the page take up less vertical space.
People with low vision may be using a zoom tool, enlarging the view of their screen and thus only seeing a portion of the form. If there is a column on the right side, it will be difficult to discover the fields.
Do not place submit buttons in a sidebar unless there is also a submit button at the bottom of the form
Why we use autocomplete
Autocomplete is helpful for all customers leading to a speedier conversion
For those with motor disabilities, it eliminates the need to laboriously enter information
Use semantic HTML
Credit card information
This form uses minimal unobtrusive masking to make the credit card number more readable. (When done poorly, masking can can cause the field to be read repeatedly as the mask refreshes)
Autofill attributes to help customers complete fields with less effort.
Using inputmode="numeric" brings up the numeric keyboard on mobile devices making entry easier.
Output from inputs
Screenreader support varies
output can be used for a dynamic content that changes based on user inputs (example: a calculator).
Alternatively, using a custom element with role=”status” will achieve more predictable results