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

Implementierung des Vue-Top-Tags-Browserverlaufs

Inhaltsverzeichnis Unsinn Implementierte Funktion...

So verwenden Sie Docker+DevPi zum Erstellen einer lokalen PyPi-Quelle

Vor einiger Zeit musste ich für die Entwicklung h...

Die Idee kombiniert Docker, um Image-Paketierung und Bereitstellung mit einem Klick zu realisieren

1. Docker auf dem Server installieren yum install...

Vue verwendet Openlayers zum Laden von Tiandi Map und Amap

Inhaltsverzeichnis 1. Weltkarte 1. Installieren S...

MySQL-Reihe: Grundlegende Konzepte der relationalen MySQL-Datenbank

Inhaltsverzeichnis 1. Grundlegende Konzepte 2. En...

Vue implementiert den Beispielcode zum Verknüpfen der seitlichen Navigationsleiste mit der Registerkartenseite

Inhaltsverzeichnis Technologie-Stack Wirkung anal...

Tipps zum Listenaufbau für Website-Wartungsseiten

Und oft ist es für Wartungsarbeiten erforderlich, ...

So implementieren Sie die domänenübergreifende API-Proxy-Weiterleitung über die Nginx-Proxy-Weiterleitungskonfiguration

Vorwort Bei der Webentwicklung sind häufig domäne...

Das Installationstutorial zu mysql5.5.28 ist super detailliert!

mysql5.5.28 Installations-Tutorial zu Ihrer Infor...

Chinesische Parameterbeschreibung und Verwendungsbeispiele für ffmpeg

1. Wenn ffmpeg Videodateien überträgt, können die...

Detaillierte Erläuterung der Rolle der Standarddatenbank nach der MySQL-Installation

Wenn Sie MySQL kennen, werden Sie feststellen, da...

Detaillierte Beschreibung der HTML-Tabellenrahmensteuerung

Nur den oberen Rand anzeigen <table frame=above...

Zusammenfassung der Datenspeicherstruktur des Nginx-HTTP-Moduls

Ab diesem Abschnitt erklären wir das Implementier...

Detaillierte Erläuterung des Startens und Einhängens des Docker-Nginx-Containers in den lokalen

Zunächst die Struktur innerhalb des Nginx-Contain...

Beantworten Sie das Caching-Prinzip von Keep-Alive-Komponenten aus Sicht des Quellcodes

Kommen wir heute gleich zur Sache und sprechen üb...