Im vorherigen Tutorial haben wir mit den HTML5-Nachrichten in der Formulardatenverwaltung begonnen. Wir werden weiterhin einige andere Funktionen erläutern, mit denen wir viel Entwicklungszeit sparen können.
Das erforderliche Attribut:
Das erforderliche oder erforderliche Attribut in einem Element wird in einer <Eingabe> festgelegt und zwingt den Benutzer automatisch, das Feld auszufüllen, um fortzufahren. Das heißt, der Browser lässt nicht zu, dass das Formular ohne die Eingabe mit diesem Attribut gesendet wird diese Leere.
<form action = "demo.php"> Name: <input type = "text" name = "name" required = "required" /> <input type = "submit" /> </ form>
Das erforderliche Attribut funktioniert mit den Eingabetypen: Text, Suche, URL, Telefon, E-Mail, Kennwort, Datumsauswahl, Nummer, Kontrollkästchen, Radio und Datei.
Es kann mit jquery.validate.js kombiniert werden, um auszuführende Antwortnachrichten und Ereignisse zu konfigurieren. Wir können ein Beispiel im Tutorial Validate Form with Jquery sehen
Eines der größten Probleme von HTML5 ist, dass nicht alle Elemente mit aktuellen Browsern kompatibel sind. Wir sollten daher vor der Entwicklung prüfen, welche Elemente kompatibel sind und welche nicht. Wir wundern uns nicht, dass das, was wir später verwenden möchten, nicht funktioniert.
Über den folgenden Link können wir die Kompatibilität von HTML5 mit Browsern überprüfen. Wir können ein vollständiges Diagramm anzeigen , um festzustellen, ob das, was wir verwenden möchten, funktioniert oder nicht. Je nach zu verwendendem Element oder Etikett
Datenspeicher oder Webstorage mit HTML5
Mit HTML5 können Webseiten Daten lokal im Browser des Benutzers speichern.
Zuvor wurde dies mit Cookies durchgeführt. Web-Speicher ist jedoch sicherer und schneller. Daten sind nicht in jeder Serveranfrage enthalten, sondern werden nur auf Anfrage verwendet. Es ist auch möglich, große Datenmengen zu speichern, ohne die Leistung der Website zu beeinträchtigen.
Einer der großen Vorteile dieser Speichermethode ist, dass sie sichere Daten ermöglicht und uns unter anderem großartige Möglichkeiten bietet, mit Seiten und Anwendungen zu arbeiten, die offline arbeiten, ohne dass wir auf das Internet zugreifen müssen.
Die Daten werden in Name> Wertepaaren gespeichert, und eine Webseite kann nur von sich aus auf die gespeicherten Daten zugreifen.
Im Gegensatz zu Cookies ist das Speicherlimit viel höher und funktioniert wie eine lokale Datenbank.
Sie können 2 Arten von Speicher haben
- Lokaler Speicher: Die gespeicherten Daten haben kein Ablaufdatum, sie bleiben auf unbestimmte Zeit verfügbar (das localStorage-Objekt wird verwendet).
- Sitzungsspeicher: Die gespeicherten Daten sind nur während der Browsersitzung verfügbar. Wenn sie geschlossen werden, verschwinden sie (das sessionStorage-Objekt wird verwendet).
Einfaches Beispiel für Datenspeicherung
<! DOCTYPE html> <html> <head> <meta http-equiv = "Inhaltstyp" content = "text / html; charset = UTF-8" lang = "en-es"> <title> Datenspeicher </ title> <script> Funktion savedata () { var local = document.getElementById ("local"). value; var session = document.getElementById ("session"). value; localStorage.lData = local; sessionStorage.sData = session; } function leerdatos () { var local = localStorage.lData; var session = sessionStorage.sData; if (local) { document.getElementById ("local"). value = local; } if (session) { document.getElementById ("Sitzung"). value = Sitzung; } } </ script> </ head> <body> <fieldset> <legend> Webspeicher </ legend> Es wird lokal gespeichert: <input id = "local"> </ input> <br> Es wird in einer Sitzung gespeichert: <input id = "session"> </ input> </ fieldset> <div> <button onclick = "savedata ()"> Speichern </ button> <button onclick = "readdata ()"> Abrufen </ button> </ div> </ body> </ html>