Les formulaires et les entrées correctement coiffés avec CSS améliorent la convivialité et le professionnalisme. Commencez par réinitialiser les styles de navigateur par défaut pour une apparence cohérente entre les éléments tels que les champs de texte, les dropdowns, les cases à cocher et les boutons à l'aide de la bordure, du rembourrage, de la taille de la police et de la frontière. Appliquer la largeur: 100% pour un ajustement d'entrée réactif et utiliser la marge-fond: 1REM; Pour l'espacement vertical entre les éléments groupés à l'intérieur des divs ou des étiquettes de groupe de forme. Améliorez l'interaction avec la concentration et les effets de survol tels que les changements de couleur de bordure et les ombres de bo?te sur l'entrée: la mise au point et les indices de survol subtils. Personnalisez les cases à cocher et les boutons radio en cachant des entrées natives et en créant des alternatives stylables via des étiquettes et des pseudo-éléments, garantissant que les états vérifiés sont visuellement distincts. Assurer la réactivité en utilisant des dispositions FlexBox ou Grid, en empilant des éléments verticalement sur de petits écrans via des requêtes multimédias et en définissant des tailles de cible tactile minimales de 44x44 pixels. Ces techniques ensemble créent des conceptions de formulaires propres, fonctionnelles et adaptatives qui améliorent l'expérience utilisateur.

Les formulaires de style et les entrées avec CSS peuvent sembler simples, mais il est facile d'oublier de petits détails qui font une grande différence dans la convivialité et l'apparence. Un formulaire propre et bien style peut améliorer l'expérience utilisateur et rendre votre site plus professionnel.

Voici quelques conseils et techniques pratiques pour vous aider à styliser efficacement les formes à l'aide de CSS.

Style de base

Commencez par appliquer des styles cohérents sur tous les éléments d'entrée. Cela inclut les champs de texte, les listes déroulantes, les cases et les boutons. La plupart des navigateurs appliquent des styles par défaut pour former des éléments, ce qui peut varier entre les plates-formes. Pour obtenir un look uniforme, réinitialisez d'abord ces défauts:

 Entrée, sélectionnez, TextArea {
  Border: 1px solide #ccc;
  rembourrage: 8px;
  taille de police: 1rem;
  Border-Radius: 4px;
  Aper?u: aucun;
}

Vous voudrez également définir une largeur cohérente pour la plupart des entrées (en particulier les champs de texte et les listes déroulantes). L'utilisation width: 100% à l'intérieur d'un conteneur les aide à bien s'intégrer dans les dispositions réactives.

Une autre chose à considérer est l'espacement. Donnez à chaque élément de forme suffisamment de place pour respirer en ajoutant la marge sous chacun:

• Utiliser margin-bottom: 1rem; pour l'espacement vertical.
• éléments liés au groupe (comme les étiquettes et les entrées) à l'intérieur des éléments <div> ou <form-group> .

Cela rend la forme plus facile à numériser et à interagir.

Focus d'entrée de style et états de survol

Les utilisateurs ont souvent besoin de commentaires visuels lors de l'interaction avec les éléments de formulaire. L'ajout d'effets de mise au point et de survol améliore l'accessibilité et la sensation d'interaction.

Par exemple, modifiez la couleur de la bordure et ajoutez une ombre de bo?te subtile lorsqu'une entrée est concentrée:

 Entrée: Focus, SELECT: focus, textarea: focus {
  Color à la frontière: # 66AAFF;
  Box-shadow: 0 0 0 2px RGBA (102, 170, 255, 0,3);
}

Envisagez également de styliser l'état de survol afin que les utilisateurs sachent qu'ils peuvent cliquer ou taper dans le champ:

 Entrée: Hover, SELECT: Hover {
  Color à la frontière: # 999;
}

Ces petites touches aident à guider l'attention de l'utilisateur et à rendre le formulaire plus réactif.

Personnalisation des cases à cocher et des boutons radio

Les cases à cocher par défaut et les boutons radio peuvent être difficiles à styliser directement car les navigateurs contr?lent leur apparence. Mais il y a une solution de contournement avec HTML et CSS personnalisés.

Une méthode courante consiste à cacher l'entrée native et à créer une conception personnalisée à l'aide d'étiquettes et de pseudo-éléments comme ::before ou ::after .

Voici un moyen simple de le faire:

1. Masquer la case d'origine:

    entrée [type = "Checkbox"] {
     Affichage: aucun;
   }

2. Créez une case à cocher personnalisée visible à l'aide de l'étiquette:

    .Custom-Checkbox {
     Affichage: bloc en ligne;
     Largeur: 16px;
     hauteur: 16px;
     Color d'arrière-plan: #eee;
     Border: 1px solide #AAA;
     Position: relative;
     curseur: pointeur;
   }
   
   entrée [Type = "Checkbox"]: coché .custom-checkbox {
     Color d'arrière-plan: # 4CAF50;
   }
   
   entrée [Type = "Checkbox"]: coché .custom-checkbox :: après {
     Contenu: "?";
     Position: absolue;
     en haut: 0;
     Gauche: 4px;
     Couleur: blanc;
     taille de police: 12px;
   }

3. Dans votre HTML:

    <input type = "checkbox" id = "check1">
   <label class = "Custom-Checkbox" pour = "check1"> </ label>

Cela vous donne un contr?le total sur l'apparence de la case à cocher tout en maintenant les fonctionnalités.

Disposages de formulaires réactifs

Les formulaires doivent bien fonctionner sur les appareils de bureau et mobiles. Pour les rendre réactifs:

• Utilisez des largeurs basées sur le pourcentage ou Flexbox / Grid pour la mise en page.
• Empiler les éléments de formulaire verticalement sur des écrans plus petits à l'aide de requêtes multimédias.
• Assurez-vous que les cibles tactiles (comme les boutons et les cases) sont suffisamment grandes - au moins 44x44 pixels.

Exemple à l'aide de Flexbox:

 .form-Row {
  Affichage: flex;
  écart: 1rem;
}

@media (max-large: 600px) {
  .form-Row {
    Flex-Direction: colonne;
  }
}

Cela permet de créer une disposition propre qui s'adapte à différentes tailles d'écran sans cadres supplémentaires.

C'est essentiellement la fa?on dont vous commencez à styliser les formulaires et les entrées avec CSS. Ce n'est pas trop compliqué, mais il existe de nombreux petits choix qui affectent à la fois la conception et la convivialité. Une fois que vous avez bien obtenu les bases, vous pouvez créer des styles et des interactions plus complexes au besoin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!