formulaire de paramètres CSS

Avec la popularité d'Internet et des appareils mobiles, les formulaires sont devenus l'un des éléments les plus couramment utilisés dans les sites Web et les applications. Les formulaires peuvent collecter des informations de base sur les utilisateurs, effectuer des recherches, soumettre du contenu, etc., et sont devenus un élément extrêmement important de la conception des interactions et de l'expérience utilisateur. Des paramètres de style corrects peuvent également améliorer considérablement la convivialité et l’esthétique du formulaire, augmentant ainsi la satisfaction des utilisateurs et les taux de conversion. Cet article explique comment utiliser CSS pour styliser les formulaires.

1. La structure de base d'un formulaire

En HTML, un formulaire se compose généralement d'une balise de formulaire et d'une série de contrôles de saisie, de sélection, de zone de texte et d'autres contrôles de formulaire. Voici la structure de formulaire la plus simple :

<form>
  <label>用户名：<input type="text" name="username"></label>
  <label>密码：<input type="password" name="password"></label>
  <input type="submit" value="提交">
</form>

Parmi elles, la balise label est utilisée pour associer les contrôles de formulaire et le texte de description du formulaire, l'attribut type spécifie le type de contrôle et l'attribut name est utilisé pour nommer lors de la soumission des données du formulaire.

2. Paramètres de style courants pour les formulaires

1. Polices et tailles de police uniformes

Spécifier les polices et les tailles de police des contrôles de formulaire dans le style peut donner au formulaire un aspect soigné et cohérent, améliorant ainsi la lisibilité et l'esthétique. L'exemple de code est le suivant :

form {
  font-family: Arial, san-serif;
  font-size: 14px;
}

2. Supprimez l'apparence et les bordures par défaut

La plupart des navigateurs sont livrés avec une apparence et des bordures pour les contrôles de formulaire, et ces styles par défaut ne répondent pas nécessairement à nos exigences de conception. Afin de supprimer ces apparences et bordures par défaut, vous pouvez utiliser le code suivant :

input[type=text], input[type=password], textarea {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background-color: #f5f5f5;
  padding: 5px;
}

Les propriétés d'apparence et -webkit-apparence de CSS sont utilisées ici pour définir l'apparence du formulaire sur aucune, supprimer les bordures et les contours et ajouter un couleur d’arrière-plan et remplissage.

3. Définissez la largeur de la zone de texte et de la zone de mot de passe

Par défaut, la largeur de la zone de texte et de la zone de mot de passe est adaptative en fonction du contenu. Pour rendre visuellement le formulaire plus net, nous pouvons définir la largeur sur une valeur fixe, telle que 300 pixels. L'exemple de code est le suivant :

input[type=text], input[type=password], textarea {
  width: 300px;
}

4. Ajustez le style de la liste déroulante

L'apparence par défaut de la liste déroulante peut ne pas répondre à nos exigences. Vous pouvez ajuster le style via le code suivant :

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 960'><path d='M870.4 358.4l-358.4 358.4-358.4-358.4c-19.2-19.2-51.2-19.2-70.4 0-19.2 19.2-19.2 51.2 0 70.4l384 384c9.6 9.6 22.4 14.4 35.2 14.4s25.6-4.8 35.2-14.4l384-384c19.2-19.2 19.2-51.2 0-70.4-19.2-19.2-51.2-19.2-70.4 0z'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 20px;
  padding-right: 25px;
}

Set. Apparence et -webkit-apparence sur none ici, supprimez l'apparence par défaut, puis utilisez CSS pour créer une image d'arrière-plan pour la flèche de la liste déroulante, et enfin appliquez-la à la liste déroulante à l'aide de l'image d'arrière-plan, de la répétition d'arrière-plan. , attributs background-position et background-size.

5. Concevoir le style du bouton de soumission

Le bouton de soumission est l'élément le plus important du formulaire, et il doit généralement être conçu pour le distinguer des boutons ordinaires. Vous pouvez utiliser le code suivant pour définir le style :

input[type=submit] {
  background-color: #01aef0;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

Ici, définissez la couleur d'arrière-plan du bouton sur #01aef0, définissez la couleur de premier plan sur blanc, supprimez la bordure, définissez les coins arrondis et le remplissage, définissez la taille de la police sur 16. pixels, et enfin utiliser le curseur L'attribut transforme le curseur en forme de main pour améliorer l'interactivité du bouton.

3. Résumé

Dans le développement front-end et la conception Web, le formulaire est sans aucun doute un élément très important, et le réglage correct du style peut améliorer la convivialité et l'esthétique du formulaire, ce qui est très important en termes d'expérience utilisateur et rôle de conversion. Cet article présente les paramètres de style de formulaire couramment utilisés en CSS. Chaque style est comme un outil indépendant lorsqu'il est utilisé seul. Cependant, dans l'application réelle, il doit également être combiné de manière flexible en fonction de la situation réelle pour former un style de formulaire complet qui répond aux exigences. exigences de conception.

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!