Missing alt texts

_georgemoller-status-1411388009556099072.txt

// Alt text for https://twitter.com/_georgemoller/status/1411388009556099072

By George Moller @_georgemoller

Part 2
7 HTML forms best practices


01: Use the `enterkeyhint` attribute on form inputs to set the mobile keyboard enter key label:

`<input enterkeyint="next" />`
Takes the user to the next field that accepts text

`<input enterkeyint="prev />`
Takes the user to the previous field that accepts text

`<input enterkeyint="search />`
Takes the user to the results of searching for the text they have typed

`<input enterkeyint="done />`
Last input of the form.

For illustration, see these two mobile screens with simple login form and active keyboard with emphasized bottom right key that triggers primary "enter key" action:
- The first screen has caption `enterkeyhint="next"` and displays form with focus in "email" text field with some address entered. Primary action button's text is changed to arrow pointing right touching vertical bar, i.e. symbol usually representing "next item" or "tabulation stop".
- The second screen has caption `enterkeyhint="done"` and has both email and password files filled. Focus is presumably in the password field. Primary action button displays check-mark.


02: Use single name input

Unless you have very good reason:
- Don't have two separate fields for the name (like first name, last name).
- Don't add a separate input for a prefix or title (like Mrs., Dr or Lord).

Illustrations:

Input label: 'Full name (asterisk)'
Input with dimmed placeholder "e.g. John Doe"
Code sample: `<input autocomplete="name" />`

When a user starts to type in a field, the browser should display options to fill in the field, in this case only name related options.


03 Help users avoid re-entering payment data

Add appropriate autocomplete values in payment card forms, including the payment card number, name on the card, and expiry month and year.

Code samples:

<input autocomplete="cc-number" />
<input autocomplete="cc-name" />
<input autocomplete="cc-exp-month" />
<input autocomplete="cc-exp-year" />


04 Make buttons helpful

For submit buttons you can use `<button>` or `<input type="submit">`, but don't use `div` or some other random element acting as a button.

Also:
- Don't disable a submit button on form completion or validation.
- Do disable a submit button once user has tapped or clicked it.
- Give each form submit button a value that says what it does, e.g. label the submit button on your delivery address form 'proceed to Payment' rather than 'Continue' or 'Save'.


05 Use autocomplete attribute to improve accessibility and help users avoid re-entering data.

Some common values and effect on the user agents:

Code `<input autocomplete="on" />` [means that]:
autocomplete is enabled but no guidance is given to the browser.

Code ;<input autocomplete="country" />`:
A country or territory code.

Code `<input autocomplete="organization" />`:
A company or organization name.

<input autocomplete="username" />:
A user name or account name.

For a full list of autocomplete values visit Autocomplete entry at Mozilla Developer Network  (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)


06 Choose the most appropriate input type for your data to simplify input.

Mobile keyboard with alphabet, dot, slash and ".com" keys is displayed for code
`<input type="url" />`
For entering URL. It must start with a valid URI scheme, for example http://, ftp:// or mailto:.   

Mobile keyboard with at-sign and dot is displayed for code
`<input type="email" />`
For entering email addresses, and hints that at-sign should be shown on the keyboard by default.


07 Make your form accessible:

At the base minimum, make sure:
- To set autofocus on the first form input.
- [that] You can navigate your form with just the Tab key.
- To use a label, in cases you don't use a label, add it anyways and hide it [visually] with CSS.
- To include and instructions with specific fields using aria-describedby attribute.

Example codes and remarks:

<label for="username">Username</label>
<input id="username" type="text" required autofocus>

<label for"password">Password</label>
<input id="password" type="password" required aria-describedby="password-hint" />

<span id="password-hint">
  Password must be 8–15 characters [long] and include letters and numbers.
</span>

Remark: Notice matching "for" and "id" attributes in label and input elements, "autofocus" attribute in the first input, and matching "aria-describedby" and "id" of the second input and last span.


Did you find it useful?
Let me know in the comments 🙏