So entwerfen Sie Formulare in CSS

Das ästhetisch gut aussehende Form ist eine bedeutende Aufgabe, wenn Sie die Benutzererfahrung verbessern möchten. Ein HTML -Formular besteht am häufigsten aus einigen Eingangsfeldern, Menüs und einem Knopf. Daher können Sie verschiedene CSS -Eigenschaften anwenden, um das Erscheinungsbild der Form zu verbessern. Wir werden Ihnen einige Möglichkeiten präsentieren, die angewendet werden können, um HTML -Formulare zu verschönern.

Lass uns anfangen.

Stellen Sie die Breite der Eingangsfelder ein

Wir alle wissen, dass Eingabefelder standardmäßig eine gewisse Breite haben. Wir können jedoch auch die Breite nach unserem Wunsch ändern. Folgen Sie dem folgenden Code, um die Breite eines Eingangsfeldes zu ändern.

Html

Bitte Vornamen eingeben

Hier haben wir ein Eingabefeld erstellt.

CSS

Eingabe
Breite: 80%;

Wir weisen dem Eingangsfeld eine Breite von 80% zu.

Notiz: Die Breite eines Eingangsfeldes kann in angegeben werden px, em, Und Prozentsatz.

Ausgang

Die Breite des Eingangsfeldes wurde nach unserem Wunsch verändert.

Fügen Sie Platz in den Eingangsfeldern hinzu

Verwenden Sie die CSS -Padding -Eigenschaft, um den Speicherplatz im Eingangsfeld zu verbessern. Um außerhalb des Eingangsfeldes Platz hinzuzufügen, wenn mehrere Eingangsfelder vorhanden sind, passen Sie den Rand des Eingangsfeldes an.

CSS

input [type = text]
Breite: 80%;
Polsterung: 15px 20px;
Rand: 9px 0px;

Abgesehen davon, dass wir dem Eingangsfeld einige Breite geben, haben wir ihm auch einige Polsterung und Ränder gegeben.

Ausgang

Innerhalb und außerhalb des Eingangsfeldes wurde Platz hinzugefügt.

Wie Sie im obigen Code sehen können, haben wir Typen = Text verwendet, um das Eingabefeld zu stylen. Es gibt auch einige andere Typen, auf der Sie die Eingabefelder wie Typ = Passwort stylen können (dies stilft nur Kennwortfelder) oder type = number (dies wird nur Felder mit Stilnummern) usw.

Hinzufügen von Grenzen für Eingabefelder

Sie können die Größe und Farbe von Eingangsfeldern anhand der CSS-Randeigenschaften überdauern, um mehr Stile wie abgerundete Ecken zu verleihen, und verwenden Sie die Rand-Radius-Eigenschaft.

CSS

input [type = text]
Breite: 80%;
Polsterung: 15px 20px;
Rand: 9px 0px;
Grenze: 2px solide blau;
Border-Radius: 5px;

Im obigen Code verweisen wir den Eingangsfeldern zusammen mit einer blauen Farbe einen Rand von 2px. Um die Ecken rund zu machen, haben wir den Grenzradius auf 5px gesetzt.

Ausgang

Der Grenz- und Grenzradius der Felder wurde nach dem Verlangen angepasst.

Eine weitere lustige Sache, die Sie tun können, ist nur den unteren Rand hinzuzufügen, wobei das Grundstück wie diese verwendet wird.

CSS

input [type = text]
Breite: 80%;
Polsterung: 15px 20px;
Rand: 9px 0px;
Grenze: Keine;
Grenzboden: 2px fest blau;

Hier haben wir den Rand der Eingangsfelder auf keine gesetzt und einen unteren Rand von 2px zugewiesen.

Ausgang

Ein unterer Rand wurde erfolgreich hinzugefügt.

Sie haben jedoch festgestellt, dass ein Umriss aufgetreten ist, als wir uns auf das Eingabefeld konzentrierten. Was ist, wenn wir das entfernen wollen?.

So entfernen Sie den Umriss des Eingangsfeldes mit dem Fokus

Um das Styling zu ändern oder festzulegen, wenn ein Eingabefeld fokussiert ist, können Sie die “verwenden:FokusSelektor und um den Überblick über den Fokus eines Eingangsfeldes zu entfernen, können Sie die „verwenden“Umriss"Eigenschaft und setzen Sie ihren Wert auf"keiner”.

CSS

input [type = text]: fokus
Umriss: Keine;

Ausgang

Der Umriss wurde erfolgreich entfernt.

Fügen Sie die Eingabefelder Farbe hinzu

Indem Sie einfach die Farbeigenschaften wie Farbe und Hintergrundfarbe verwenden, können Sie Text und Hintergrund von Eingabefeldern Farbe hinzufügen.

CSS

input [type = text]
Breite: 80%;
Polsterung: 15px 20px;
Rand: 9px 0px;
Hintergrundfarbe: Bisque;
Farbe blau;

Im obigen Code stellen wir dem Hintergrund von Eingabefeldern und blauer Farbe dem Text eine Bisquefarbe zur Verfügung.

Ausgang

Wir haben dem Hintergrund und Text erfolgreich Farbe zur Verfügung gestellt.

So fügen Sie Styling auf den Fokus von Eingabefeldern hinzu

Sie können den Eingabefeldern des Fokus mit dem Status: Fokuszustand ein gewisses Rand- oder Hintergrundfarbe oder ein CSS -Styling hinzufügen. Jedes Mal, wenn der Benutzer auf das Feld klickt, erhält es einen bestimmten Stil.

CSS

input [type = text]: fokus
Hintergrundfarbe: Skyblue;

Die Hintergrundfarbe des Eingangsfeldes ändert sich zu SkyBlue, wenn der Benutzer darauf klickt.

Ausgang

Das benutzerdefinierte Styling auf dem Fokus wird dem Eingabefeld erfolgreich hinzugefügt.

Hinzufügen eines Bildes oder Symbols im Eingangsfeld Hinzufügen

Um Ihre Eingangsfelder interessanter zu gestalten, können Sie ihnen Bilder oder Symbole hinzufügen. So machst du es.

CSS

input [type = text]
Hintergrundbild: URL ('E-Mail.png ');
Hintergrundposition: 10px 6px;
Hintergrundgröße: 30px;
Hintergrundrepeat: No-Repeat;
Polsterung: 12px 20px 12px 40px;

Im obigen Code haben wir zunächst ein E -Mail -Symbol hinzugefügt und seine Größe und Position im Eingangsfeld mit verschiedenen CSS -Eigenschaften angepasst.

Ausgang

Ein E -Mail -Symbol wurde erfolgreich in das Eingabefeld hinzugefügt.

Fügen Sie den Menüs Stil hinzu

Wir müssen oft Menüs in HTML -Formen hinzufügen, daher ist es auch notwendig, sie zu stylen. Dies kann durch die Verwendung einiger grundlegender CSS -Eigenschaften erfolgen. Hier ist ein Beispiel.

Html

Fußball
Kricket
Eishockey

Im obigen Code haben wir ein sehr einfaches Menü erstellt.

CSS

wählen
Breite: 80%;
Polsterung: 20px;
Grenze: Keine;
Border-Radius: 5px;
Hintergrundfarbe: Lightgray;

Möglichkeit
Schriftstil: kursiv;
Schriftgröße: 20px;

Verwenden Sie einige grundlegende CSS-Eigenschaften wie Grenze, Grenze-Radius und Hintergrundfarbe, wir haben das Menü gestylt. Darüber hinaus haben wir auch den Optionen einen gewissen Stil gegeben.

Ausgang

Das Menü wurde gestylt.

Schaltflächen hinzufügen

Die Tasten sind ein entscheidender Bestandteil einer Form, und diese können mit CSS -Eigenschaften ausgelegt werden. Hier ist ein Beispiel.

Html

Hier haben wir einfach ein Eingabebuchstyp erstellt.

CSS

input [type = subieren]
Hintergrundfarbe: Pink;
Schriftdicke: fett;
Grenze: Keine;
Polsterung: 20px 25px;
Textdekoration: Keine;
Rand: 6px 4px;

Mit verschiedenen CSS-Eigenschaften wie Hintergrundfarbe, Schriftgewicht und Polsterung haben wir die Taste gestylt.

Ausgang

Der Knopf wurde gestylt.

Abschluss

Es ist absolut notwendig, Ihre HTML -Form attraktiv zu machen, und Sie können dies tun, indem Sie verschiedenen Elementen Stil geben, die Teil des Formulars sind wie Eingangsfelder, Menüs oder Schaltflächen. Sie können verschiedene CSS -Eigenschaften verwenden, um diese Elemente wie zu stylen. Breite, Hintergrundfarbe, Farbe, Grenze, Grenzradius und vieles mehr. Darüber hinaus können Sie Symbole oder Bilder in Eingangsfeldern hinzufügen. All dies und vieles mehr über Stylingformen in CSS wird in diesem Beitrag hervorgehoben.