HTML5-Elemente für Formulare und Daten

HTML5 enthält neue Elemente, um die Erstellung von Datenfeldern zu erleichtern, die in vielen Fällen mit Javascript programmiert werden mussten, oder eine externe Bibliothek in einer Sprache hinzuzufügen, die es ermöglicht, die Fähigkeiten der xhtml- und html4-Elemente zu erweitern.
Viele Programmierer arbeiten weiterhin auf die traditionelle Weise, die von den meisten Browsern unterstützt wird, die neuesten Verbesserungen werden nur von den neueren Versionen unterstützt.
HTML5 bietet eine Reihe neuer Attribute für das type-Attribut des input-Elements, also die meisten Elemente eines Formulars, wie z. B. Textfelder.
Einige dieser bekannten HTML-Attribute sind:
Eingabetyp = Text - Textfeld
Eingabetyp = Kennwort - Kennwortfeld, das das Kennwort mit Sternchen verbirgt.
Eingabetyp = Absenden - Schaltfläche zum Absenden von Formularen
NUMMER TYPE ATTRIBUTE REGISTER
Das Element, das das Attribut type number enthält, ermöglicht nicht nur zu bestimmen, dass der eingegebene Wert numerisch ist, sondern auch zwischen Maximum und Minimum zu beschränken. Wir können im Bild sehen, wie es auch validiert wird, ohne dass etwas programmiert werden muss

Der Quellcode für das Beispiel zur Verwendung dieses Attributs lautet wie folgt

 Nummer eingeben
Nummer eingeben
Durchgangsnummer (1-40):

DATUMSTYP-ATTRIBUT (DATUM)
Das Datumstypattribut wird für Felder verwendet, in denen ein Datum enthalten sein muss. Je nach Browser und der angebotenen Unterstützung scheint das Kalendersteuerelement ein Datum auswählen zu können.

FARBTYP-ATTRIBUT
Das Farbtypattribut wird für Felder verwendet, in denen eine Farbe enthalten sein muss. Abhängig vom Browser und der von ihm angebotenen Unterstützung scheint das Steuerelement für den Farbwähler in der Lage zu sein, eine Farbe auszuwählen oder die Farbe in hexadezimaler Form zu schreiben. Der Selektor wird als Popup angezeigt, wenn auf die Farbe geklickt wird.

Farbtyp
Wählen Sie eine Farbe:

E-MAIL-TYP-ATTRIBUT
Das Attribut E-Mail-Typ wird für Felder verwendet, in denen eine E-Mail enthalten sein muss. Je nach Browser und der angebotenen Unterstützung wird überprüft, ob der eingegebene Text das Format einer E-Mail hat, andernfalls wird eine Fehlermeldung angezeigt, die die Validierung eines Formulars ohne Programmierung erleichtert.

E-Mail-Typ
Email eingeben:

URL-TYP-ATTRIBUT
Das Attribut url type wird für Felder verwendet, in denen eine Domäne, eine URL, enthalten sein muss. Je nach Browser und der angebotenen Unterstützung wird überprüft, ob der eingegebene Text das Format einer Domäne hat, es wird jedoch eine Fehlermeldung angezeigt, die die Validierung eines Formulars ohne Programmierung erleichtert. Es muss kein http oder www enthalten, in diesem Fall müssen wir es durch Programmierung validieren, wenn wir es benötigen.

URL-Typ
Email eingeben:

ATTRIBUTE UND EIGENSCHAFTEN FÜR HTML5
1. Autocomplete-Attribut
Wenn wir in ein Feld des Formulars schreiben, stellen wir fest, dass der Browser uns im Allgemeinen die Möglichkeit gibt, das, was wir gerade schreiben, automatisch mit Text zu vervollständigen, mit dem wir bereits zuvor geschrieben haben. Dies kann zu Sicherheitsproblemen führen, da zum Beispiel, wenn Wenn wir mehrere E-Mails schreiben, weil der Computer von einem anderen Benutzer verwendet wurde, könnten wir schreiben, um Informationen zu sehen, die ein anderer Benutzer eingegeben hat. Im Beispiel deaktivieren wir die Autovervollständigung in der Mail, aber nicht in den anderen Feldern. Es kann auch über den Browser deaktiviert werden, aber viele Benutzer wissen nicht, dass die Option vorhanden ist oder wie die automatische Vervollständigung deaktiviert wird.

Autocomplete-Attribut
Name:
Email:

Wir sehen, dass beim Eingeben des Wortes Autocomplete und Absenden beim späteren Aufrufen desselben Formulars und Drücken nur des Buchstabens A in diesem Fall bereits das Wort vorgeschlagen wird, das wir zuvor geschrieben haben.

2. Autofokus-Attribut
Dieses Attribut wird verwendet, um anzugeben, in welcher Eingabe eines Formulars der Cursor beim Laden der Webseite positioniert werden soll, wenn er nicht vorhanden ist, beginnt er mit dem ersten, den er findet. Dies kann auch mit jQuery programmiert werden, um sich nach Bedarf auf verschiedene Steuerelemente zu konzentrieren.

3. Formularattribut
Dieses Attribut ist sehr nützlich, um Elemente außerhalb eines Formulars zu verwalten, unabhängig davon, wo es sich in der Struktur des Webs befindet.

Formularattribut
Produkt:
Beschreibung:


Lorem Ipsum ist einfach nur Blindtext der Druck- und Satzindustrie.
Lorem Ipsum ist einfach Dummy-Text der Druck- und Satzindustrie.
Lorem Ipsum ist einfach nur Blindtext der Druck- und Satzindustrie.
Lager: 

Wir können im HTML-Quellcode sehen, dass wir ein Formular erstellt haben, um die Daten eines Produkts einzugeben, dann erklärenden Text und schließlich haben wir ein Textfeld für den Lagerbestand außerhalb des Formulars platziert, aber wir verbinden es mit diesem Formular über seine Identifikations-ID = "FormA" in das Standardtextfeld setzen wir, dass wir es auf das Formular beziehen form = "formA", auf diese Weise werden beim Senden des Formulars auch alle zugehörigen Elemente mitgesendet.
4. FormAction-Attribut
Dieses Attribut ist sehr nützlich, um das gleiche Formular an verschiedene Seiten zu senden, was zuvor in Javascript programmiert werden musste und Parameter aller Elemente des Formulars zu senden, um es weiterleiten zu können. In einigen Fällen wurde es sehr umständlich, insbesondere wenn Es gab mehrere Formen, die voneinander abhingen.
Wir nehmen das Beispiel des vorherigen Falls mit einem Button senden wir das Formular an die Seite record.php und mit dem anderen an stock.php

Formularattribut
Produkt:
Beschreibung:


Lorem Ipsum ist einfach nur Dummy-Text der Druck- und Satzindustrie.

Lorem Ipsum ist einfach nur Blindtext der Druck- und Satzindustrie.
Lorem Ipsum ist einfach nur Dummy-Text der Druck- und Satzindustrie.
Stock: Bildattribut mit Absenden Wenn wir ein Bild als Absenden-Button zum Absenden eines Formulars verwenden möchten, war die einzige Möglichkeit, ein Bild einzufügen oder CSS-Stylesheets zu verwenden und dann die Funktionalität mit Javascript auszuführen.
Bildtypattribut
Produkt:
Beschreibung:

5. List- und Datalist-Attribut
Mit diesem Attribut können Sie eine Liste in einem Element definieren und sie dann auf ein Eingabeelement anwenden, damit es während der Eingabe eine Suche durchführt.

Listen- und Datenlistentypattribut

Wir sehen, dass beim Schreiben von nur einem Buchstaben in diesem Fall f eine Liste mit den gefundenen Möglichkeiten angezeigt wird. Dies ist sehr nützlich, da es die Daten, die die Datenliste enthält, filtert und auch in anderen Steuerelementen oder Elementen wiederverwendet werden kann.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben