This is not a conclusive listing; it rather seeks to provide a general guideline that is both accurate and useful.
It should be treated as a point of reference rather than a directive from an authority or subject matter expert.
HTML:
- Use the
<label>element, and prefer them to<placeholder>tags. - Place the
<label>element above the<input>element. - While
<placeholder>tags can be useful, DON'T use them to replace<label>element. - Don't force users to input information twice, and yes, this extends to emails and passwords. Instead, have them confirm ownership of their account by sending a confirmation email and just make it simple for them to reset their own password.
"Strive to enforce the password quality over the password quantity"
- Use
<button>tags for buttons, and make the<label>of SUBMIT buttons more descriptive. Consider using "Sign In" or "Subscribe" so the user knows what to expect on click. - A basic sign-in form should use the applicable HTML elements for each part instead of a cluster of
<div>elements rendered with countless extra lines of JavaScript.
Example Web Form HTML
<form>
<section>
<label for="email">Email</label>
<input id="email">
</section>
<section>
<label for="password">Password</label>
<input id="password">
</section>
<button>Sign In</button>
</form>
CSS:
- Use approximately 15px padding for mobile as a general rule of thumb.
- Same as above, but only 10px padding on desktop.
- All inputs and buttons should be clearly visible and give enough room to tap each individual element in mobile view.
- Design for thumbs, not fingers.
- Increase
"font-size"on mobile by at least 2px. Even 4px will be necessary with certain fonts. - Add the
"autofocus"attribute to the first input box. - Password input should always be declared as
<input type=password>. This informs the browser to render the text hidden by default. - Add the
"required"attribute to email and password fields. - Leverage the browser's built-in ability to detect invalid input. You don't need JavaScript for that; simply render the
:invalidattribute with<color: red>in the CSS.
Example Invalid Input CSS
/** GOOD */
input[type=email]:invalid {
color: red;
}
/** EVEN BETTER */
input[type=email]:not(:placeholder-shown):invalid {
color: red;
}
Optional Input Attributes ⬇
<input type="tel">
<input type="number">
<!-- Gives the browser context so it can prompt to save new
password or else autocomplete the password block assuming
the user has that feature enabled -->
<input type="current-password">
<input type="password" autocomplete="new-password">
<input type="password" autocomplete="current-password">
JS:
- Use JavaScript to render a "SHOW PASSWORD" icon or text button.
- Make sure the sign-in button stays visible on mobile and doesn't get covered by the keyboard. One nearly fail-safe way to accomplish this is to only request the email on the initial screen, then defer to a second screen before requiring the password input.
- IMPORTANT: Provide additional form validation to further sanitize user input before sending it to the server side by checking against the expected REGEX cases and MIME types.
References
Use cross-platform browser features to build a sign-in form