Vidéo: TUTO CSS - Styliser un formulaire 2024
De nombreux problèmes de mise en page semblent nécessiter des tables. Une utilisation intelligente du flottant CSS3 peut aider les éléments avec plusieurs colonnes sans l'overhead des tables. Les formulaires provoquent un casse-tête particulier car un formulaire implique souvent des étiquettes dans une colonne de gauche, suivies par des éléments d'entrée dans la colonne de droite.
Vous seriez probablement tenté de mettre une telle forme dans une table. L'ajout de balises de table rend le HTML beaucoup plus complexe et n'est pas requis. Il est préférable d'utiliser CSS pour gérer la mise en page.
Vous pouvez faire flotter des éléments pour créer des formes attrayantes sans avoir besoin de tables.
Au fur et à mesure que le design des pages s'implique, il est plus logique de penser séparément au HTML et au CSS. Le HTML vous donnera une idée de l'intention générale de la page, et le CSS peut être modifié séparément. L'utilisation de CSS externe est une extension naturelle de cette philosophie. Commencez par regarder floatForm. html et concentrez vous sur la structure HTML avant de vous soucier du style:
floatForm. html Nom Adresse Téléphone submit request
Pendant que vous regardez ce code, notez plusieurs choses intéressantes sur la façon dont la page est conçue:
-
Le CSS est externe. CSS est défini dans un document externe. Cela facilite le changement de style et vous aide à vous concentrer sur le document HTML de manière isolée.
-
Le code HTML est minimal. Le code est très propre. Il comprend un formulaire avec un. Le contient des étiquettes, des éléments et un.
-
Il n'y a pas de table. Il n'est pas nécessaire d'ajouter une table en tant que schéma d'organisation artificiel. Un tableau n'ajouterait pas à la clarté de la page. Les éléments de formulaire fournissent eux-mêmes assez de structure pour permettre tout le formatage dont vous avez besoin.
-
Les étiquettes font partie du design. Vous pouvez utiliser l'élément label tout au long du formulaire, en vous donnant un élément qui peut être stylé comme vous le souhaitez.
-
Tout est sélectionnable. Vous souhaiterez appliquer un style CSS aux étiquettes, un autre aux éléments d'entrée et un troisième style au bouton. Vous pouvez configurer le code HTML afin que vous puissiez utiliser des sélecteurs CSS sans nécessiter d'identifiant ou d'attributs de classe.
-
Il y a un bouton. Vous pouvez utiliser un élément de bouton au lieu de le faire exprès. De cette façon, vous pouvez appliquer un style à tous les éléments du bouton et un style différent à l'élément.
Concevoir une page comme celle-ci afin que sa structure interne offre tous les sélecteurs dont vous avez besoin est merveilleux. Cela garde la page très propre et facile à lire. Cependant, n'ayez pas peur d'ajouter des classes ou des ID si vous en avez besoin.
C'est souvent une bonne idée de regarder votre page avec du HTML avant de commencer à jouer avec CSS.
Si vous avez une page avec des styles et que vous voulez voir à quoi elle ressemblera sans les règles de style, utilisez les outils de développement Chrome ou Firebug. Vous pouvez temporairement désactiver certaines ou toutes les règles de style CSS pour voir le contenu par défaut en dessous. Cela peut parfois être extrêmement pratique.
