Userfriendly Login Form

Demo: https://ppphiiil.github.io/20210407-learning-login/

---

This points make forms userfriendly!

Form elements

---

See which form is active

``` 
input:focus{
    background-color: rgb(229, 229, 231);
    outline: none;d
}
```

Place labels above form elements, not to the left of them

``` 
.login-form > label{
    /* display */
    display:block;
    width:100%;

    /* styling */
    color:rgb(165, 167, 182);
    /* font-family: Roboto,Verdana, Geneva, Tahoma, sans-serif; */
    font-size: 1.3rem;
}
```

Arrange lists, checkboxes, and radio buttons vertically

``` 

```

enought distance between inputs

``` 

```

Use a stepped or multi-screen format for long forms

``` 

```

If you do use optional fields, clearly mark them

``` 

```

correct autocomplete="tel" / autocomplete="one-time-code" /browser auto-fill

``` 

```

keyboard usability, (tab) Make your form usable without a mouse

``` 

```

inputtype and right inputmdode for showing the right keyboard

``` 

```

Optimize the order of your form fields

``` 

```

Use a one-column layout

``` 

```

Label fields clearly and concisely

``` 

```

Show extra infos: Address users’ concerns in the place they will arise

``` 

```

Always show label helper text

``` 

```

Responsive Webdesign

``` 

```

Allow copy and paste

``` 

```

On mobile, don’t auto-hide password entry

``` 

```

Allow users to resize fields themselves where appropriate

``` 

```

Use a sans-serif typeface with a high x-height

Button

---

``` 

```

interactive button

``` 

```

Consider using the first-person on buttons "create my account"

Valitation

---

``` 

```

Use inline validation in preference to submit validation

``` 

```

Wherever possible, the system should correct format errors itself

``` 

```

Use inline validation to confirm user progress

``` 

```

Ensure that error messages help the user to fix the error

``` 

```

Disable the “Next” or “Submit” button until validation is passed

data

---

``` 

```

if you reload the page, your input is saved in Local Storage

``` 

```

Auto-save form data

sucess

---

``` 

```

Use success states

Browser

---

``` 

```

Test and optimize your form for all major browsers and devices

Test your form for speed

Form speed is often a neglected consideration during testing. Consider the following metrics:

Links

https://trydesignlab.com/blog/ui-design-best-practices-form-design-ux-part-1/ https://css-tricks.com/better-form-inputs-for-better-mobile-user-experiences/

---

Vorlage

Text

``` 

```