Wir wissen, dass die Formulare die vom Benutzer erfassten Daten über das http-Protokoll mit einer der Methoden wie GET oder POST an eine neue Seite oder an sich selbst senden. Es gibt verschiedene Möglichkeiten, die Daten zu verschlüsseln, um sie über http zu senden. Folgende Codierungstypen sind möglich:
- application / x-www-form-urlencoded : Dies ist die Standardmethode, mit der keine Dateien auf den Server hochgeladen werden können.
- Multipart- / Formulardaten : Diese Methode wird verwendet, um Dateien auf den Server hochzuladen.
- text / plain : Diese Methode ist vom Browser abhängig und wird von jedem auf unterschiedliche Weise behandelt.
Um den Unterschied zwischen den Methoden ein wenig besser erkennen zu können, müssen wir ein Formular mit mindestens zwei Feldern erstellen, damit wir die unterschiedlichen Verhaltensweisen erkennen können.
Sehen wir uns das zu erstellende Formular an:
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> </ head> <body> <form method = "post" action = "http: // titan: 8080 / form"> <input name = "fave" /> <input name = "name" /> <button> Stimme abgeben </ button> </ form> </ body> </ html>
Die Codierungsanwendung / x-www-form-urlencoded ist diejenige, die standardmäßig angewendet wird. Dies ist eine Codierung für den allgemeinen Gebrauch. Sie wird für alle Zwecke außer zum Verarbeiten von Uploads von Dateien verwendet. Ihre Besonderheit besteht darin, dass sie die Format-URL zum Übergeben der Parameter verwendet. Damit unser Formular gesendet werden kann, müssten folgende Informationen gesendet werden:
fave = Äpfel & name = Leon + Ramirez
Wir sehen, dass die vom Benutzer eingegebenen Namen den Namen unserer Felder zugewiesen werden, die Sonderzeichen durch ein Äquivalent in einer HTML-Entität ersetzt werden und wir sehen, dass jedes Wertepaar durch ein & getrennt ist. Auf diese Weise wissen wir, welches Feld das folgende ist.
Die Multipart- / Formulardaten- Codierung ist viel komplexer und verwaltet viel mehr Elemente. Dies liegt daran, dass sie zum Hochladen von Dateien verwendet wird. Daher müssen Sie die Informationen einer Datei als Bild senden, und dafür hat sie diese Struktur :
------ WebKitFormBoundary2qgCsuH4ohZ5eObF Inhaltsdisposition: Formulardaten; name = "fave" Apple ------ WebKitFormBoundary2qgCsuH4ohZ5eObF Inhaltsdisposition: Formulardaten; name = "name" Leon Ramirez ------ WebKitFormBoundary2qgCsuH4ohZ5eObF-- fave = Apfel Name = Leon Ramirez
Die Text- / Nur-Text- Codierung wird von jedem Browser auf unterschiedliche Weise behandelt und nur häufig verwendet, es sei denn, es handelt sich um eine bestimmte Anwendung in einer kontrollierten Umgebung.
Attribut “Autovervollständigen”
Dieses Attribut ist eine Hilfe für viele Menschen, die nicht die am häufigsten wiederkehrenden Daten in einer Form wie Vor- und Nachname oder E-Mail eingeben möchten. Es gibt jedoch auch sehr heikle Anwendungen wie Internetbanking, bei denen wir ein Höchstmaß an Datenschutz im Internet benötigen Einführung unserer Daten.
Um dies zu steuern, verwalten wir das Autocomplete- Attribut. Es kann auf Formularebene oder Eingabeebene gehen und zwei Werte haben, die aktiviert oder deaktiviert sind, da sie möglicherweise abgeleitet wurden, wenn sie aktiviert sind, oder es dem Browser ermöglichen, Daten vorzuschlagen, die aktiviert sind Der Benutzer hat bereits zuvor ähnliche Formulare oder dasselbe Formular eingegeben, das Sie gerade anzeigen. Wenn es deaktiviert ist, werden keine Vorschläge angezeigt. Lassen Sie uns seine Anwendung an zwei sehr einfachen Beispielen sehen.
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> </ head> <body> <form autocomplete = "off" method = "post" action = "http: // titan: 8080 / form"> <input name = "fave" /> <input name = "name" /> <button> Stimme abgeben </ button> </ form> </ body> </ html>
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> </ head> <body> <form autocomplete = "off" method = "post" action = "http: // titan: 8080 / form"> <input autocomplete = "on" name = "fave" /> <input name = "name" /> <button> Stimme abgeben </ button> </ form> </ body> </ html>
In unserem ersten Beispiel sehen wir, wie wir es aus dem gesamten Formular erhalten haben, und im zweiten Beispiel sehen wir, wie wir es auch aus dem gesamten Formular erhalten haben, nur dass wir es in unserer ersten Eingabe aktiviert haben, wir könnten auch das Gegenteil tun und es für das gesamte Formular aktivieren, und ein bestimmtes Feld deaktivieren
Damit schließen wir dieses Tutorial ab und haben das Wissen, Formulare etwas komplexer zu gestalten. Außerdem wissen wir, wie sie intern funktionieren, um die Daten zu senden.
