Comment créer un formulaire réactif avec Flexbox

Dans ce didacticiel, nous allons apprendre à tirer parti de flexbox pour créer un formulaire réactif. Ce qui est intéressant (et excitant en même temps), c’est que flexbox nous permet de construire notre formulaire sans utiliser de requêtes multimédia..

Avant de commencer, voyons ce sur quoi nous allons travailler (vérifiez la version plus grande pour voir comment la disposition du formulaire change):

Structure de formulaire

D'abord, commençons par creuser la structure du formulaire. Nous allons le marquer comme suit:

• Nous allons utiliser le .flex-externe liste non ordonnée pour regrouper les différents éléments de formulaire
• et le .flex-inner liste non ordonnée pour regrouper les cases à cocher. 
• Presque tous les contrôles de formulaire viennent avec leur étiquette associée.

C'est tout! En définissant seulement deux listes non ordonnées (nous aurions aussi pu utiliser des listes ordonnées), nous avons construit un formulaire très net. Voici à quoi ça ressemble:

 
 
 Prénom  
 
 Nom de famille  
 
 Email  
 
 Téléphone  
 
 Message  
 
 
Âge
 
  
 
 
 Soumettre 
 
 

Remarque: nous utilisons le p élément au lieu de étiquette élément avant la .flex-inner liste. En effet, dans ce cas particulier, cela n’a aucun sens d’utiliser le étiquette étiquette. Cette balise doit être utilisée uniquement pour associer une étiquette de texte à un contrôle de formulaire..

Voici le balisage pour les cases à cocher:

 
  20-29 
 
  30-39 
  

Avec le balisage prêt, la forme non stylée ressemble à ceci:

Ce ne sera pas la forme la plus chic que vous ayez jamais vue, mais ça marche! C'est sémantique, accessible et fluide; aspects qui sont sans doute plus importants que tout.

À ce stade, nous sommes prêts à appliquer certains styles..

Styles de formulaire

Commençons par ajouter normaliser et préfixe automatique à nos paramètres de stylo:

Nous identifierons ensuite les conteneurs flexibles. Dans notre cas, les éléments suivants:

• Chacun des éléments de la liste des .flex-externe liste. 
• le .flex-inner liste qui contient toutes les cases à cocher.

De plus, nous souhaitons centrer verticalement les éléments flexibles sur l’axe transversal..

Pour obtenir ce comportement, nous avons défini certaines règles CSS initiales:

.flex-outer li, .flex-inner display: flex; enveloppe souple: enveloppe; align-items: centre; 

L'étape suivante consiste à spécifier les largeurs des éléments flexibles. Nous commençons par les éléments flexibles du .flex-externe liste.

Les principales exigences:

• La largeur des étiquettes doit être d’au moins 120 pixels et d’au plus 220 pixels.. 
• La largeur des éléments de formulaire qui suivent les étiquettes doit être d'au moins 220 pixels..

Qu'est-ce que cela nous donne? Chaque étiquette ainsi que son élément de formulaire associé seront affichés sur une seule ligne horizontale lorsque la largeur du formulaire totalise au moins 340 pixels. Dans tous les autres cas, tous les éléments de formulaire (à l'exception des cases à cocher comme nous le verrons dans un instant) s'empileront verticalement.

Remarque: les valeurs susmentionnées sont arbitraires - vous pouvez les modifier en fonction de vos besoins.

.flex-outer> li> étiquette, .flex-outer li p flex: 1 0 120px; largeur maximale: 220px;  .flex-outer> li> étiquette + *, .flex-inner flex: 1 0 220px; 

Bouton de soumission

Enfin, pour le bouton de soumission, qui est également un élément flex, nous définissons quelques styles de base:

.bouton li flex-outer marge-gauche: auto; rembourrage: 8px 16px; bordure: aucune; arrière-plan: # 333; couleur: # f2f2f2; text-transform: majuscule; espacement des lettres: .09em; border-radius: 2px;  

Cases à cocher

Appelons maintenant les cases à cocher. Rappelez-vous que leur emballage souple a une largeur minimale de 220px.

Tout d'abord, nous définissons la largeur des éléments flex qui sont les parents immédiats des cases à cocher à 100px:

.flex-inner li width: 100px; 

Ensuite, nous profitons de la justifier le contenu propriété pour les aligner sur l’axe principal. Notez que cette propriété a des valeurs différentes, mais pour cet exemple, nous ne nous intéressons qu'à la l'espace entre valeur:

.flex-inner justifier-contenu: espace-entre; 

Cette valeur fonctionne bien et nous permet d’obtenir un alignement cohérent des cases à cocher et de leurs libellés respectifs. Une chose que nous devons mentionner est que cette valeur de propriété peut répartir les éléments de la dernière ligne de manière maladroite. À certaines largeurs de fenêtres, vous verrez quelque chose comme ceci:

Notez l'alignement des deux derniers éléments flexibles. Si, pour une raison quelconque, vous n'aimez pas cette disposition et si vous préférez qu'elles apparaissent côte à côte, vous pouvez essayer quelque chose comme ceci: 

• Retirer le justifier le contenu propriété de l'emballage flex.
• Utilisez des pourcentages pour ajouter une largeur fixe aux éléments flexibles (par exemple,. largeur: 50%).
• Utilisez des requêtes multimédia pour remplacer cette largeur. Par exemple, lorsque la largeur de la fenêtre est supérieure à 992 pixels, donnez des éléments flex largeur: 25% au lieu de largeur: 50%.

Surtout, il est important de comprendre deux choses:

• La Flexbox nous donne une grande flexibilité pour créer rapidement de belles formes
• et toutes les valeurs susmentionnées fonctionnent bien pour cet exemple spécifique. Pour vos propres conceptions, vous aurez probablement besoin de valeurs différentes. Par exemple, ici, les étiquettes des cases à cocher sont assez petites et pour cette raison, nous donnons à leur parent une largeur fixe (c’est-à-dire 100 pixels). Cependant, s’ils ont des largeurs différentes, il serait peut-être plus judicieux de leur donner flex: 1 100px. 

Styles finaux

Avant de partir, ajoutons un peu d’esthétique pour rendre les choses plus présentables. Choisissez l'onglet CSS dans la démo ci-dessous pour voir où les couleurs et l'espacement ont été ajoutés:

Conclusion

Comme vous pouvez le constater, avec un minimum de balises et la puissance de Flexbox, nous avons réussi à créer un formulaire réactif. J'espère maintenant que vous avez acquis des connaissances utiles qui vous aideront à créer vos propres formulaires Flexbox.. 

Prochaines étapes

Si vous voulez pousser ce formulaire un peu plus loin, j'ai deux défis à vous relever:

• Améliorez son apparence en remplaçant les styles par défaut (par exemple, ajoutez des cases à cocher personnalisées).
• et le rendre dynamique. Par exemple, si vous connaissez WordPress, voyez s'il est possible de créer un formulaire de contact 7 ou un formulaire Ninja qui préserve la structure et les styles de ce formulaire..