Glitch

Les formulaires bien conçus aident les utilisateurs et augmentent les taux de conversion. Un petit correctif peut faire toute la différence.

Si vous préférez découvrir ces bonnes pratiques à l'aide d'un tutoriel, consultez les deux ateliers de programmation suivants: Atelier de programmation sur les bonnes pratiques pour les formulaires de paiement et Atelier de programmation sur les bonnes pratiques pour les formulaires d'adresse.

Voici un exemple de formulaire de paiement qui respecte toutes les bonnes pratiques:

Voici un exemple de formulaire d'adresse simple qui respecte toutes les bonnes pratiques:

Par exemple, le code HTML suivant spécifie une entrée pour une année de naissance comprise entre 1900 et 2020. L'utilisation de type="number" limite les valeurs d'entrée à des nombres uniquement, dans la plage spécifiée par min et max. Si vous essayez de saisir un nombre en dehors de la plage, la saisie sera définie comme étant dans un état non valide.

L'exemple suivant utilise pattern="[\d ]{10,30}" pour s'assurer qu'un numéro de carte de paiement est valide, tout en autorisant les espaces:

Les navigateurs modernes effectuent également une validation de base pour les entrées de type email ou url.

Mise en page en grille CSS

La mise en page CSS Grid permet de créer facilement des grilles flexibles. Si nous considérons l'exemple précédent avec flottaison, plutôt que de créer nos colonnes avec des pourcentages, nous pouvons utiliser la mise en page en grille et l'unité fr, qui représente une partie de l'espace disponible dans le conteneur.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Vous pouvez également utiliser la grille pour créer des mises en page régulières, avec autant d'éléments que possible. Le nombre de pistes disponibles diminue à mesure que la taille de l'écran diminue. Dans la démonstration, nous avons autant de fiches que possible sur chaque ligne, avec une taille minimale de 200px.

En savoir plus sur la mise en page en grille CSS

Mise en page multicolonne

Pour certains types de mise en page, vous pouvez utiliser la mise en page multicolonne, qui peut créer un nombre de colonnes responsif avec la propriété column-width. Dans la démonstration, vous pouvez voir que des colonnes sont ajoutées s'il y a de la place pour une autre colonne 200px.