Eingabefeld

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 52 von 76.

Aufgabe

Einfach

In dieser Lektion verbessern wir das Erscheinungsbild der Eingabefelder, damit sie benutzerfreundlich sind.

Gestalte die <input>-Felder. Befolge die folgenden Schritte:

Mache sie 100 % breit, damit sie gut in das Formular passen.
Füge Innenabstand hinzu, damit der Text im Inneren nicht die Ränder berührt.
Wende einen Rahmen mit einer dezenten Farbe an.
Runde die Ecken ab.
Füge etwas Außenabstand zwischen den Eingabefeldern hinzu, damit sie nicht zu dicht beieinander aussehen.
Verwende box-sizing: border-box;, damit die Breite den Innenabstand und die Rahmen einschließt.

Probier es selbst

<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>