In HTML ist ein wichtiges Element der HTML-Form. Das Attribut „Typ“ des Eingabeelements kann verschiedene Typen haben, die das Informationsfeld definieren. Beispielsweise gibt es ein Textfeld.

Nachfolgend finden Sie eine Liste aller Arten von HTML-Elementen.

HTML5 hat neue Typen für Elemente hinzugefügt. Im Folgenden finden Sie eine Liste der Elementtypen von HTML5

Im Folgenden finden Sie eine Beschreibung der Elementtypen mit Beispielen.

1. :

Elemente vom Typ „Text“ werden verwendet, um ein einzeiliges Eingabetextfeld zu definieren.

Beispiel:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p> 

Ausgabe:

Eingabetyp „Text“:

Der 'Text' Feld definiert ein einzeiliges Eingabetextfeld.

Notiz: Die standardmäßige maximale Zeichenlänge beträgt 20.

2. :

Das Element vom Typ „Passwort“ ermöglicht einem Benutzer die sichere Eingabe des Passworts auf einer Webseite. Der eingegebene Text in der Passwortdatei wird in „*“ oder „.“ umgewandelt, sodass er nicht von einem anderen Benutzer gelesen werden kann.

Beispiel:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Ausgabe:

Geben Sie den Typ „Passwort“ ein:

Der 'Passwort' Feld definiert ein einzeiliges Eingabefeld für das Passwort, um das Passwort sicher einzugeben.

3. :

Das Element vom Typ „Submit“ definiert eine Submit-Schaltfläche, um das Formular an den Server zu senden, wenn das „Click“-Ereignis auftritt.

Beispiel:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Ausgabe:

Eingabetyp „Senden“:

Nachdem Sie auf die Schaltfläche „Senden“ geklickt haben, wird das Formular an den Server gesendet und die Seite dorthin weitergeleitet Aktion Wert. Wir werden in späteren Kapiteln mehr über das Attribut „Aktion“ erfahren

4. :

Der Typ „Zurücksetzen“ ist ebenfalls als Schaltfläche definiert, aber wenn der Benutzer ein Klickereignis ausführt, werden standardmäßig alle eingegebenen Werte zurückgesetzt.

Beispiel:

 User id: Password: <br> <br> 

Ausgabe:

So blockieren Sie YouTube-Werbung auf Android

Eingabetyp „Reset“:

Versuchen Sie, die Eingabewerte von Benutzer-ID und Passwort zu ändern. Wenn Sie dann auf „Zurücksetzen“ klicken, werden die Eingabefelder auf die Standardwerte zurückgesetzt.

5. :

Der Typ „Radio“ definiert die Optionsfelder, die die Auswahl einer Option aus einer Reihe verwandter Optionen ermöglichen. Es kann immer nur jeweils eine Optionsfeldoption ausgewählt werden.

Beispiel:

Bitte wählen Sie Ihre Lieblingsfarbe aus

Ausgabe:

Geben Sie den Typ „Radio“ ein

Bitte wählen Sie Ihre Lieblingsfarbe aus

6. :

Der Typ „Kontrollkästchen“ wird als quadratische Kästchen angezeigt, die aktiviert oder deaktiviert werden können, um eine Auswahl aus den gegebenen Optionen auszuwählen.

Hinweis: Die „Radio“-Schaltflächen ähneln Kontrollkästchen, es gibt jedoch einen wichtigen Unterschied zwischen beiden Typen: Mit Optionsfeldern kann der Benutzer jeweils nur eine Option auswählen, während mit Kontrollkästchen ein Benutzer null bis mehrere Optionen gleichzeitig auswählen kann .

Beispiel:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br> 

Ausgabe:

Geben Sie den Typ „Kontrollkästchen“ ein

Anmeldeformular

Bitte wählen Sie Ihre Lieblingssportarten aus

7. :

Der Typ „Button“ definiert einen einfachen Druckknopf, der so programmiert werden kann, dass er ein beliebiges Ereignis, beispielsweise ein Klickereignis, funktional steuert.

Hinweis: Es funktioniert hauptsächlich mit JavaScript.

Beispiel:

Ausgabe:

Geben Sie den Typ „Schaltfläche“ ein.

Klicken Sie auf die Schaltfläche, um das Ergebnis anzuzeigen:

Hinweis: Im obigen Beispiel haben wir den „Alert“ von JS verwendet, den Sie in unserem JS-Tutorial lernen werden. Es wird verwendet, um ein Pop-Fenster anzuzeigen.

8. :

Das Element vom Typ „Datei“ wird verwendet, um eine oder mehrere Dateien aus dem Speicher des Benutzergeräts auszuwählen. Sobald Sie die Datei ausgewählt und übermittelt haben, kann diese Datei mithilfe von JS-Code und Datei-API auf den Server hochgeladen werden.

Beispiel:

 Select file to upload: 

Ausgabe:

Geben Sie den Typ „Datei“ ein.

Wir können jeden Dateityp auswählen, bis wir ihn angeben! Die ausgewählte Datei wird neben der Option „Datei auswählen“ angezeigt

9. :

Der Typ „Bild“ wird verwendet, um eine Senden-Schaltfläche in Form eines Bildes darzustellen.

Beispiel:

 <h2>Input &apos;image&apos; type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br> 

HTML5 neu hinzugefügtes Typenelement

1. :

Der Typ „Farbe“ wird verwendet, um ein Eingabefeld zu definieren, das eine Farbe enthält. Es ermöglicht einem Benutzer, die Farbe über die visuelle Farboberfläche eines Browsers festzulegen.

Hinweis: Der Typ „Farbe“ unterstützt nur Farbwerte im Hexadezimalformat und der Standardwert ist #000000 (schwarz).

Beispiel:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick 

Ausgabe:

Eingabe-'Farbtypen':

Notiz: Der Standardwert des Typs „Farbe“ ist #000000 (schwarz). Es unterstützt nur Farbwerte im Hexadezimalformat.

r in C-Sprache

2. :

Das Element vom Typ „Datum“ generiert ein Eingabefeld, das es einem Benutzer ermöglicht, das Datum in einem bestimmten Format einzugeben. Ein Benutzer kann das Datum über ein Textfeld oder über die Schnittstelle zur Datumsauswahl eingeben.

Beispiel:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br> 

Ausgabe:

Geben Sie den Typ „Datum“ ein

3. :

Das Element vom Typ „datetime-local“ erstellt Eingabedateien, die es einem Benutzer ermöglichen, das Datum sowie die Ortszeit in Stunden und Minuten ohne Zeitzoneninformationen auszuwählen.

Beispiel:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br> 

Ausgabe:

Geben Sie den Typ „datetime-local“ ein

4. :

Der Typ „E-Mail“ erstellt ein Eingabefeld, das es einem Benutzer ermöglicht, die E-Mail-Adresse mit Mustervalidierung einzugeben. Die mehreren Attribute ermöglichen es einem Benutzer, mehr als eine E-Mail-Adresse einzugeben.

Beispiel:

 <b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b> 

Ausgabe:

Geben Sie den Typ „E-Mail“ ein

Notiz: Der Benutzer kann auch mehrere E-Mail-Adressen getrennt durch Komma oder Leerzeichen wie folgt eingeben:

5. :

Der Typ „Monat“ erstellt ein Eingabefeld, das es einem Benutzer ermöglicht, einfach Monat und Jahr im Format „MM, JJJJ“ einzugeben, wobei MM den Monatswert und JJJJ den Jahreswert definiert. Neu

Beispiel:

 Enter your Birth Month-year: 

Ausgabe:

Eingabetyp „Monat“:

6. :

Die Elementtypnummer erstellt ein Eingabefeld, das es einem Benutzer ermöglicht, den numerischen Wert einzugeben. Sie können die Eingabe eines Mindest- und Höchstwerts auch mithilfe der Min- und Max-Attribute einschränken.

Beispiel:

 Enter your age: 

Ausgabe:

Geben Sie den Typ „Nummer“ ein

Notiz: Es ermöglicht die Eingabe einer Zahl im Bereich von 50-80. Wenn Sie eine andere Zahl als den Bereich eingeben möchten, wird eine Fehlermeldung angezeigt.

7. :

Das Element vom Typ „URL“ erstellt eine Eingabedatei, die es dem Benutzer ermöglicht, die URL einzugeben.

Beispiel:

 Enter your website URL: <br> 

Ausgabe:

Geben Sie den URL-Typ ein

8. :

Der Typ Woche erstellt ein Eingabefeld, das es einem Benutzer ermöglicht, eine Woche und ein Jahr aus dem Dropdown-Kalender ohne Zeitzone auszuwählen.

Beispiel:

 <b>Select your best week of year:</b> <br> <br> 

Ausgabe:

Geben Sie den Typ „Woche“ ein

9. :

Der Typ „Suche“ erstellt eine Eingabedatei, die es einem Benutzer ermöglicht, eine Suchzeichenfolge einzugeben. Diese sind funktional symmetrisch zum Texteingabetyp, können jedoch anders gestaltet sein.

Beispiel:

 Search here: 

Ausgabe:

Geben Sie den Suchtyp ein

10. :

Das Element vom Typ ?tel? Erstellt ein Eingabefeld zur Eingabe der Telefonnummer. Der Typ „Tel“ verfügt nicht über eine Standardvalidierung wie E-Mail, da das Telefonnummernmuster weltweit variieren kann.

Beispiel:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br> 

Ausgabe:

Geben Sie den Typ „tel“ ein

Notiz: Hier verwenden wir zwei Attribute, nämlich „Muster“ und „erforderlich“, die es dem Benutzer ermöglichen, die Zahl in einem bestimmten Format einzugeben, und es ist erforderlich, die Zahl in das Eingabefeld einzugeben.