Comment concevoir des formulaires dans CSS

Faire votre forme esthétiquement belle est une tâche importante si vous souhaitez améliorer l'expérience utilisateur. Un formulaire HTML est le plus souvent composé de certains champs d'entrée, menus et bouton, vous pouvez donc appliquer diverses propriétés CSS pour améliorer l'apparence de la forme. Nous allons vous présenter des moyens qui peuvent être appliqués pour embellir les formulaires HTML.

Commençons.

Définir la largeur des champs d'entrée

Nous savons tous que les champs d'entrée ont une certaine largeur par défaut, cependant, nous pouvons également modifier la largeur en fonction de notre désir. Pour modifier la largeur d'un champ de saisie, suivez le code ci-dessous.

Html

Entrez votre prénom

Ici, nous avons créé un champ d'entrée.

CSS

saisir
Largeur: 80%;

Nous attribuons le champ de saisie une largeur de 80%.

Note: La largeur d'un champ de saisie peut être spécifiée dans px, em, et pourcentage.

Sortir

La largeur du champ d'entrée a été modifiée en fonction de notre désir.

Ajouter de l'espace à l'intérieur des champs d'entrée

Pour améliorer l'espace à l'intérieur du champ de saisie, utilisez la propriété CSS Padding. De plus, pour ajouter de l'espace à l'extérieur du champ de saisie, lorsqu'il y a plusieurs champs d'entrée, ajustez la marge du champ de saisie.

CSS

entrée [type = texte]
Largeur: 80%;
rembourrage: 15px 20px;
marge: 9px 0px;

En plus de donner au champ de saisie une largeur, nous lui avons également donné un rembourrage et des marges.

Sortir

L'espace a été ajouté à l'intérieur et à l'extérieur du champ de saisie.

Comme vous pouvez le voir dans le code ci-dessus, nous avons utilisé Type = Texte pour styliser le champ de saisie. Il existe également d'autres types sur la base desquels vous pouvez styliser les champs d'entrée tels que Type = Mot de passe (cela ne fera que styler les champs de mot de passe), ou Type = Number (cela ne sera que des champs de numéro), etc.

Ajout de frontières aux champs d'entrée

Vous pouvez ajuster la taille et la couleur des champs d'entrée en utilisant les propriétés de la bordure CSS, en outre, pour ajouter plus de style comme les coins arrondis, utilisez la propriété Border-Radius.

CSS

entrée [type = texte]
Largeur: 80%;
rembourrage: 15px 20px;
marge: 9px 0px;
Border: 2px bleu massif;
Border-Radius: 5px;

Dans le code ci-dessus, nous attribuons une bordure de 2px aux champs d'entrée avec une couleur bleue. De plus, pour faire les coins autour, nous avons réglé le radius frontalier à 5px.

Sortir

Le rayon des frontières et des frontières des champs a été ajusté en fonction du désir.

Une autre chose amusante que vous pouvez faire est d'ajouter la bordure inférieure uniquement, en utilisant la propriété de la frontière comme celle-ci.

CSS

entrée [type = texte]
Largeur: 80%;
rembourrage: 15px 20px;
marge: 9px 0px;
Border: aucun;
Border-Bottom: 2px bleu massif;

Ici, nous avons défini la bordure des champs d'entrée sur aucun, et nous avons attribué une bordure inférieure de 2px.

Sortir

Une bordure inférieure a été ajoutée avec succès.

Cependant, vous avez remarqué qu'un plan est apparu lorsque nous nous sommes concentrés sur le champ d'entrée. Et si nous voulons supprimer ça.

Comment supprimer le contour du champ de saisie à l'aide de Focus

Pour modifier ou définir le style lorsqu'un champ de saisie est ciblé, vous pouvez utiliser le «:se concentrer«Sélecteur et pour supprimer le contour sur le foyer d'un champ de saisie, vous pouvez utiliser le«contour«Propriété et définissez sa valeur sur«aucun".

CSS

entrée [type = texte]: focus
Aperçu: aucun;

Sortir

Le contour a été supprimé avec succès.

Ajouter de la couleur aux champs d'entrée

En utilisant simplement les propriétés de couleur telles que la couleur et la couleur d'arrière-plan, vous pouvez ajouter la couleur au texte et l'arrière-plan des champs d'entrée respectivement.

CSS

entrée [type = texte]
Largeur: 80%;
rembourrage: 15px 20px;
marge: 9px 0px;
Color d'arrière-plan: bisque;
Couleur bleue;

Dans le code ci-dessus, nous fournissons une couleur bisque à l'arrière-plan des champs d'entrée et de la couleur bleue au texte.

Sortir

Nous avons réussi à fournir de la couleur à l'arrière-plan et au texte.

Comment ajouter un style sur les champs d'entrée

Vous pouvez ajouter une couleur de bordure ou d'arrière-plan ou tout style CSS aux champs d'entrée sur la mise au point à l'aide de l'état: Focus, donc chaque fois que l'utilisateur clique sur le champ, il reçoit un certain style.

CSS

entrée [type = texte]: focus
Color d'arrière-plan: SkyBlue;

La couleur d'arrière-plan du champ de saisie passera à SkyBlue lorsque l'utilisateur clique dessus.

Sortir

Le style personnalisé sur la mise au point est ajouté au champ de saisie avec succès.

Ajout d'une image ou d'une icône dans le champ de saisie

Pour rendre vos champs d'entrée plus intéressants, vous pouvez y ajouter des images ou des icônes. Voici comment tu fais.

CSS

entrée [type = texte]
Image de fond: URL ('e-mail.png ');
Position d'arrière-plan: 10px 6px;
taille arrière: 30px;
République de fond: sans répétition;
rembourrage: 12px 20px 12px 40px;

Dans le code ci-dessus, nous avons d'abord ajouté une icône d'e-mail et ajusté sa taille et sa position dans le champ de saisie en utilisant diverses propriétés CSS.

Sortir

Une icône d'e-mail a été ajoutée dans le champ de saisie avec succès.

Ajouter du style aux menus

Nous devons souvent ajouter des menus sous des formes HTML, par conséquent, les styler sont également nécessaires. Cela peut être fait en utilisant certaines propriétés CSS de base. Voici un exemple.

Html

Football
Criquet
Le hockey

Dans le code ci-dessus, nous avons créé un menu très basique.

CSS

sélectionner
Largeur: 80%;
rembourrage: 20px;
Border: aucun;
Border-Radius: 5px;
Color en arrière-plan: LightGray;

option
Style de police: italique;
taille de police: 20px;

En utilisant certaines propriétés CSS de base telles que la frontière, la frontière et la couleur d'arrière-plan, nous avons stylé le menu. De plus, nous avons également donné un certain style aux options.

Sortir

Le menu a été stylé.

Ajout de style aux boutons

Les boutons sont une partie cruciale d'une forme et celles-ci peuvent être conçues en utilisant les propriétés CSS. Voici un exemple.

Html

Ici, nous avons simplement créé un champ de saisie de type soumission.

CSS

entrée [type = soumettre]
Color en arrière-plan: rose;
Police-poids: Bold;
Border: aucun;
rembourrage: 20px 25px;
Décoration du texte: aucune;
marge: 6px 4px;

En utilisant diverses propriétés CSS comme la couleur d'arrière-plan, le poids de police et le rembourrage, nous avons stylé le bouton.

Sortir

Le bouton a été stylé.

Conclusion

Rendre votre forme HTML attrayante est absolument nécessaire et vous pouvez le faire en donnant un style à différents éléments qui font partie du formulaire tels que les champs d'entrée, les menus ou les boutons. Vous pouvez utiliser diverses propriétés CSS pour styliser ces éléments comme; largeur, couleur arrière, couleur, bordure, radius frontalière et bien d'autres. De plus, vous pouvez ajouter des icônes ou des images dans les champs d'entrée. Tout cela et bien plus encore sur les formes de style dans CSS sont mises en évidence dans cet article.