:

Top 14 Form Usability Tips

0. USE HTML5 <input> types!!

<input type="cool stuff" />

Accessibility Support - search for "type" or

text
email
url
tel
number * (See UK.gov)
date * (see Hassell Inclusion)
month
password
range
color

Changes the Mobile keyboard

Help User Fill in Your Mobile Form (Part 2)

Current @type implementation

These work even if the browser does not understand HTML5. All are accessible in operation.

Always use with inputmode="" to help browser decide which type of onscreen keyboard to present to users. Here’s a demo. CanIUse info MDN info

Mode types

none
numeric
tel
decimal
email
url
search

Web Addresses

<input type="url">

Numbers as Spinbox

<input type="number" min="0" max="10" step="2" value="6">

use <input type="text" inputmode="numeric" pattern="[0-9]*">

Numbers as Sliders

<input type="range" min="0" max="10" step="1" value="8">

Required Fields

<input id="q" required>

Form Validation - it mostly happens.