Signup and login forms

Based on EvilMartians' article See https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms

Set 'autocomplete'

- It allows password managers to distinguish a login form (current-password) from a sign-up form (new-password) - Don’t set autocomplete="off" if you don’t know what are you doing!

Set type="email"

All clickables should use <button> or <a>, not <div> or <span>

Wrap the fields and submit <button> within <form> tags.

Form submission using Enter only works if the fields are inside <form> tags and there is a single submit button

Avoid using placeholder as a <label>

The placeholder attribute was created to show an example of a potential input, not to describe that input. Moreover, placeholder values will be hidden while users are entering the data, and they also often have contrast issues.

Wrap checkbox inputs within <label> tags

- <input type="checkbox"> I agree with the privacy policy + <label> + <input type="checkbox"> I agree with the privacy policy + </label>

Add a visible :focus state

When it comes to forms, in general, every user will make use of the keyboard. So, we need to think about how our UIs are accessible from the keyboard.

Mark invalid fields for screen-readers

<input type="email" autocomplete="username" - class="invalid"> + required aria-invalid="true" aria-errormessage="email-error"> <div id="email-error">Enter a valid email address</div> "aria-invalid" and "aria-errormessage" display validation errors for screen-reader users

Prevent validation in the middle of user input

We don’t want to distract or confuse users with error animations while they’re inputting data into a form, so don’t display a Not valid email error before a user hasn’t finished their input. As a solution, use change instead of keyup for validation once the user has finished their input (by moving to another control or by submitting the form). Of course, we can use still input/keyup, but only to hide errors during input.

Prevent forms from being sent twice

User can often accidentally double-click instead of a single-click. So, to prevent showing some server error, it’s better to disable the button upon form submission.

With AJAX, think about network latency and server/network errors

form.addEventListener('submit', async () => { - await fetch(…) + try { + showLoader() + await fetch(…) + } catch (e) { + showError(e) + } finally { + hideLoader() + } })