Champ de saisie

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 52 sur 76.

Défi

Facile

Dans cette leçon, nous allons améliorer l'apparence des champs de saisie pour les rendre plus conviviaux.

Stylez les champs <input>. Suivez les étapes ci-dessous :

Donnez-leur une largeur de 100% wide pour qu'ils s'intègrent parfaitement au formulaire.
Ajoutez du padding pour que le texte à l'intérieur ne touche pas les bords.
Appliquez une bordure (border) avec une couleur douce.
Arrondissez les angles.
Ajoutez de la marge (margin) entre les champs de saisie pour qu'ils ne soient pas trop serrés.
Utilisez box-sizing: border-box; pour que la largeur inclue le rembourrage et les bordures.

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>