So gestalten Sie Formulare mit CSS: Ein Anfängerleitfaden

Apps sammeln Daten hauptsächlich über Formulare. Nehmen Sie zum Beispiel ein generisches Anmeldeformular: Es gibt mehrere Felder, in die Benutzer Informationen wie ihren Namen, ihre E-Mail-Adresse usw. eingeben können.

Früher hatten Websites nur einfache, langweilige HTML-Formulare mit keine Stile. Das war, bevor CSS alles änderte. Jetzt können wir mit den neuesten Funktionen von CSS interessantere, lebendigere Formulare erstellen.

Nehmen Sie nicht nur mein Wort dafür. Im Folgenden sehen Sie, wie ein typisches HTML-Formular ohne CSS aussieht.

Hier ist dasselbe Formular, das mit etwas CSS aufgepeppt wurde .

In diesem Tutorial zeigen wir Ihnen, wie Sie das oben gezeigte Formular sowie einige andere erstaunliche Elemente neu erstellen Änderungen, die Sie implementieren können, um visuell beeindruckende, benutzerfreundliche Formulare zu erstellen.

Wir zeigen in sechs Schritten, wie Sie Formulare mit CSS formatieren:

1. Festlegen von box-sizing
2. CSS-Selektoren für Eingabeelemente
3. Grundlegende Gestaltungsmethoden für Texteingabefelder
4. Gestaltung anderer Eingabetypen
5. UI-Pseudoklassen
6. Nicht anpassbare Eingaben

Bevor wir uns damit befassen, ist es wichtig zu verstehen, dass es keinen bestimmten Stil für Formulare gibt. Die Möglichkeiten sind nur durch Ihre Vorstellungskraft begrenzt. Diese Anleitung soll Ihnen den Einstieg in die Erstellung Ihrer eigenen einzigartigen Designs mit CSS erleichtern.

Los gehts!

Festlegen der Boxgröße

Normalerweise setze ich * {box-sizing:border-box;} nicht nur für Formulare, sondern auch für Webseiten. Wenn Sie es festlegen, enthält die Breite aller Elemente die Auffüllung.

Stellen Sie beispielsweise die Breite und die Auffüllung wie folgt ein.

.some-class { width:200px; padding:20px;}

Die .some-class ohne box-sizing:border-box hat eine Breite von mehr als 200px kann ein Problem sein. Aus diesem Grund verwenden die meisten Entwickler border-box für alle Elemente.

Nachfolgend finden Sie eine bessere Version des Codes. Es unterstützt auch die Pseudoelemente :before und :after.

*, *:before, *:after { box-sizing: border-box;}

Tipp: Der Selektor * wählt alle Elemente im Dokument aus.

CSS-Selektoren für Eingabeelemente

Der einfachste Weg zur Auswahl Bei Eingabeelementen werden CSS-Attributselektoren verwendet.

Diese Selektoren wählen alle Eingabeelemente im Dokument aus. Wenn Sie Selektoren angeben müssen, müssen Sie den Elementen Klassen hinzufügen.

<input type="text" class="signup-text-input" />

Dann:

.signup-text-input { // styles here}

Grundlegende Gestaltungsmethoden für einzeilige Texteingabefelder

Einzeilige Felder sind die am häufigsten in Formularen verwendeten Eingabefelder. Normalerweise ist eine einzeilige Texteingabe ein einfaches Feld mit einem Rand (dies hängt vom Browser ab).

Hier ist das HTML-Markup für ein einzeiliges Feld mit einem Platzhalter.

<input type="text" placeholder="Name" />

Es sieht folgendermaßen aus:

Sie können Folgendes verwenden CSS-Eigenschaften, um dieses Eingabefeld attraktiver zu machen.

• Auffüllen (um den inneren Abstand hinzuzufügen)
• Rand (um einen Rand um das Eingabefeld hinzuzufügen)
• Rand
• Rahmenschatten
• Randradius
• Breite
• Breite
• Schriftart

Lassen Sie uns zoomen

Auffüllen

Das Hinzufügen eines Innenraums zum Eingabefeld kann zur Verbesserung der Übersichtlichkeit beitragen. Sie können dies mit der Eigenschaft padding erreichen.

input { padding: 10px;}

Rand

Wenn sich in der Nähe Ihres Eingabefelds andere Elemente befinden, können Sie einen Rand hinzufügen, um Clusterbildung zu verhindern.

input { padding:10px; margin:10px 0; // add top and bottom margin}

Rahmen

In den meisten Browsern haben Texteingabefelder Rahmen, die Sie anpassen können.

.border-customized-input { border: 2px solid #eee;}

Sie können einen Rahmen auch ganz entfernen.

.border-removed-input { border: 0;}

Tipp: Stellen Sie sicher um eine Hintergrundfarbe oder box-shadow hinzuzufügen, wenn der Rand entfernt wird. Andernfalls sehen Benutzer die Eingabe nicht.

Einige Webdesigner bevorzugen es, nur den unteren Rand anzuzeigen, da sie sich ein bisschen wie das Schreiben in einer Zeile in einem Notizbuch anfühlen.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

Boxschatten

Mit der Eigenschaft CSS box-shadow können Sie einen Schlagschatten hinzufügen. Sie können eine Reihe von Effekten erzielen, indem Sie mit den fünf Werten der Eigenschaft herumspielen.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

Rahmenradius

Die Eigenschaft border-radius kann sich massiv auf das Gefühl Ihrer Formulare auswirken. Durch Krümmen der Kanten der Felder können Sie das Erscheinungsbild Ihrer Eingabefelder erheblich ändern.

.rounded-input { padding:10px; border-radius:10px;}

Sie können insgesamt ein anderes Erscheinungsbild erzielen, indem Sie box-shadow und border-radius zusammen verwenden.

Breite

Verwenden Sie die Eigenschaft width für Legen Sie die Breite der Eingaben fest.

input { width:100%;}

Schriftarten

Die meisten Browser verwenden eine andere Schriftfamilie und -größe für Formularelemente. Bei Bedarf können wir die Schriftart vom Dokument erben.

input, textarea { font-family:inherit; font-size: inherit;}

Andere Eingabetypen gestalten

Sie können andere Eingabetypen wie z Textbereich, Optionsfeld, Kontrollkästchen und mehr. Schauen wir uns das genauer an.

Textbereiche

Textbereiche ähneln Texteingaben, ermöglichen jedoch mehrzeilige Eingaben. Diese werden normalerweise verwendet, wenn Sie Daten mit längeren Formularen von Benutzern wie Kommentare, Nachrichten usw. erfassen möchten. Sie können alle zuvor beschriebenen grundlegenden CSS-Eigenschaften verwenden, um Textbereiche zu formatieren.

Die Die Eigenschaft resize ist auch in Textbereichen sehr nützlich. In den meisten Browsern können Textbereiche standardmäßig entlang der x- und y-Achse geändert werden (Wert: both). Sie können es auf both, horizontal oder vertical setzen.

Schauen Sie sich diesen Textbereich an, den ich gestaltet habe:

Siehe den Stift
dyomzez von Supun Kavinda (@SupunKavinda)
auf CodePen.

In diesem Beispiel habe ich resize:vertical verwendet, um nur die vertikale Größenänderung zuzulassen. Diese Vorgehensweise wird in den meisten Formularen verwendet, da sie störende horizontale Bildlaufleisten verhindert.

Hinweis: Wenn Sie Textbereiche mit automatischer Größenänderung erstellen müssen, müssen Sie einen JavaScript-Ansatz verwenden, der außerhalb des Bereichs von liegt Dieser Artikel.

Kontrollkästchen und Optionsfelder

Die Standard-Kontrollkästchen und Optionsfelder sind schwer zu formatieren und erfordern komplexeres CSS (und HTML).

Formatieren Verwenden Sie als Kontrollkästchen den folgenden HTML-Code.

<label>Name <input type="checkbox" /> <span></span></label>

Einige Dinge, die Sie beachten sollten:

• Da wir <label>, um die <input> zu umbrechen, wenn Sie auf ein Element in <``label``> klicken, die <input> wird angeklickt
• Wir werden die <input> ausblenden, da wir in Browsern nicht viel ändern können
• <span> erstellt ein benutzerdefiniertes Kontrollkästchen
• Wir verwenden den Pseudo-Klassen-Selektor input:checked, um abzurufen den aktivierten Status und das benutzerdefinierte Kontrollkästchen

Hier ist ein benutzerdefiniertes Kontrollkästchen (weitere Erläuterungen finden Sie in den Kommentaren im CSS):

Siehe den Stift
yLNKQBo von Supun Kavinda ( @SupunKavinda)
auf CodePen.

Hier ist ein benutzerdefiniertes Optionsfeld:

Siehe den Stift
eYNMQNM von Supun Kavinda (@SupunKavinda)
auf CodePen.

Wir haben dasselbe Konzept (input:checked) verwendet, um in beiden Beispielen benutzerdefinierte Elemente zu erstellen.

In Browsern sind Kontrollkästchen kastenförmig, während Optionsfelder rund sind. Es ist am besten, diese Konvention in benutzerdefinierten Eingaben beizubehalten, um den Benutzer nicht zu verwirren.

Menüs auswählen

Mit Menüs können Benutzer ein Element aus mehreren Auswahlmöglichkeiten auswählen.

Sie können das Element <select> so gestalten, dass es ansprechender aussieht.

select { width: 100%; padding:10px; border-radius:10px;}

Sie können das Dropdown-Menü (oder <option> -Elemente) jedoch nicht formatieren, da sie je nach Betriebssystem standardmäßig gestaltet sind. Die einzige Möglichkeit, diese Elemente zu formatieren, besteht darin, benutzerdefinierte Dropdowns mit JavaScript zu verwenden.

Schaltflächen

Wie die meisten Elemente haben Schaltflächen Standardstile.

<button>Click Me</button>

Lassen Sie uns dies etwas aufpeppen.

UI-Pseudoklassen

Nachfolgend sind einige UI-Pseudoklassen aufgeführt, die häufig mit Formularelementen verwendet werden.

Diese können zum Anzeigen von Hinweisen verwendet werden basierend auf den Attributen eines Elements:

• :required
• :valid und :invalid
• :checked (wir haben dies bereits verwendet)

Diese können verwendet werden So erstellen Sie Effekte für jeden Status:

• :hover
• :focus
• :active

Generierte Nachrichten mit: erforderlich

So zeigen Sie eine Nachricht an, dass eine Eingabe erforderlich ist:

Wenn Sie die -Attribut mit JavaScript, die "Required" -Nachricht wird automatisch entfernt.

Wir können dasselbe mit der :valid und :invalid Pseudoklassen.

: Hover und: Fokus

:hover wählt ein Element aus, wenn der Mauszeiger darüber bewegt wird. :focus wählt ein Element aus, wenn es fokussiert ist.

Diese Pseudoklassen werden häufig verwendet, um Übergänge und geringfügige visuelle Änderungen zu erstellen. Sie können beispielsweise die Breite, Hintergrundfarbe, Rahmenfarbe, Schattenstärke usw. ändern.Durch die Verwendung der Eigenschaft transition mit diesen Eigenschaften werden diese Änderungen wesentlich reibungsloser.

Hier einige Hover-Effekte für Formularelemente (versuchen Sie, den Mauszeiger über die Elemente zu halten). P. >

Siehe den Stift
yLNKZqg von Supun Kavinda (@SupunKavinda)
auf CodePen.

Wenn Benutzer sehen, dass sich Elemente auf subtile Weise ändern, wenn sie schweben über ihnen, sie bekommen das Gefühl, dass das Element umsetzbar ist. Dies ist eine wichtige Überlegung beim Entwerfen von Formularelementen.

Haben Sie bemerkt, dass (in einigen Browsern) ein blauer Umriss angezeigt wird, wenn Sie sich auf Formularelemente konzentrieren? Sie können die Pseudoklasse :focus verwenden, um sie zu entfernen und weitere Effekte hinzuzufügen, wenn das Element fokussiert ist.

Der folgende Code entfernt die Fokuskontur für alle Elemente.

*:focus {outline:none !important}

So fügen Sie eine Fokusübersicht hinzu:

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

Haben Sie Sucheingaben gesehen, die skalieren, wenn fokussiert? Versuchen Sie diese Eingabe.

Siehe den Stift
KKpoJJa von Supun Kavinda (@SupunKavinda)
auf CodePen.

Nicht anpassbare Eingaben

Das Gestalten von Formularelementen war in der Vergangenheit eine große Herausforderung. Es gibt einige Formularelemente, bei denen wir nicht viel Kontrolle über das Styling haben. Zum Beispiel:

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

Diese Elemente werden vom Browser bereitgestellt und basierend auf dem Betriebssystem gestaltet. Die einzige Möglichkeit, diese Elemente zu formatieren, besteht in der Verwendung benutzerdefinierter Steuerelemente, die mit stilisierbaren HTML-Elementen wie div, span usw. erstellt werden.

Wenn Sie beispielsweise <input type="file"> gestalten, können Sie die Standardeingabe ausblenden und eine benutzerdefinierte Schaltfläche verwenden.

Benutzerdefinierte Steuerelemente für Formularelemente sind entwickelt für die meisten großen JavaScript-Bibliotheken. Sie finden sie auf GitHub.

Fazit

Sie sollten jetzt verstehen, wie einfache Formularelemente formatiert werden und wie benutzerdefinierte Steuerelemente verwendet werden, wenn Browser-Eingabefelder schwer zu formatieren sind. Wie ich am Anfang dieses Beitrags sagte, sind dies nur die Grundbausteine des CSS-Formularstils. Sie sollten diese Tipps als Grundlage verwenden, um Ihrer Fantasie freien Lauf zu lassen.

Denken Sie als abschließenden Tipp daran, alle Ihre Formulare ansprechend zu gestalten.

Suchen Sie nach mehr Inspiration für das Formulardesign? Schauen Sie sich diese CodePen-Sammlung an.