Fermer

août 24, 2018

Les avantages de l'utilisation de la grille CSS pour la mise en forme de formulaire Web –


La mise en page et la conception des formulaires constituent un aspect fondamental mais frustrant de la conception et du développement Web. Demandez à quiconque a déjà essayé de styliser une boîte

Flexbox pourrait alors être utilisé pour:

  • repositionnement le cas échéant, c'est-à-dire le déplacer vers la gauche du champ sur les entrées de texte, sélectionner les cases et les zones de texte
  • alignent verticalement l'étiquette et le champ.

leur champ utilisant des sélecteurs de frères adjacents – par exemple, en gras sur une étiquette lorsque la case à cocher associée est cochée:

 input: checked + label {
  poids de la police: gras;
}

Formulaires Flexboxed défectueux

Malheureusement, il existe un certain nombre de problèmes d'utilisation de Flexbox pour la mise en forme des formulaires. Flexbox crée une mise en page unidimensionnelle où chaque élément en suit un autre et passe à une nouvelle ligne si nécessaire. Les paires champ / étiquette doivent être placées dans des éléments de conteneur avec display: flex; appliqué pour garantir que chaque élément apparaît sur une nouvelle ligne.

Il était également nécessaire de définir une largeur d'étiquette fixe, telle que 10em . Si une longue étiquette nécessitait plus d'espace, son texte déborderait ou redimensionnerait l'élément et éloignerait le champ des autres.

Enfin, les formulaires sont normalement disposés dans une grille. Ne devrions-nous pas utiliser CSS Grid maintenant qu'il est entièrement pris en charge dans tous les navigateurs traditionnels ? Absolument!

Approche de développement

La plupart des articles de la grille CSS illustrent les concepts et peuvent fournir des solutions de rechange de dégradation progressive pour les navigateurs plus anciens. Cette approche est idéale lorsque la disposition est principalement décorative – par exemple, le contenu de la page de positionnement, les en-têtes, les pieds de page et les menus. Peu importe quand oldBrowserX affiche des blocs linéaires dans un ordre inhabituel parce que le contenu de la page reste utilisable.

La mise en forme est plus critique: une étiquette mal alignée Pour cette raison, ce tutoriel adopte une approche d'amélioration progressive:

  1. Une mise en forme initiale flottante fonctionnera dans tous les navigateurs, y compris IE8 + (qui ne supporte pas non plus Flexbox).
  2. Améliorez la présentation des formulaires en utilisant CSS Grid dans tous les navigateurs modernes.

Les exemples ci-dessous contiennent très peu de classes CSS et le style est appliqué directement aux éléments HTML. Ce n'est pas la méthode BEM mais il est intentionnel de garder le code propre et compréhensible sans distractions.

Vous pourriez envisager d'utiliser un code similaire comme base pour tous les formulaires de votre site.

Un formulaire HTML typique peut être maintenu propre, car il n'est pas nécessaire de contenir des éléments (

) autour des paires champ / étiquette:


  

     Votre compétence de développement Web

Le seul élément supplémentaire est

. Les navigateurs ne peuvent pas appliquer display: grid ou display: flex à fieldset . Cela peut éventuellement être corrigé, mais un conteneur externe est actuellement requis.

Retrait flottant de la mise en forme du formulaire

Après une police et un style de couleur initiaux, la disposition flottante allouera:

  • 70% de l'espace aux champs flotté à droite
  • 30% de l'espace aux étiquettes flottant à gauche.
 / * repli 30% / 70% disposition du flotteur * /
entrée, sortie, texte, sélection, bouton {
  clarifier les deux;
  Flotter à droite;
  largeur: 70%;
}

étiquette {
  float: à gauche;
  largeur: 30%;
  text-align: droit;
  padding: 0.25em 1em 0 0;
}

Les cases à cocher et les boutons radio sont positionnés avant l'étiquette et flottent à gauche. Leur largeur intrinsèque peut être utilisée ( width: auto ) mais une marge de 30% est nécessaire pour s'aligner correctement:

 button, input [type="checkbox"]input [type="radio"] {
  width: auto;
  float: à gauche;
  marge: 0.5em 0.5em 0 30%;
}

entrée [type="checkbox"] + étiquette, entrée [type="radio"] + étiquette {
  width: auto;
  text-align: left;
}

La présentation du formulaire fonctionne dans tous les navigateurs, y compris IE8 +:

Voir le stylo grille de formulaire 1: mise en page flottante par SitePoint ( @SitePoint ) sur ].

Un développeur moins consciencieux rentrerait chez lui pour la journée, mais cette présentation de formulaire présente plusieurs problèmes:

Get Going with Grid

Le module Grid ajoute 18 nouvelles propriétés CSS mise en page avec des lignes et des colonnes. Les éléments de la grille peuvent être placés dans n'importe quelle ligne / colonne, s'étendre sur plusieurs lignes et / ou colonnes, chevaucher d'autres éléments et être alignés horizontalement et / ou verticalement. Il existe des similitudes avec Flexbox mais:

  • Flexbox est unidimensionnel. Les éléments viennent les uns après les autres et peuvent ou non être placés dans une nouvelle "rangée". Les menus et les galeries de photos constituent un cas d'utilisation typique.
  • La grille est bidimensionnelle et respecte les lignes et les colonnes. Si un élément est trop grand pour sa cellule, la ligne et / ou la colonne augmenteront en conséquence. La grille est idéale pour la disposition des pages et des formulaires.

Il est peut-être préférable de comparer la grille CSS aux dispositions basées sur des tables, mais elles sont considérablement plus flexibles et nécessitent moins de balisage. Il a une courbe d'apprentissage plus raide que les autres concepts CSS, mais il est peu probable que vous exigiez toutes les propriétés et le minimum est démontré ici. La grille la plus élémentaire est définie sur un élément contenant:

 .container {
  affichage: grille;
}

Plus concrètement, les dispositions nécessitent également le nombre de colonnes, leur taille et l'écart entre les lignes et les colonnes. Par exemple:

 .container {
  affichage: grille;
  colonnes grille-modèle: 10% 1fr 2fr 12em;
  écart de grille: 0.3em 0.6em;
}

Ceci définit quatre colonnes. Toute unité de mesure peut être utilisée, ainsi que l'unité fractionnaire fr . Cela calcule l'espace restant dans une grille et distribue en conséquence. L'exemple ci-dessus définit le total de 3fr sur les colonnes deux et trois. Si 600 pixels d'espace horizontal étaient disponibles:

  • 1fr équivaut à (1fr / 3fr) * 600px = 200px
  • 2fr équivaut à (2fr / 3fr) * 600px = 400px

Un espace de 0.3em est défini entre les lignes et 0.6em entre les colonnes.

Tous les éléments enfants du .container sont désormais des éléments de grille. Par défaut, le premier élément enfant apparaîtra dans la ligne 1, colonne 1. Le second dans la ligne 1, la colonne 2 et le sixième dans la ligne 2, colonne 2. Il est possible de dimensionner les lignes à l'aide d'une propriété telle que gabarits-lignes mais la hauteur sera déduite du contenu.

Le support de grille est excellent. Il n'est pas disponible dans Opera Mini, mais même IE11 offre une implémentation plus ancienne de la spécification. Dans la plupart des cas, les solutions de repli sont simples:

  • Les anciens navigateurs peuvent utiliser les présentations flexbox, floats, inline-blocks ou : table .
  • Lorsqu'un navigateur prend en charge la grille, toutes les propriétés de type Flexbox, Float, Inline-Block et Table affectées à un élément de grille sont désactivées.

Outils de grille et ressources:

Firefox et Chrome- les navigateurs basés ont d'excellents outils de mise en page et de visualisation de la grille DevTool.

Grille de formulaires

Pour améliorer progressivement la forme existante, le code de la grille sera placé dans une déclaration @supports * /
@supports (display: grid) {
  ...
}

Ceci est rarement nécessaire dans la plupart des dispositions de grille. Cependant, cet exemple réinitialise tous les marges et marges flottantes – des règles qui ne doivent apparaître que lorsqu'une grille CSS est appliquée.

La présentation du formulaire elle-même utilisera une conception à trois colonnes:

grille

Dans cette présentation de formulaire:

  • les étiquettes standard apparaissent dans la première colonne
  • et les boutons radio couvrent les colonnes un et deux (mais sont alignées à droite)
  • les autres champs couvrent les colonnes deux et trois.

Voici les propriétés du conteneur externe et du champ enfant:

 .formgrid {
  affichage: grille;
  colonnes-modèle de grille: 1fr 1em 2fr;
  écart de grille: 0.3em 0.6em;
  écoulement automatique de la grille: dense;
  align-items: centre;
}

entrée, sortie, texte, sélection, bouton {
  colonne de grille: 2/4;
  width: auto;
  marge: 0;
}

La colonne de grille définit les pistes de grille de début et de fin. Les pistes sont les bords entre les cellules, donc la disposition de la forme à trois colonnes comporte quatre pistes:

  1. la première piste à gauche de la grille avant la première colonne
  2. la piste entre les colonnes une et deux
  3. la piste entre les colonnes deux et trois
  4. la piste finale sur le bord droit de la grille après la colonne trois.

grille-colonne: 2/4; positionne tous les champs entre les pistes 2 et 4 – ou à l'intérieur des colonnes deux et trois .

Le premier élément HTML est le nom . Il couvre les colonnes deux et trois, ce qui signifie que la première colonne (piste 1/2) est vide sur cette ligne. Par défaut, le libellé name passe donc à la ligne 2, colonne 1. Cependant, en définissant grid-auto-flow: dense; dans le conteneur, le navigateur tente de remplir vider les cellules plus tôt dans la grille avant de passer à une nouvelle ligne.

Les cases à cocher et les boutons radio peuvent désormais être définis pour couvrir les pistes 1 à 3 (colonnes un et deux) mais s'aligner sur le bord droit en utilisant -self: fin :

 input [type="checkbox"]entrée [type="radio"] {
  colonne de grille: 1/3;
  justifier soi-même: fin;
  marge: 0;
}

Les étiquettes sur la grille seront gérées elles-mêmes et entreront dans la cellule vide. Cependant, les largeurs et espacements par défaut de la disposition flottante sont désormais inutiles:

 étiquette, entrée [type="checkbox"] + étiquette, entrée [type="radio"] + étiquette {
  width: auto;
  remplissage: 0;
  marge: 0;
}

Enfin, les étiquettes