Implementierung der Formularübermittlung in HTML

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

Artikel empfehlen

Teilen Sie 6 Einladungscodes zur unbegrenzten Aktivierung von Alibaba Cloud Disk. Wenn Sie mir nicht glauben, können Sie Alibaba Cloud Disk aktivieren.

Das letzte Update von Alibaba Cloud Disk ist scho...

So lassen Sie eine Remoteverbindung in MySql zu

So lassen Sie eine Remoteverbindung in MySql zu U...

Ausführliche Erläuterung der HTML-Grundlagen (Teil 1)

1. Das WEB verstehen Webseiten bestehen hauptsäch...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.15 (Windows)

Da ich MySQL installieren muss, zeichne ich den I...

So finden Sie die my.ini-Konfigurationsdatei in MySQL 5.6 unter Windows

Machen Sie sich eine Notiz, damit Sie später dara...

So starten und stoppen Sie das Shell-Skript zur Bereitstellung eines SpringBoot-JAR-Programms unter Linux

Lassen Sie mich Ihnen ohne weitere Umschweife den...

Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

Artikel-Mindmap Warum Master-Slave-Replikation un...

So verwenden Sie Portainer zum Erstellen einer visuellen Schnittstelle für Docker

Portainer-Einführung Portainer ist ein grafisches...

Tutorial zum Erstellen einer VSCode+CMake+Clang+GCC-Umgebung unter Win10

Ich möchte C/C++ verwenden, um grundlegende Daten...

Vue implementiert Paging-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Lösung für MySQL-Replikationsfehler aufgrund voller Festplatte

Inhaltsverzeichnis Fallbeispiel Lösung des Proble...

Zusammenfassung der Unterschiede zwischen Vues Überwachung, Berechnung und Methoden

Inhaltsverzeichnis 1 Einleitung 2 Grundlegende Be...

vue3+ts+EsLint+Prettier Standardcode-Implementierung

Inhaltsverzeichnis verwenden Verwendung von EsLin...

JS beherrscht schnell die Verwendung von ES6-Klassen

1. Wie konstruieren? Lassen Sie uns die allgemein...

So optimieren Sie den MySQL-Deduplizierungsvorgang maximal

Inhaltsverzeichnis 1. Clevere Verwendung von Indi...