Web Design

Les formulaires

Usages

• Contact
• Newsletter
• Inscription / Connexion
• Ajouter un article
• Paiement
• …

Champ formulaire

On retouvre un ou plusieurs champs dans un formulaire, composés généralement d'au moins 3 élements :

• un label qui indique la nature de l'information attendue et si elle est indispensable à la complétion.
• un champ à compléter
• un placeholder qui donne un exemple d'information attendue

Types de champs

• Texte / mail : information textuelle basique
• Message : permet de rédiger des textes sur plusieurs lignes
• Sélection : permet de choisir parmis plusieurs options sous forme d'un menu déroulant
• Checkbox : permet de cocher aucune, une ou plusieurs valeurs.
• Radio : permet de cocher une seule valeur.

Créer un champ simple

Dans une frame desktop, avec une grille en 12 colonnes, 96px de marges et 32px de gouttières. Nous allons créer 2 élements textuels pour le label et la mention required et les grouper dans une frame :

Ensuite on active l'auto-layout horizontal avec un espacement auto, et redimensionner notre frame pour que sa largeur occupe 3 colonnes :

En dehors de notre frame label, nous allons rajouter en dessous un autre élément texte Placeholder qui sera la base de notre champ que nous allons englober d'une frame. Pour le visualiser correctement nous allons rajouter un contour de couleur #CCCCCC et d'une épaisseur de 1px :

Cette frame champ doit elle aussi être en auto-layout horizontal, avec 16px de padding vertical et 8px de padding horizontal.

La dernière étape consiste à grouper nos 2 frames (label et champ) dans un seule frame que nous allons mettre cette fois ci en auto-layout vertical :

On oublie pas de demander à nos 2 frames label et champ d'avoir une largeur en fill (ou remplir le contenant) :

Exercice

À terminer pour le prochain cours :

Consignes

Reproduire le design suivant avec ces directives :

• Dans une frame desktop 1440 x 1024 et avec une grille de 12 colonnes, 96px de marges, 32px de gouttières
• Respecter le contenu textuel
• Utiliser un composant avec des variantes pour le champs
• Réorganiser les champs de manières à optimiser le place qu'ils occupent dans les colonnes
• Aligner sur la grille
• Adaptation du design en version mobile, dans une frame iphone 13 & 14, 6 colonnes, 32px de marges, 16px de gouttières