Kostenlose Tutorials für Anfänger

Appearance

Kapitel 24: Formular-Verschönerung ​

📝 Lernziel: Meistern Sie CSS-Formularstyling, um Formulare benutzerfreundlicher und ästhetischer zu gestalten.

24.1 Formularelemente gestalten ​

💡 Welche Formularelemente können gestylt werden? ​

ElementBeschreibung
input[type="text"]Texteingabefeld
input[type="password"]Passworteingabefeld
input[type="radio"]Radiobutton (Auswahl)
input[type="checkbox"]Checkbox (Ankreuzfeld)
selectDropdown-Auswahl
textareaTextbereich (mehrzeilig)
button, input[type="submit"]Schaltfläche

📝 Beispiel 1: Texteingabefeld gestalten ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Texteingabefeld gestalten</title>
    <style>
        .text-input {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <input type="text" class="text-input" placeholder="Bitte eingeben...">
</body>
</html>

Erklärung:

  • padding: 12px 20px - Innenabstand
  • border: 2px solid #ccc - Rahmen
  • border-radius: 4px - Abgerundete Ecken
  • box-sizing: border-box - Breite inklusive Padding und Rahmen

📝 Beispiel 2: Textbereich (textarea) gestalten ​

css
.textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    resize: vertical; /* Vertikal vergrößerbar */
}

📝 Beispiel 3: Dropdown-Auswahl (select) gestalten ​

css
.select-input {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    appearance: none; /* Standard-Dropdown-Pfeil entfernen */
}

24.2 Formularzustände gestalten ​

💡 Wichtige Zustände (Pseudoklassen) ​

ZustandBeschreibung
:focusElement hat Fokus (wird gerade bedient)
:hoverMaus darüber
:disabledDeaktiviert
:validGültige Eingabe
:invalidUngültige Eingabe

📝 Beispiel 4: Fokus-Zustand ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Fokus-Zustand</title>
    <style>
        .text-input {
            width: 100%;
            padding: 12px 20px;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        
        .text-input:focus {
            border-color: #4CAF50; /* Grüner Rahmen beim Fokus */
            outline: none; /* Standard-Fokus-Rahmen entfernen */
        }
    </style>
</head>
<body>
    <input type="text" class="text-input" placeholder="Klicken Sie hier...">
</body>
</html>

Erklärung:

  • :focus - Wird angewendet, wenn das Eingabefeld angeklickt wird
  • outline: none - Entfernt den Standard-Fokus-Rahmen des Browsers

📝 Beispiel 5: Deaktivierter Zustand ​

css
.text-input:disabled {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

📝 Beispiel 6: Gültige/Ungültige Eingabe ​

css
.text-input:valid {
    border-color: green;
}

.text-input:invalid {
    border-color: red;
}

24.3 Formular-Schaltflächen gestalten ​

📝 Beispiel 7: Schaltfläche gestalten ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Schaltfläche gestalten</title>
    <style>
        .submit-button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
            transition: background-color 0.3s ease;
        }
        
        .submit-button:hover {
            background-color: #45a049;
        }
        
        .submit-button:active {
            transform: translateY(2px); /* Leichter Druck-Effekt */
        }
    </style>
</head>
<body>
    <button type="submit" class="submit-button">Absenden</button>
</body>
</html>

24.4 Praxis: Registrierungsformular, Login-Formular ​

🎨 Praxis 1: Registrierungsformular ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Registrierungsformular</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        .form-container {
            width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .form-container h2 {
            text-align: center;
        }
        
        .form-input {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
        
        .form-input:focus {
            border-color: #4CAF50;
            outline: none;
        }
        
        .submit-button {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
        
        .submit-button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>Registrierung</h2>
        <form>
            <input type="text" class="form-input" placeholder="Benutzername" required>
            <input type="email" class="form-input" placeholder="E-Mail" required>
            <input type="password" class="form-input" placeholder="Passwort" required>
            <button type="submit" class="submit-button">Registrieren</button>
        </form>
    </div>
</body>
</html>

🎨 Praxis 2: Login-Formular ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Login-Formular</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        .login-container {
            width: 350px;
            margin: 100px auto;
            padding: 30px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .login-container h2 {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .login-input {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
        
        .login-input:focus {
            border-color: #008CBA;
            outline: none;
        }
        
        .login-button {
            width: 100%;
            background-color: #008CBA;
            color: white;
            padding: 14px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
        
        .login-button:hover {
            background-color: #007399;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form>
            <input type="text" class="login-input" placeholder="Benutzername" required>
            <input type="password" class="login-input" placeholder="Passwort" required>
            <button type="submit" class="login-button">Einloggen</button>
        </form>
    </div>
</body>
</html>

✅ Zusammenfassung ​

In diesem Kapitel haben Sie gelernt:

  1. ✅ Formularelemente gestalten - Texteingabefelder, Textbereiche, Dropdowns
  2. ✅ Formularzustände - Fokus, Hover, Deaktiviert, Gültig/Ungültig
  3. ✅ Schaltflächen gestalten - Benutzerdefinierte Schaltflächen
  4. ✅ Praxis - Registrierungs- und Login-Formulare

🎯 Übung ​

Übung 1: Erstellen Sie ein schönes Texteingabefeld mit Fokus-Effekt.

Übung 2: Erstellen Sie eine benutzerdefinierte Schaltfläche.

Übung 3: Erstellen Sie ein vollständiges Registrierungsformular.

📚 Nächstes Kapitel ​

Im nächsten Kapitel lernen wir CSS-Variablen (CSS Variables), um Code zu vereinfachen und Themen zu verwalten.

[Weiter zu Kapitel 25: CSS-Variablen →]

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials