Ein Formular ist ein Element in HTML, weil es uns die Eingabe von Daten ermöglicht und interagieren daher auch mit dem Web und seiner Datenbank, was aus Sicherheitsgründen Kontrollen erfordert, da wir von einem Formular aus Dateien an einen Server senden können, um eine Bestellung oder Zahlung zu bearbeiten, verschiedene Elemente und Kontrollen eines Formulars auszuwählen, die dann von einem Javascript-Ereignis oder einer anderen Web-Programmiersprache verarbeitet wird.
Entwickler müssen oft verschiedene Bibliotheken verwenden, um Aufgaben in Formularen ausführen zu können, um Ereignisse zu steuern, und in einigen Fällen müssen wir auf einige unerwünschte Codemethoden zurückgreifen, um Daten zu senden, die Eingabe zu kontrollieren, Codeinjektionen oder XSS-Angriffe zu vermeiden.
Wenn wir all diese Kontrollen und Ereignisse durchführen möchten, können wir eine große Anzahl von Javascript-Dateien finden, die das Gewicht des Webs in KB erheblich erhöhen und die Seite verlangsamen. Es ist auch unsicher, denn wenn jemand die Verwendung von Javascript deaktiviert, werden alle Steuerelemente nicht mehr funktionieren.
Die Elemente von Formulare und Attribute in HTML5 bieten ein höheres Maß an Kontrolle und semantischem Markup als seine Vorgängerversion, es wurden Attribute und Eigenschaften hinzugefügt, die die externe Steuerung über Skripte überflüssig machen. Die Formularfunktionen in HTML5 bieten eine bessere Kontrolle und hängen nicht davon ab, ob Javascript in Ihrem Browser aktiviert oder deaktiviert ist.
HTML5-Formularattribute - Platzhalter
Mittels der Platzhaltereigenschaft Wir können ein Beispiel für die Art der zu registrierenden Daten angeben, dies ermöglicht es uns, dem Benutzer Informationen zur Verfügung zu stellen, die als Leitfaden dienen. Dieser Text, den wir im Steuerelement angeben, verschwindet, nachdem der Benutzer ein Zeichen eingegeben hat.
Das Platzhalterattribut kann nur in Textfeldern oder in Textbereichen verwendet werden.
Muster mit regulären Ausdrücken in Formularen
Das Musterattribut ermöglicht es uns, unsere Regeln zu definieren, um die Daten zu validieren, die der Benutzer mit regulären Ausdrücken eingibt. Ein regulärer Ausdruck ist eine Zeichenfolge, die ein Datenmuster definiert, zum Beispiel das Muster [a-z] gibt an, dass der Benutzer nur Kleinbuchstaben eingeben kann oder das Muster [0-9] gibt an, dass nur Zahlen eingegeben werden können.
HTML5 ermöglicht die Verwendung von Mustern. Wenn die eingegebenen Zeichen nicht mit dem automatisch definierten Muster übereinstimmen, wird ein Fehler generiert.
Wir gehen zu Definieren Sie einige Regeln mit Mustern und Stylesheets die Farbe des Rahmens zu ändern, wenn das ungültige Ereignis eintritt, d. h., was vom Benutzer eingegeben wird, entspricht nicht dem, was in einem bestimmten Muster definiert ist.
Wir erstellen eine Datei Example01.html und schreiben den folgenden Code:
Muster mit regulären Ausdrücken
Nutzer
Taste:
Email:
Datum
Preis
Wenn wir das Formular senden, validiert es jedes Feld in Bezug auf das definierte Muster und wenn es nicht erfüllt ist, zeigt es die Nachricht an, die wir im Titel-Tag definieren, es verwendet auch die in den Regel- und CSS-Eigenschaften definierten Stile der ungültigen Klasse, die HTML5 verwendet.
Zum Beispiel geben wir eine falsche E-Mail ein:
Wir geben auch ein falsches Datum ein und sehen, dass es das Senden des Formulars nicht zulässt. Wenn wir einen visuellen Effekt verbessern oder hinzufügen möchten, können wir mit CSS ein Hintergrundsymbol in das Steuerelement einfügen, in dem der Fehler auftritt. Zum Beispiel fügen wir die folgenden CSS-Stile zu den bereits vorhandenen hinzu, wir ändern die Eingabe in input [type = 'text'], damit die Stylesheets nur die Textfelder und nicht die Schaltfläche betreffen.
Wir verwenden die folgenden Symbole:
Neben jedem Steuerelement fügen wir die erforderliche Eigenschaft hinzu, zum Beispiel:
Beim Ausführen des Beispiels können wir sehen, dass, wenn wir das Formular mit leeren Feldern senden, uns die erforderlichen und gültigen Felder angezeigt werden.
Der Vorteil von Mustern besteht darin, dass wir weder JQuery noch eine andere Art der Validierung verwenden und wenn diese Option im Browser deaktiviert wird, funktionieren die von uns definierten Einschränkungen und Regeln weiterhin. Dies bedeutet nicht, dass wir durch das Absenden des Formulars Kontrollen bei der Verarbeitung der Daten vermeiden, sei es in einer Datenbank gespeichert oder per Post gesendet oder eine Operation ausgeführt.
Formular mit mehreren Einreichungen
Etwas, das kompliziert war, ist Senden Sie dasselbe Formular an zwei verschiedene SeitenNehmen wir an, ein einzelnes Anmeldeformular, das beim Klicken auf eine Schaltfläche zu verschiedenen Seiten führt, auf denen sich die Abfragen und der Informationsprozess ändern. Dies geschieht durch die Definition der Formaction-Eigenschaft, wobei wir standardmäßig eine andere Verarbeitungsoption für die Aktion angeben.
Formular mit mehreren Einreichungen
Nutzer:
Taste:
Es besteht kein Zweifel, dass die Interaktion mit diesen Arten von Eigenschaften und Attributen die Entwicklung von Websites erheblich erleichtert, ohne externe Bibliotheken und komplexe Javascript-Codes verwenden zu müssen.
Als Designer und Entwickler stellen wir normalerweise fest, dass ein Skript eine gewisse Monotonie hat, um HTML zu strukturieren und zu validieren, insbesondere um Validierungsregeln zu schreiben und dem Benutzer dann anzuzeigen, wenn ein Fehler auftritt. HTML 5 führt diese neuen Attribute, Eingabetypen und andere Elemente ein, sodass wir weniger Code schreiben und uns mehr auf Semantik als auf Syntax konzentrieren müssen.
Diese Regeln funktionieren in allen Browsern, unabhängig vom Betriebssystem und wir müssen keine anderen Bibliotheken oder Hacks verwenden, um uns an verschiedene Systeme oder Geräte anzupassen. Wir haben mehrere Formularattribute gesehen, die dazu beitragen, die Benutzererfahrung zu verbessern und Entwicklungszeit zu sparen. Es gibt einige Attribute, die noch nicht in allen Browsern funktionieren.
