HTML à la rescousse de l’UX des formulaires

Retrouvez les slides en ligne sur ffoodd.fr/human-talks/.

Il était un champ…

<label for="email-1">Email</label>
<input id="email-1" type="text">

Avec un chic type

<label for="email-2">Email</label>
<input id="email-2" type="email">

Qui manque de correction

<label for="email-3">Email</label>
<input id="email-3" type="email"
          autocorrect="off" autocapitalize="off">

Un champ poli demande d’abord

<label for="email-4">Email</label>
<input id="email-4" type="email"
          autocorrect="off" autocapitalize="off"
          autocomplete="email">

Un champ qui ne manque pas de suggestions

<label for="email-5">Email</label>
<input id="email-5" type="email"
          autocorrect="off" autocapitalize="off"
          autocomplete="email"
          list="emails-5">
<datalist id="emails-5">
  <option value="g.poupard@groupeonepoint.com">
  <option value="gael@ffoodd.fr">
</datalist>

Un champ qui ne cafte pas !

Vous connaissez le spell-jacking ? 

<label for="email-6">Email</label>
<input id="email-6" type="email"
          autocorrect="off" autocapitalize="off"
          autocomplete="email"
          list="emails-6"
          spellcheck="false">
<datalist id="emails-6">
  <option value="g.poupard@groupeonepoint.com">
  <option value="gael@ffoodd.fr">
</datalist>

Dites un nombre

<label for="number-1">Nombre</label>
<input id="number-1" type="number">

Nombre d’aides à la saisie

Le design system de GOV.uk a détaillé en quoi le type="number" n’est pas optimal. 

<label for="number-2">Nombre</label>
<input id="number-2" type="text"
          inputmode="numeric"
          pattern="[0-9]*">

Après la soumission…

<label for="number-3">Nombre</label>
<input id="number-3" type="text"
          inputmode="numeric"
          pattern="[0-9]*"
          enterkeyhint="search">

Merci, et à bientôt

Références

Stéphanie Walter a publié un guide extrêmement complet pour aider vos utilisateurs à remplir vos formulaires, sur Smashing Magazine , et Alex Holacheck a créé un configurateur de champs de formulaires pour mobile.

Crédits