Eingangstypen in HTML
Dieses Schreiben enthält einen vollständigen Überblick über die folgenden Eingabetypen:
- Text
- Einreichen
- Passwort
- Taste
- Radio
- Kontrollkästchen
- Datei
- Farbe
- Datum
- Zeit
- Datetime-lokal
- Woche
- Monat
- Tel
In diesem Artikel wird eine vollständige Anleitung für alle oben genannten Eingabetypen vorgestellt. Lassen Sie uns also loslegen!
Text eingeben
Der Texttyp bestimmt ein einzelnes Textfeld.
Beispiel
Das folgende angegebene Snippet erstellt in einem Formular -Tag ein Eingangsfeld des Texttyps:
Das obige Code -Snippet generiert die Ausgabe wie folgt:
Die Ausgabe überprüft, dass das Eingangsfeld Texttypdaten benötigt.
Geben Sie Senden ein
Die Schaltfläche vom Typ Senden sendet die Daten des Formulars an die im Tag angegebene URL.
Beispiel
Der folgende Snippet zeigt, wie ein Sendentyp funktioniert:
Der obige Code gibt eine URL einer HTML -Datei im Formular -Tag an. Darüber hinaus erstellt sie eine Schaltfläche und ein Textfeld. Wenn Sie auf die Schaltfläche Senden klicken Formen.html Buchseite.
Bevor Sie auf die Schaltfläche klicken, sind wir auf der Formattributes.html Seite, die Ausgabe des obigen Codesnippets ist also wie folgt:
Wenn Sie auf die Schaltfläche klicken Formen.html Buchseite:
Auf diese Weise funktioniert die Schaltfläche Senden in HTML.
Geben Sie eine E -Mail ein
Es wird verwendet, um die E -Mail -Adresse des Benutzers zu übernehmen, und wenn jemand die irrelevanten Daten eingibt, würde der E -Mail -Typ diese Daten nicht übermitteln:
Im Folgenden finden Sie die Ausgabe dieses Codes:
Passwort eingeben
Der Kennworttyp wird verwendet, um ein Kennwortfeld zu ermitteln:
Das obige Code erzeugt die folgende Ausgabe:
Typtaste
Es wird verwendet, um eine Schaltfläche Klickbar zu erstellen:
Die obige Codezeile zeigt zunächst die folgende Ausgabe an:
Geben Sie Radio ein
Es wird verwendet, um ein Optionsfeld zu erstellen, mit dem ein Benutzer eine Option aus mehreren Optionen auswählen kann:
Der obige Code liefert die folgende Ausgabe:
Geben Sie das Kontrollkästchen ein
Mit dem Kontrollkästchen -Typ wird ein Kontrollkästchen erstellt, mit dem ein Benutzer eine einzelne oder mehrere Optionen auswählen kann:
Das oben gegebene Snippet zeigt die folgende Ausgabe:
Die Ausgabe authentifiziert die Arbeit des Kontrollkästchens.
Dateityp
Um eine Datei auf einer Website anzuhängen, kann der Dateieingabetyp verwendet werden:
Zunächst wird "keine Datei ausgewählt" angezeigt:
Wenn ein Benutzer eine Datei auswählt, wird der Dateiname neben dem angezeigt "Datei wählen" Möglichkeit:
Farbtyp
Dieser Eingangstyp wird verwendet, um einen Farbwähler zu erstellen. Der Standardwert ist jedoch schwarz. Ein Benutzer kann jedoch eine Farbe mit RGB -Farbwerten auswählen:
Das obige Code enthält die folgende Ausgabe:
Wenn Sie auf die Farbe klicken, wird ein Benutzer ermöglicht, eine Farbe seiner Wahl zu wählen:
Datumstyp
Es wird verwendet, um ein Feldtypfeld zu erstellen, mit dem ein Benutzer ein Datum auswählen kann:
Im Folgenden finden Sie die Ausgabe für den oben genannten Code -Snippet:
Ein Benutzer kann wie folgt ein Datum auswählen:
Zeittyp
Es wird verwendet, um ein Zeitypfeld zu erstellen, mit dem ein Benutzer eine Zeit auswählen kann. Der Zeiteingangstyp kann auf die gleiche Weise implementiert werden wie der Datumstyp:
Zunächst liefern die oben genannten Codezeilen die folgende Ausgabe:
Ein Benutzer kann eine Zeit seiner Wahl auswählen:
Datetime-lokal
Es kann verwendet werden, um Datum und Uhrzeit gleichzeitig anzugeben:
Die Ausgabe des oben genannten Codesausschnitts sieht folgendermaßen aus:
Ein Benutzer kann sowohl Datum als auch Uhrzeit gleichzeitig auswählen, wie unten gezeigt:
Woche
Es wird verwendet, um eine Woche auszuwählen. Das folgende Snippet bietet ein besseres Verständnis:
Das untergegebene Snippet zeigt die Ausgabe der obigen Codezeilen:
Monat
Es wird verwendet, um einen Monat auszuwählen. Das folgende Code -Snippet beschreibt die Arbeit des Monatseingangstyps:
Die Ausgabe von oben gegebenen Snippet sieht folgendermaßen aus:
Tel
Es wird verwendet, um eine Telefonnummer vom Benutzer zu nehmen. Wir können ein bestimmtes Muster angeben, das befolgt werden muss. Der folgende Snippet zeigt die Funktionsweise des Tel -Eingangstyps:
Wenn jemand ein irrelevantes Muster betritt, wird eine Warnmeldung angezeigt, um das angeforderte Format einzugeben:
Ausgabe prüft, dass die "Tel" Eingabetyp funktioniert ordnungsgemäß.
Abschluss
Das Tag bietet Eingabesteuerelemente, um die Daten vom Benutzer auf verschiedene Weise zu akzeptieren. In HTML können verschiedene Eingabetypen verwendet werden, um die Eingabe vom Benutzer zu nehmen, beispielsweise Text, E -Mail, Kennwort, Schaltfläche, Senden und viele weitere. Alle diese Eingangstypen erstellen unterschiedliche Funktionen. Dieser Artikel bietet einen umfassenden Überblick über einige am häufigsten verwendete Eingangstypen und berücksichtigte mehrere Beispiele für ein besseres Verständnis.