Top 14 Form Usability Tips

0. USE HTML5 <input> types!!

<input type="cool stuff" />

Accessibility Support - search for "type" or

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

Web Addresses

<input type="url">
Requires only http:// or https:// to validate.

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">
How would you rate this tool?

Required Fields

<input id="q" required>

Form Validation - it mostly happens.