Sign In Form Best Practice

Question 1

Why use a plain form element for a sign-in page?

Answer 1

A form tag makes the form more accessible and enables standardized handling for forms across platforms.

Question 2

Using a __ element instead of JavaScript to handle sign in allows the form to work even if JavaScript fail.s

Answer 2

Using a FORM element instead of JavaScript to handle sign in allows the form to work even if JavaScript fail.s

Question 3

Do not use ___ as a replacement for input labels.

Answer 3

Do not use PLACEHOLDERS as a replacement for input labels.

Question 4

Requiring users to enter passwords or emails twice can increase ___.

Answer 4

Requiring users to enter passwords or emails twice can increase abandonment.

Question 5

Allows users to _____ emails instead of requiring the user to enter the email twice.

Answer 5

Allows users to confirm emails instead of requiring the user to enter the email twice.

Question 6

Make it easy for users to _____ passwords instead of requiring users to enter a password twice.

Answer 6

Make it easy for users to reset passwords instead of requiring users to enter a password twice.

Question 7

Button text should _____.

Answer 7

Button text should say what the button does.

Question 8

Include prompts telling users what is wrong if the form _____ or _____.

Answer 8

Include prompts telling users what is wrong if the form isn’t filled out correctly or missing a required field.

Question 9

Use padding of __ to __ px in inputs.

Answer 9

Use padding of 10 to 15 px in inputs.

Question 10

Add _____ of margin between inputs to make it easy to use on touch devices.

Answer 10

Add about a finger width of margin between inputs to make it easy to use on touch devices.

Question 11

Design inputs and buttons for _____ as this is often how users interact with a touch device.

Answer 11

Design inputs and buttons for thumbs as this is often how users interact with a touch device.

Question 12

Make text big. Around _____ on desktop to _____ for mobile. Lighthouse can be used to address font sizing.

Answer 12

Make text big. Around 16px on desktop to 24px for mobile. Lighthouse can be used to address font sizing.

Question 13

Use _____ css selector to style invalid input.

Answer 13

Use :invalid css selector to style invalid input.

Question 14

Use email and password input _____.

Answer 14

Use email and password input types.

Question 15

Don’t use _____ input type for data like telephone numbers.

Answer 15

Don’t use number input type for data like telephone numbers.

Question 16

Consider asking for email and password _____ so that users have only one thing to do in a given stage of signing in.

Answer 16

Consider asking for email and password as two separate steps so that users have only one thing to do in a given stage of signing in.

Question 17

Use _____ as the value of the name attribute for the password input of a sign in form.

Answer 17

Use current-password as the value of the name attribute for the password input of a sign in form.

Question 18

Use _____ as the value of the name attribute for the password input of a sign up form.

Answer 18

Use new-password as the value of the name attribute for the password input of a sign up form.

Question 19

The input _____ attribute allows browsers to enable auto-complete features on the input.

Answer 19

The input name attribute allows browsers to enable auto-complete features on the input.

Question 20

Some browsers require using an _____ attribute to enable autocomplete support.

Answer 20

Some browsers require using an autocomplete attribute to enable autocomplete support.

Question 21

Add _____ attribute to require email and password fields.

Answer 21

Add required attribute to require email and password fields.

Question 22

Add a _____ icon to the password input using JavaScript.

Answer 22

Add a show password icon to the password input using JavaScript.

Question 23

Include _____ on the show password icon to warn that clicking will reveal the password on the screen.

Answer 23

Include aria-label on the show password icon to warn that clicking will reveal the password on the screen.

Question 24

Use _____ attribute on the password input to explain password requirements.

Answer 24

Use aria-describedby attribute on the password input to explain password requirements.

Question 25

Use _____ for more robust client side validation as users complete the form.

Answer 25

Use JavaScript for more robust client side validation as users complete the form.

Question 26

Use _____ and set _____ to learn and improve performance of sign in forms.

Answer 26

Use analytics and set goals to learn and improve performance of sign in forms.

Question 27

Don’t make users _____ for sign in to reduce abandonment.

Answer 27

Don’t make users hunt for sign in to reduce abandonment.

Question 28

_____ complexity to reduce abandonment.

Answer 28

Minimize complexity to reduce abandonment.

Question 29

Allow users to use a _____ instead of email to reduce abandonment. Sometimes user don’t wish to share email.

Answer 29

Allow users to use a phone number instead of email to reduce abandonment. Sometimes user don’t wish to share email.

Question 30

Keep branding and style consistent with the rest of the web site to _____.

Answer 30

Keep branding and style consistent with the rest of the web site to reduce abandonment.