Sign-in form best practices

Use meaningful HTML elements: <form>, <input>, <label>, and <button>.
Label each input with a <label>.
Use element attributes to access built-in browser features: type, name, autocomplete, required.
Give input name and id attributes stable values that don't change between page loads or website deployments.
Put sign-in in its own <form> element.
Ensure successful form submission (by navigating to a new page or simulating page navigation).
Use autocomplete="new-password” and id="new-password” for the password input in a sign-up form, and for the new password in a reset-password form.
Use autocomplete="current-password" and id="current-password" for a sign-in password input.
Provide Show password functionality.
Use aria-label and aria-describedby for password inputs.
Don't double-up inputs (e.g forcing users to enter email or password twice)
Design forms so the mobile keyboard doesn't obscure inputs or buttons.
Ensure forms are usable on mobile: use legible text, and make sure inputs and buttons are large enough to work as touch targets.
Maintain branding and style on your sign-up and sign-in pages.
Test in the field as well as the lab: build page analytics, interaction analytics, and user-centric performance measurement into your sign-up and sign-in flow.
Test across browsers and devices: form behaviour varies significantly across platforms.