CSS - Formulare: Ein umfassender Leitfaden für Anfänger
Hallo da draußen, angehende Webdesigner! Heute tauchen wir in die wundervolle Welt der CSS-Formulare ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich aufgeregt, dich auf dieser Reise zu führen. Glaub mir, am Ende dieses Tutorials wirst du Formulare wie ein Profi stylen können!
CSS Formular - Schriftarten und Textstile
Lassen wir mit den Grundlagen beginnen. Genau wie wir uns für verschiedene Anlässe ankleiden, können wir unsere Formularelemente mit verschiedenen Schriftarten und Textstilen schmücken. Hier ist, wie man das macht:
input[type="text"] {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}Dieser Code weist den Browser an, die Arial-Schrift für Texteingaben zu verwenden, die Schriftgröße auf 16 Pixel zu setzen und die Textfarbe auf dunkelgrau (#333) festzulegen. Das ist, als würde man seinem Formular ein schönes, lesbares Outfit geben!
CSS Formular - Gestaltung von Elementrändern und Hintergründen
Als nächstes fügen wir unseren Formularelementen mit Rändern und Hintergründen etwas Pep hinzu:
input[type="text"] {
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}Dieser Code gibt unseren Texteingaben einen grünen Rand, leicht abgerundete Ecken und einen hellgrauen Hintergrund. Das ist, als würde man um seine Formularelemente ein hübsches Bilderrahmen setzen!
CSS Formular - Verwendung von Innenabständen und Außenabständen
Nun geben wir unseren Formularelementen etwas Freiraum:
input[type="text"] {
padding: 10px;
margin-bottom: 15px;
}Dies fügt innen (Padding) und darunter (Margin) etwas Raum hinzu. Das ist, als würde man seinen Formularelementen ihre persönliche Abstandssphäre geben!
CSS Formular - Fokusstile
Wenn ein Benutzer auf ein Eingabefeld klickt, möchten wir es hervorheben. Hier ist, wie man das macht:
input[type="text"]:focus {
outline: none;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}Dieser Code entfernt die Standardumrandung und fügt einen sanften blauen Schatten hinzu, wenn die Eingabe fokussiert ist. Das ist, als würde man dem Benutzer sagen "Hey, schau mal hierher!"
CSS Formular - Button-Styling
Schaltflächen sind die Helden deiner Formulare. Lassen wir sie cool aussehen:
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}Dies erstellt eine grüne Schaltfläche, die bei Berührung dunkler wird. Das ist, als würde man seiner Schaltfläche ein cooler Superheldenkostüm geben!
CSS Formular - Anpassung von Kästchen und Optionsfeldern
Die Gestaltung von Kästchen und Optionsfeldern kann knifflig sein. Hier ist eine einfache Methode, um zu beginnen:
input[type="checkbox"], input[type="radio"] {
width: 20px;
height: 20px;
}Dies macht deine Kästchen und Optionsfelder etwas größer und einfacher zu klicken. Das ist, als würden sie einen Wachstumsschub erhalten!
CSS Formular - Formularlayout
Jetzt organisieren wir unsere Formularelemente:
form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}Dies zentriert unser Formular und setzt jeden Label auf eine eigene Zeile. Das ist, als würde man sein Zimmer aufräumen - alles hat seinen Platz!
Beispiel
Lassen wir alles zusammenfließen:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email">
<button type="submit">Absenden</button>
</form>form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}Dies erstellt ein einfaches, gestaltetes Formular. Das ist, als würde man ein Puzzle zusammenfügen - alle Teile passen perfekt!
CSS Formular - Box-sizing
Hier ist ein Profi-Tipp: verwende box-sizing: border-box, um dein Leben einfacher zu machen:
* {
box-sizing: border-box;
}Dies stellt sicher, dass Innenabstand und Rand in die Gesamtbreite und Höhe des Elements einbezogen werden. Das ist, als wäre es Magie - keine unerwarteten Überläufe mehr!
CSS Formular - Fieldset und Legende
Fieldsets und Legenden können dabei helfen, dein Formular zu organisieren:
fieldset {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
}
legend {
font-weight: bold;
padding: 0 10px;
}Dies erstellt einen schönen Rand um verwandte Formularelemente mit einer Überschrift. Das ist, als würde man Kapitel in der Geschichte seines Formulars erstellen!
CSS Formular - Volle Breite der Eingabe
Manchmal möchtest du, dass deine Eingaben den gesamten verfügbaren Platz einnehmen:
input[type="text"] {
width: 100%;
}Dies lässt deine Eingabe den entire Container ausfüllen. Das ist, als würde man seiner Eingabe eine große Dehnung geben!
CSS Formular - Einfärbung der Eingabe
Fügen wir unseren Eingaben etwas Farbe hinzu:
input[type="text"] {
background-color: #e6f3ff;
color: #00366d;
}Dies gibt unserer Eingabe einen hellblauen Hintergrund mit dunkelblauen Text. Das ist, als würde man sein Formular mit einem coolen Farbschema bemalen!
CSS Formular - Bilder in den Eingaben
Man kann sogar Bilder zu seinen Eingaben hinzufügen:
input[type="text"] {
background-image: url('search-icon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}Dies fügt eine Suchsymbolik links neben der Eingabe hinzu. Das ist, als würde man seiner Eingabe einen kleinen Avatar geben!
CSS Formular - Eingabe mit Animation
Fügen wir unseren Eingaben etwas Bewegung hinzu:
input[type="text"] {
transition: all 0.3s ease-in-out;
}
input[type="text"]:focus {
transform: scale(1.05);
}Dies vergrößert die Eingabe leicht, wenn sie fokussiert ist. Das ist, als würde man seiner Eingabe einen kleinen Tanzschritt geben!
CSS Formular - Gestaltung von Textbereichen
Vergiss nicht die Textbereiche:
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
resize: vertical;
}Dies gestaltet deinen Textbereich und ermöglicht eine vertikale Größenanpassung. Das ist, als würde man den Benutzern ein dehnbares Notizbuch geben!
CSS Formular - Gestaltung von Dropdown-Menüs
Dropdown-Menüs brauchen auch Liebe:
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}Dies erstellt ein schönes, sauberes Dropdown-Menü. Das ist, als würde man den Benutzern eine schicke Automaten für Optionen geben!
Responsives Formularlayout
Schließlich machen wir unser Formular responsive:
@media screen and (max-width: 600px) {
form {
width: 100%;
}
}Dies macht das Formular auf kleineren Bildschirmen breit. Das ist, als würde man seinem Formular eine Shapeshifting-Superkraft geben!
Und das war's! Du hast gerade gelernt, wie man Formulare mit CSS gestaltet. Denke daran, Übung macht den Meister, also habe keine Angst, mit diesen Stilen zu experimentieren. Viel Spaß beim Coden!
Credits: Image by storyset