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

Beispielanalyse von Linux-Dateiverwaltungsbefehlen [Anzeige, Ansicht, Statistiken usw.]

Dieser Artikel beschreibt die Linux-Dateiverwaltu...

nginx löst das Problem der langsamen Bildanzeige und des unvollständigen Downloads

Vorne geschrieben Kürzlich berichtete mir ein Les...

So implementieren Sie vertikale Textausrichtung mit CSS (Zusammenfassung)

Die Standardanordnung von Text in HTML ist horizo...

Detaillierte Erklärung zu Javascript-Dateien und Blobs

Inhaltsverzeichnis Datei() Grammatik Parameter Be...

Oberflächliches Webdesign

<br />Ich war schon immer der Meinung, dass ...

Bedingtes Rendering von Vue (v-if und v-show)

Inhaltsverzeichnis 1. v-wenn 2. Verwenden Sie v-i...

Klassischer MySQL-High-Level-/Befehlszeilenvorgang (schnell) (empfohlen)

Da ich lernen muss, wie man Server und Datenbanke...

JavaScript implementiert den Farbänderungseffekt durch Klicken mit neun Rastern

In diesem Artikel wird der spezifische JavaScript...

Installieren Sie mysql5.7.10 manuell unter Ubuntu

Dieses Tutorial beschreibt den Prozess der manuel...

Erläuterung des MySQL-Multitabellen-Join-Abfragebeispiels

In tatsächlichen Projekten gibt es Beziehungen zw...

Ausführliches Tutorial zur Installation von MySql 5.6.35 winx64

Hinweis: Beim Projektstart ist kein Fehler aufgru...

Anweisungen zur Verwendung des HTML-Tags dl dt dd

Grundaufbau: Code kopieren Der Code lautet wie fol...

Lassen Sie uns im Detail darüber sprechen, wie JavaScript den Aufbau des DOM-Baums beeinflusst

Inhaltsverzeichnis Dokumentobjektmodell (DOM) DOM...

WeChat-Applet-Canvas implementiert Signaturfunktion

Im WeChat-Applet-Projekt umfasst das Entwicklungs...

Die vue-cli-Konfiguration verwendet den vollständigen Prozessdatensatz von Vuex

Inhaltsverzeichnis Vorwort Installation und Verwe...