Overview

This article specifically focuses on the design and development of sign-in forms and should be used as a reference only in this scope.

It does not seek to provide a comprehensive guide to building web forms and should not be regarded as such.

Table Of Contents

1 — HTML

1.1 — HTML Code Example

2 — Types & Attributes

2.1 — Types

2.1.1 — Code Examples Using Types

2.2. — Attributes

2.2.1 — Code Examples Using Attributes

3 — CSS

3.1 — CSS Code Examples

4 — JS

5 — A Quick Recap

6 — References

HTML

• Give each input its own <label> element, and prefer <label> over <placeholder> if you must choose between the two. While <placeholder> tags can be useful, they should NOT be used to substitute or replace <label> elements.
• Place the <label> element above the <input> element.
• Don't force users to input information twice; yes, this extends to emails and passwords. Instead, have them confirm their account ownership by sending a confirmation email and make it simple for them to reset their password.

"When designing sign-in forms, strive to enforce the password quality over the password quantity."

• Use <button> tags for buttons, and make consider making "SUBMIT" buttons more descriptive. Use wording like "Sign In" or "Subscribe" so the user knows what to expect after clicking.
• 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.

HTML Code Example

    <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>

Types & Attributes

• Additional details can (and should) be added to sign-in forms, providing additional context to the browser.
• The <input> tag, along with its HTML siblings <select> and <textarea>, accepts two kinds of parameters— types and attributes.

Types

• The value of type defaults to "text", but "email" and "password" are the preferred types to use with their respective inputs.
• Password inputs should always define their type as such <input type=password> for security purposes. This signals the browser to render the user's password hidden by default.

Code Examples Using Types

    <input type="email">
    <input type="password">

    <button type="submit"> // or // <input type="submit">

Attributes

• As with types, some attributes, like autocomplete, can smooth out the user experience when signing in.
• Modern browsers use inference from these attributes to help decide when to display a password strength meter, offer to save a new or updated password, or autocomplete the form with credentials previously stored on the user's behalf.
• A quality sign-in form will add the autocomplete attribute to all relevant inputs, allowing the browser's settings and/or the user's preferences to decide how to utilize the provided hints.
• In addition, the required attribute can (and should) be used in all email/username and password fields.

Code Examples Using Attributes

    <input type-"email" autocomplete="email" required>
    <input type="text" autocomplete="username" required>

    <input type="password" autocomplete="new-password" required> 
    <input type="password" autocomplete="current-password" 
    required>

    <input type="number" autocomplete="one-time-code">

CSS

• Use approximately 16px/1rem of padding for mobile as a general rule of thumb.
• Same as above, but only 10px/0.625rem on the desktop.
• All inputs and buttons should be visible and give enough room to tap each element in mobile view.
• Design for thumbs, not fingers.
• Increase font-size on mobile by at least 2px. Sometimes up to 4px may be necessary with specific fonts.
• Leverage the browser's built-in ability to detect invalid input. You don't need JavaScript; render the :invalid attribute with <color: red> in the CSS.

CSS Code Examples

    /** GOOD */
    input[type=email]:invalid {
    color: red;
    }

    /** EVEN BETTER */
    input[type=email]:not(:placeholder-shown):invalid {
    color: red;
    }

JS

• 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 only to request the email on the initial screen, then defer to a second screen before requiring the password input.
• Use JavaScript to render a "SHOW PASSWORD" icon or text button.
• IMPORTANT: Provide additional form validation to sanitize user input before sending it to the server by checking against the expected REGEX cases and MIME types.

A Quick Recap

Let me condense everything you have just read into two sentences containing the key takeaways.

Most sign-in forms can provide the same level of functionality or even better by leveraging the native ability of HTML5 and CSS while using less JavaScript. This approach delivers improvements on many fundamental levels, including accessibility, Core Web Vitals, PWA criteria, and design simplicity.

To view the list of references I consulted for this article, please scroll to the bottom of the page; perhaps you will find them helpful.

Don't forget to 💖 this article and leave a 💭. If you're feeling extra generous, please click my name below to 🎆subscribe🎇!

Thank you for reading!

-- killshot13

Michael R.Follow

Full-Stack Web Developer— Websites · Web Applications · WordPress · SEO · MongoDB · UGA/GA4 Certified · Windows Insider · WP Core · Ethical Hacker · USAF Veteran

References

1. Use cross-platform browser features to build a sign-in form

2. Decoding password security: Six key password tips for 2021

3. <.input>: The Input (Form Input) element