Implementierung der Formularübermittlung in HTML

Autor：Eve Cole Aktualisierungszeit：2025-01-18 12:48:01

Formularübermittlungscode

1. Quellcode-Analyse

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Document</title></head><body><form action=/form.html method=GET> <!-- action: Adresse für die Formularübermittlung --> <!-- method: Methode zur Übermittlung der Richtlinie --><div class=name> <label for=name>username</label> <input type=text name=name id=name placeholder = Bitte geben Sie den Benutzernamen ein> <!-- Platzhalter ist ein transparenter Eingabeaufforderungstext--></div><div class=password> <label for=password>Password</label> <input type=password name=password id= Passwort placeholder=Bitte Passwort eingeben></div><div class=sex> <label for=sex>gender</label> <input type=radio name=sex value=male>Male<input type=radio name=sex value= weiblich>Weiblich</div><div class=city> <label for=city>Lieblingsstadt</label> <select name=city id=city> <option value=beijing>Peking</option> <option value=shanghai>Shanghai</option> <option value=chongqing selected >Chongqing</option> <!-- selected gibt die ausgewählte Option an, die auf der Seite angezeigt werden soll--> </select></div><div class =hobby > <label for=hobby>Hobby</label> <input type=checkbox name=hobby value=read>Lesen<input type=checkbox name=hobby value=flower>Blumen arrangieren<input type=checkbox name=hobby value=sing>Singing<!-- Alle Optionsnamen müssen gleich sein--></div><div class=area> <textarea id=area name=area cols=30 rows=10></textarea></ div> <button>button</button><!-- Das Formular kann gesendet werden--><input type=submit value=submit> <!-- Das Formular kann gesendet werden--><input type=button value=button><!-- Das Formular kann nicht gesendet werden--><input type=reset value=reset><!-- Setzt den Inhalt zurück, der in das Formular eingegeben wurde--></form></body> < /html>

2. Terminalbetrieb

Öffnen Sie das Terminal-Gitbash und wechseln Sie in den Ordner, in dem sich der HTML-Code befindet

Verwenden Sie den Befehlszeilen-HTTP-Server, um den statischen Server zu öffnen. Nach dem Öffnen werden zwei IP-Adressen angezeigt. 127.xxx ist die lokale Zugriffsadresse und 125.xxx ist die LAN-Zugriffsadresse (hier wird davon ausgegangen, dass nodejs installiert wurde und der http-Server-Server mit npm installiert wurde).

Öffnen Sie die HTML-Datei mit einem Browser. Verwenden Sie http://127.0.0.1:8080, um die lokale Dateiadresse zu ersetzen.

Klicken Sie auf den Check-Network-Header, um die vom Formular übermittelten Informationen anzuzeigen.

3. Der Unterschied zwischen Get- und Post-Methoden

get verkettet die übermittelten Daten mithilfe von & zu einer URL, die zum Inhalt der Abfrage im URL-Objekt wird. Aber die URL des Beitrags ist sehr sauber
Die Menge der übermittelten Daten variiert und get kann bis zu 1.000 Daten übermitteln. Bei Überschreitung des Browser-Limits werden die Daten gekürzt. Das Posten ist theoretisch unbegrenzt und unterliegt Serverbeschränkungen
Die von get übermittelten Daten befinden sich im Browserverlauf und weisen eine geringe Sicherheit auf
Das Wichtigste beim Erhalten ist das Geben, das Wichtige beim Posten ist das Geben

4. Dinge, die Sie beachten sollten

Alle Eingabe-Tags müssen mit dem Namensattribut hinzugefügt werden, sonst können die Daten nicht korrekt empfangen werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.