Des formulaires bien conçus aident les utilisateurs et augmentent les taux de conversion. Une petite correction peut faire toute la différence !
Voici un exemple de formulaire de paiement simple qui illustre toutes les bonnes pratiques:
Voici un exemple de formulaire d'adresse simple qui illustre toutes les bonnes pratiques:
Par exemple, le code HTML suivant spécifie une année de naissance entre 1900 et 2020. L'utilisation de type="number" limite les valeurs d'entrée aux nombres, dans la plage spécifiée par min et max. Si vous tentez de saisir un nombre en dehors de la plage, l'entrée sera définie comme présentant un état non valide.
L'exemple suivant utilise pattern="[\d ]{10,30}" pour garantir un numéro de carte de paiement valide, tout en autorisant des espaces:
Les navigateurs récents effectuent également une validation de base pour les entrées de type email ou url.
Mise en page sous forme de grille CSS
La mise en page sous forme de grille CSS permet de créer facilement des grilles flexibles.
Si nous considérons l'exemple flottant précédent, plutôt que de créer les 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 en grille standards, 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 ci-dessous, nous avons autant de fiches que possible par ligne, avec une taille minimale de 200px.
En savoir plus sur la mise en page sous forme de grille CSS
Mise en page à plusieurs colonnes
Pour certains types de mise en page, vous pouvez utiliser la mise en page à plusieurs colonnes (Multicol), qui permet de créer un nombre responsif de colonnes avec la propriété column-width.
Dans la démonstration ci-dessous, vous pouvez voir que des colonnes sont ajoutées s'il y a de la place pour une autre colonne 200px.