Home-theater-designers
Das Sammeln von Daten von einem Website-Benutzer kann auf verschiedene Weise erfolgen. Formulare auf Websites können eine einfache Funktion haben, wie das Abonnieren eines Newsletters für einen Benutzer, oder einen komplexeren Zweck wie die Funktion als Bewerbungsformular.
All diese einfachen bis komplexen Formulare haben jedoch eines gemeinsam: HTML und insbesondere HTML Schild.
Verwenden des Formular-Tags
Die -Tag ist ein HTML-Element, das als Container verwendet wird, um andere Elemente einzuschließen, die als Bausteine für Formulare betrachtet werden können. Einige dieser grundlegenden Elemente umfassen die tag, die Tag, und die Schild.
Die -Tag hat ein wichtiges Attribut, das zu seiner Funktionalität beiträgt. Dieses Attribut wird Aktion genannt und wird verwendet, um die Datei zu identifizieren, an die die in das Formular eingegebenen Daten übergeben werden.
Verwenden des Tag-Beispiels
Das obige Beispiel zeigt, wie Sie das Formular-Tag in Ihren Projekten verwenden. Eine der wichtigsten Erkenntnisse ist, dass Sie beim Öffnen eines Formular-Tags daran denken sollten, es zu schließen. Dadurch wird eine Formularstruktur erstellt und auch die korrekte Verarbeitung der in das Formular eingegebenen Daten sichergestellt.
Verwenden des Tags
Die -Tag wird verwendet, um die Daten in jedem Eingabefeld in einem Formular zu beschreiben. Dieses Tag hat a zum -Attribut, das verwendet wird, um die Funktionalität eines Formulars zu verbessern.
Verwandt: Die besten kostenlosen Online-HTML-Editoren zum Testen Ihres Codes
Stimmt die dem entsprechenden Eingabefeld zugewiesene ID mit der zum Wert in der Tag, dann wird dieses Eingabefeld automatisch markiert, wenn Sie auf das Etikett klicken.
Verwenden des Tag-Beispiels
First Name:
Im obigen Beispiel sehen Sie, dass die zum dem Attribut wird der Wert zugewiesen Fanname . Wenn Sie also ein Eingabefeld mit dem Fanname id, dieses Feld wird jedes Mal hervorgehoben, wenn Sie auf die Zuerst Name Etikett.
Verwenden des Tags
In seiner einfachsten Form ist der Tag kann als Textfeld angesehen werden. Die Tag erfasst Daten vom Benutzer und eine seiner wichtigsten Funktionen ist die Typ Attribut. Die Typ -Attribut gibt den Datentyp an, den dieses Textfeld erfassen kann.
Verwandt: So erstellen Sie ein gestapeltes Formular in CSS
Es gibt mehrere verschiedene Werte, die Sie dem . zuweisen können Typ Attribut, aber einige der beliebtesten sind wie folgt.
- Text
- Nummer
- Bild
- Datum
- Kontrollkästchen
- Radio
- Passwort
Verwenden des Tag-Beispiels
First Name:
Die -Tag im obigen Code hat drei verschiedene Attribute, die jeweils eine eindeutige Funktion haben. Die Typ -Attribut wird ein Textwert zugewiesen, was bedeutet, dass das Textfeld nur Zeichen akzeptiert.
Die Ich würde Das Attribut ist ein eindeutiger Bezeichner für das Textfeld und ist wichtig, da es den Zugriff auf dieses Element aus einer CSS-Datei ermöglicht. Die Name Attribut ist auch ein eindeutiger Bezeichner; das name-Attribut wird jedoch verwendet, um mit einem Element von der Serverseite der Entwicklung zu interagieren.
Die Ich würde und Name Attributen wird normalerweise derselbe Wert zugewiesen, da einer von der Client-Seite und der andere von der Server-Seite Zugriff auf ein Element bereitstellt.
Verwenden des Checkbox-Elements
Das Checkbox-Element ist im Vergleich zu den anderen Elementen, die Sie mit dem verwenden können, sehr einzigartig Schild. Es ermöglicht einem Benutzer, eine oder mehrere Optionen aus einer Liste verwandter Auswahlmöglichkeiten auszuwählen. Kontrollkästchen sind leicht zu erkennen, da sie durch winzige quadratische Kästchen dargestellt werden, die bei Auswahl ein Häkchen enthalten.
Verwendung des Checkbox-Element-Beispiels
Programming Languages:
Java
JavaScript
Python
Im obigen Beispiel hat jedes der Checkbox-Elemente ein value-Attribut, und dies ist wichtig, weil es hilft, jede Checkbox-Option von der Sammlung zu unterscheiden. Wenn ein Benutzer aus den obigen Optionen „Java“ auswählt, spiegeln die Daten dies wider.
Verwenden des Tags und der Radioelemente
Die Tag und die Funkelemente sind in dem Sinne ähnlich, dass sie einem Benutzer nur erlauben, jeweils einen einzelnen Wert auszuwählen; daher kann man sagen, dass sie die gleiche Funktion haben. Sie sind jedoch sehr unterschiedlich im Aussehen.
Das Radio-Element ist vom Aussehen her näher am Checkbox-Element, beim Radio-Element haben Sie jedoch Kreise anstelle von Quadraten.
Die -Tag erzeugt im Wesentlichen eine Dropdown-Box, die es einem Benutzer ermöglicht, einen einzelnen Wert auszuwählen.
Verwenden des Tag- und Radio-Element-Beispiels
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Verwenden des Datumselements
Das date-Element erzeugt ein kleines Textfeld, das beim Anklicken einen Kalender generiert. Verwenden von Datum als Eingabeart in Ihren Formularen schützt davor, dass ein Benutzer möglicherweise ein falsches Datum eingibt, was möglicherweise zur Erfassung falscher Daten führen kann.
Verwenden des Beispiels für das Datumselement
Verwenden des E-Mail- und Passwort-Elements
Wenn ein Entwickler dem type-Attribut von an . entweder die E-Mail- oder die Passwortwerte zuweist Tag erzeugen sie jeweils ein identisches Textfeld. Wenn Sie jedoch diese Boxen verwenden, werden die Unterschiede offensichtlich.
Das E-Mail-Element überwacht die in das Textfeld eingegebenen Daten und stellt sicher, dass jede Übermittlung der Standardanforderung einer E-Mail-Adresse entspricht; was bedeutet, dass ein lokaler Teil, gefolgt von dem @-Symbol, mit einer Domäne endet.
Verwenden des Beispiels für das E-Mail-Element
Im obigen Beispiel wird Ihnen ein neues Attribut namens . vorgestellt Platzhalter , und dieses Attribut nimmt einen Textwert an, der im Textfeld in abgeblendetem Grau angezeigt wird. Dieser Text wird verwendet, um die Daten anzugeben, die in das Textfeld eingefügt werden sollen, wie im obigen Beispiel zu sehen.
Das Kennwortelement verwandelt Zeichen in Sternchen, während sie in das Textfeld eingegeben werden. Wenn Ihr Computerbildschirm für andere Personen sichtbar ist, sehen diese daher das von Ihnen eingegebene Passwort nicht.
Verwenden des Beispiels für das Passwortelement
Verwenden des Button-Tags
In einem Formular gibt es normalerweise zwei verschiedene Arten von Schaltflächen. Die erste ist die Schaltfläche zum Senden, die die im Formular eingegebenen Daten an den Wert sendet, der dem Aktionsattribut zugewiesen ist (das sich im < Formular> Schild).
Beispiel für eine Senden-Schaltfläche
Submit
Die zweite Art von Schaltfläche, die normalerweise in einem Formular verwendet wird, ist eine Zurücksetzen-Schaltfläche, die die Daten in einem Formular löscht, damit der Benutzer neue Daten eingeben kann. Die tag hat a Typ -Attribut, das verwendet wird, um die Funktion der Schaltfläche anzugeben. Im obigen Beispiel die Typ Attribut ist Wert zuweisen einreichen , daher eine Schaltfläche mit a Typ Wert von zurücksetzen wird verwendet, um das Formular zurückzusetzen.
Beispiel für Reset-Taste
Reset
Formular erstellen
Um ein einfaches Formular in HTML zu erstellen, müssen Sie alle oben genannten Elemente in a . einschließen Schild.
Erstellen eines Formularbeispiels
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
Der obige Code erzeugt das folgende Formular:
wofür verwenden die Leute Kik
Jetzt können Sie ein einfaches Formular in HTML erstellen
Dieser Artikel stellt Ihnen alle Werkzeuge zur Verfügung, um ein funktionsfähiges HTML-Formular zu erstellen. Es identifiziert die verschiedenen HTML-Tags, die bei der Formularerstellung verwendet werden, und untersucht die verschiedenen Attribute, die mit diesen Tags verwendet werden können.
Die meisten Formulare, die Sie auf Websites sehen, enthalten jedoch eine zusätzliche Komponente; CSS, das verwendet wird, um die Form zum Leben zu erwecken und sie ästhetisch ansprechender zu gestalten.
Teilen Teilen Tweet Email Der Spickzettel für wesentliche CSS3-EigenschaftenBeherrschen Sie die grundlegende CSS-Syntax mit unserem CSS3-Eigenschaften-Spickzettel.
Weiter lesen Verwandte Themen- Programmierung
- HTML
- Web Entwicklung
- Codierungs-Tutorials
Kadeisha Kean ist Full-Stack-Software-Entwicklerin und technische/Technologie-Autorin. Sie hat die ausgeprägte Fähigkeit, einige der komplexesten technologischen Konzepte zu vereinfachen; Herstellung von Material, das von jedem Technikneuling leicht verstanden werden kann. Sie schreibt leidenschaftlich gerne, entwickelt interessante Software und bereist die Welt (durch Dokumentationen).
Mehr von Kadeisha KeanAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um zu abonnieren