Conteneur du formulaire
Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 51 sur 76.
Défi
FacileDans cette leçon, nous allons rendre le formulaire plus structuré et visuellement attrayant.
Suivez les étapes ci-dessous :
- Appliquez des styles au form container pour le faire ressortir. Écrivez une règle CSS qui cible l'élément avec la classe
login-form.- Définissez une couleur d'arrière-plan (blanc ou toute couleur qui convient).
- Ajoutez du padding pour que le contenu ait de l'espace à l'intérieur.
- Arrondissez les coins.
- Appliquez un box-shadow pour créer un effet de flottement doux.
- Ajoutez une bordure (border) autour du formulaire (choisissez n'importe quelle couleur et épaisseur).
- Centrez le texte à l'intérieur du formulaire en utilisant la propriété
text-align.
Essayez vous-même
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
Toutes les leçons de Styling with CSS
4Les bases du texte
Couleur du texteFamille de policesTaille de policeGraisse de policeAlignement du texteDécoration du texteDéfi récapitulatif n°1Défi récapitulatif n°27Modèle de boîte - Partie 1
Qu'est-ce que le Modèle de boîte ?PaddingMargesBorduresLargeur et HauteurDéfi récapitulatif
5Couleurs et arrière-plans
Couleur d'arrière-planCouleurs HEXCouleurs RGBTransparence avec RGBADéfi récapitulatif n°1