Auf Websites, Formularen und Berichten helfen Benutzern dabei, ihre Aufgaben schnell und effizient zu erledigen. Die Zusammenfassungsdaten werden in Berichten angezeigt, während Formulare für verschiedene Aufgaben verwendet werden, einschließlich Datenerfassung, Abfrageergebnispräsentation, Berechnung usw. Ein Formular bietet dem Kunden eine systematische Weise, um Informationen in die Datenbank einzugeben und Daten in Datenbankstrukturen wie Tabellen direkt zu ändern.

In diesem Artikel geht es darum, Formulare mit HTML und CSS zu erstellen und zu stylen.

So erstellen Sie eine Form in HTML?

Um zuerst ein Formular in HTML zu erstellen, nutzen Sie die “Element in HTML und dann hinzufügen und Elemente hinzufügen.

Befolgen Sie die angegebenen Anweisungen für praktische Auswirkungen.

Schritt 1: Überschrift hinzufügen
Verwenden Sie zum Einfügen einer Überschrift in ein HTML -Dokument einen beliebigen Überschriften -Tag von “

" Zu "

”. In diesem Szenario haben wir die benutzt

Schild.

Schritt 2: Formular erstellen
Erstellen Sie als nächstes eine Form mit Hilfe des “Element und fügen Sie die Formularkomponenten hinzu.

Schritt 3: Etikett in Form hinzufügen
Danach einfügen die “Tag in der Form, die eine Bildunterschrift für ein Element in einer Benutzeroberfläche darstellt. Außerdem fügen Sie das hinzu “für”Attribut in der“Das wird verwendet, um sich auf die ID des mit dieser Etikett zugeordneten Elements zu beziehen. Dazu dem Wert des Attributs "für" im Etikett -Tag und des Werts des Attributs "ID" von ""Sollte der gleiche sein.

Schritt 4: Eingabefeld erstellen
Verwenden Sie das Eingangsfeld im Formular, um das “zu verwenden.“" Element. Dieses Element repräsentiert ein typisiertes Datenfeld, normalerweise mit einem Formularsteuerung, damit der Benutzer die Daten bearbeiten kann. Fügen Sie innerhalb des Eingabetags die folgenden folgenden Attribute hinzu:

• Der "TypDas Attribut wird verwendet, um den Datentyp (und die zugehörige Steuerung) des Elements zu steuern. Für dieses Attribut gibt es mehrere mögliche Werte, einschließlich “Text","Nummer","Datum","Passwort", und viele mehr.
• “AusweisAttribut/Eigenschaft beschreibt eine eindeutige ID für ein HTML -Element.

Schritt 5: Machen Sie eine Schaltfläche
Verwenden Sie die HTML, um die Schaltfläche im Formular hinzuzufügenElement- und Einbetten -Text, um auf der Schaltfläche anzuzeigen:

Fülle dieses Formular aus

Vorname



Familienname, Nachname



Dein Dob



Arbeitskategorie



Dein Land



Einreichen

Es ist ersichtlich, dass die Form erfolgreich in der HTML erstellt wurde:

Bewegen Sie sich in den nächsten Abschnitt, wenn Sie das Formular stylen möchten.

So stylen Sie eine Form mit CSS -Eigenschaften?

Um die Form zu stylen, sind verschiedene CSS -Eigenschaften verfügbar. Greifen Sie dazu auf die Form zu und stylen Sie sie wie gewünscht.

Schritt 1: Style die Form
Greifen Sie in CSS auf das Formular zu und wenden Sie die folgenden Eigenschaften an:

form
Grenze: 3px gepunktetes grün;
Rand: 30px 80px;
Polsterung: 20px;
Text-Align: Mitte;
Hintergrundfarbe: RGB (194, 241, 194);

Hier:

• “Grenze”CSS -Eigenschaft verteilt eine Grenze um das definierte Element.
• “Rand”Definiert einen Raum außerhalb der Grenze.
• “Polsterung”Bestimmt den leeren Raum um das Element innerhalb der definierten Grenze.
• “TextausrichtungEigenschaft wird verwendet, um die Ausrichtung des Textes als „als“ festzulegenCenter”.
• “HintergrundfarbeDefiniert die Farbe der Rückseite der Grenze.

Ausgang

Schritt 2: Styling auf "Etikett" anwenden
Zugang nun auf die “Etikett”Und wenden Sie erwähnte CSS -Eigenschaften an:

Etikett
Farbe blau;
Schriftstil: kursiv;

Gemäß dem obigen Snippet:

• “FarbeDie Eigenschaft legt die Farbe für den Text fest. Zu diesem Zweck wird der Wert der angegebenen Eigenschaft als "festgelegt" festgelegt "Blau”.
• “SchriftstilEigenschaft gibt eine bestimmte Schriftart für die Etikettendaten an.

Ausgang

Schritt 3: Style "Eingabe" Element
Zugang nun auf die “Eingang”Element mit dem“:schweben”Pseudo -Selektor:

Eingabe: Hover
Hintergrundfarbe: RGB (247, 202, 143);
Farbe grün;

Danach bewerben Sie sich “Hintergrundfarbe”Zum Einstellen der Farbe auf der Rückseite des Eingangsfeldes und“FarbeEigenschaft, um die Farbe für den Text im Feld zu definieren.

Ausgang

Hier geht es darum, die Form in HTML/CSS zu erstellen und zu stylen.

Abschluss

Um die Form zu erstellen und zu stylen, verwenden Sie zunächst die “Element, um eine Form in HTML zu erstellen. Dann benutze "" Und "Elemente zum Einfügen von Etiketten und Eingangsfeldern in das Formular. Greifen Sie danach mit Hilfe von CSS -Eigenschaften auf das Formular zu und wenden Sie das Styling anHintergrundfarbe","Rand"," Grenze "und vieles mehr nach Ihrer Wahl. In diesem Beitrag wurde die Methode zum Erstellen und Styling der Form in HTML und CSS erläutert.