Implementierung der Formularübermittlung in HTML

Formularübermittlungscode

1. Quellcode-Analyse

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
</Kopf>
<Text>
<form action="/form.html" method="GET">
    <!-- Aktion: die Adresse, an die das Formular gesendet wird-->
    <!-- method: Methode zum Einreichen der Versicherungspolice -->
<div Klasse="Name">
    <label for="name">Benutzername</label>
    <input type="text" name="name" id="name" placeholder="Bitte geben Sie Ihren Benutzernamen ein">
    <!-- Platzhalter ist ein transparenter Eingabeaufforderungstext -->
</div>
<div class="Passwort">
    <label for="password">Passwort</label>
    <input type="password" name="password" id="password" placeholder="Bitte geben Sie Ihr Passwort ein">
</div>
<div Klasse="Geschlecht">
    <label for="sex">Geschlecht</label>
    <input type="radio" name="sex" value="male">Männlich<input type="radio" name="sex" value="female">Weiblich</div>
<div Klasse="Stadt">
    <label for="city">Lieblingsstadt</label>
    <select name="Stadt" id="Stadt">
        <option value="beijing">Peking</option>
        <option value="shanghai">Shanghai</option>
        <option value="chongqing" ausgewählt >Chongqing</option>
        <!-- selected gibt die Option an, die ausgewählt und auf der Seite angezeigt wird -->
    </Auswählen>
</div>

<div Klasse="Hobby">
        <label for="hobby">Hobbys</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">Singen<!-- Alle Optionsnamen müssen gleich sein-->
</div>
<div Klasse="Bereich">
    <textarea id="Bereich" name="Bereich" cols="30" rows="10"></textarea>
</div>
<button>Schaltfläche</button>
<!-- Sie können das Formular absenden -->
<input Typ="Senden" Wert="Senden"> 
<!-- Sie können das Formular absenden -->
<Eingabetyp="Schaltfläche" Wert="Schaltfläche">
<!-- Formular kann nicht übermittelt werden-->
<Eingabetyp="Zurücksetzen" Wert="Zurücksetzen">
<!-- Bereits im Formular eingegebenen Inhalt zurücksetzen -->

</form>
</body>
</html>

2. Terminalbetrieb

Öffnen Sie das Terminal gitbash und wechseln Sie in den Ordner, in dem sich html befindet

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

Öffnen Sie die HTML-Datei mit Ihrem Browser. Ersetzen Sie die lokale Dateiadresse durch http://127.0.0.1:8080.

Klicken Sie auf „Netzwerk-Header prüfen“, um die im Formular übermittelten Informationen anzuzeigen.

3. Unterschiede zwischen Get- und Post-Methoden

Get verkettet die übermittelten Daten mittels & zu einer URL, die dann zum Inhalt der Abfrage im URL-Objekt wird. Aber die Post-URL ist sehr sauber
Die Menge der übermittelten Daten ist unterschiedlich. Get kann bis zu 1.000 Daten übermitteln. Bei Überschreiten des Browserlimits werden die Daten gekürzt. Theoretisch unbegrenzte Anzahl an Posts, vorbehaltlich Serverbeschränkungen
Die von get übermittelten Daten befinden sich im Browserverlauf, was nicht sicher ist.
Bei „get“ geht es um „wollen“, bei „post“ um „geben“

4. Hinweise

Alle Input-Tags müssen mit einem Name-Attribut versehen werden, sonst können die Daten nicht korrekt empfangen werden.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Fassen Sie die allgemeinen Eigenschaften von BigIn-Funktionen in JavaScript zusammen

>>: Detaillierte Erklärung zur Installation der MySQL-Datenbank auf dem Alibaba Cloud Server

So deaktivieren Sie die Klartextanzeige und die Schnelllöschfunktion von IE10

Implementierung der Formularübermittlung in HTML

So deaktivieren Sie die Klartextanzeige und die Schnelllöschfunktion von IE10

Detaillierte Erklärung des JS-Browser-Ereignismodells

Implementierung der MySQL8.0.11-Datenverzeichnismigration

Eine einfache Methode zum regelmäßigen Löschen abgelaufener Datensätze in MySQL

Detaillierte Erläuterung der Platzhalter für die Webentwicklung in JS-Zeichenfolgenverkettung und der Conlose-Objekt-API

Detaillierte Erläuterung der Persistenz des Vue-Seitenstatus

Detaillierte Erläuterung der Konzepte und Verwendung von Docker Swarm

Beispiel für die Erstellung eines XML-Online-Editors mit js

Detaillierte Erläuterung des MySQL Master-Slave-Replikationsprozesses

Beschreibung der Nginx-Zugriffsprotokoll- und Fehlerprotokollparameter

Artikel empfehlen

MySQL in Windows net start mysql Beim Starten des MySQL-Dienstes tritt ein Fehler auf. Lösung für Systemfehler

50 wunderschöne FLASH-Website-Designbeispiele

Benutzerzentriertes Design

Detaillierte Erläuterung des einzeiligen Funktionscodes des Datumstyps in MySQL

Einführung in die schnelle Docker-Bereitstellung eines SpringBoot-Projekts

Details zum Like-Operator in MySQL

CSS implementiert die Bottom-Tapbar-Funktion

So konfigurieren Sie Linux CentOS für die regelmäßige Ausführung von Skripten

So installieren Sie den Kibana-Tokenizer im Docker-Container

Reines CSS und Flutter realisieren jeweils einen atmenden Lichteffekt (Beispielcode)

MySQL-Performance-Optimierung: So nutzen Sie Indizes effizient und richtig

Zusammenfassung der Ubuntu-Sicherungsmethoden (vier Typen)

Gründe, warum MySQL den Abfrage-Cache abgebrochen hat

MySQL-Integritätsbeschränkungen – Definition und Beispiel-Tutorial

Lösung zum Vergessen des Passworts des Pagodenpanels in Linux 3.X/4.x/5.x