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 der CentOS8.0-Netzwerkkonfiguration

1. Unterschiede in der Netzwerkkonfiguration zwis...

So verwenden Sie video.js in Vue zum Abspielen von Videos im M3U8-Format

Inhaltsverzeichnis 1. Installation 2. Einführung ...

Informationen zu aufgetretenen Browserkompatibilitätsproblemen und Lösungen (empfohlen)

Vorwort: Letzten Sonntag bat mich ein Senior, ihm...

Detaillierte Installation und Verwendung von SSH in der Ubuntu-Umgebung

SSH steht für Secure Shell, ein sicheres Übertrag...

Detaillierte Erklärung zum MySQL-Dateispeicher

Was ist ein Dateisystem Wir wissen, dass Speicher...

Detaillierte Beschreibung des komponentenbasierten Front-End-Entwicklungsprozesses

Hintergrund <br />Studenten, die am Front-En...

Detaillierte Erklärung der CSS-Hintergrund- und Rahmen-Tag-Beispiele

1. CSS-Hintergrund-Tag 1. Stellen Sie die Hinterg...

svg+css oder js zum Erstellen eines Tick-Animationseffekts

Mein Chef hatte mich gebeten, ein Programm zu ers...

Detailliertes Installationstutorial für Zabbix 4.04 (basierend auf CentOS 7.6)

1. Vorbereitung vor der Installation: 1.1 JDK ins...

Detaillierte Erklärung von mktemp, einem grundlegenden Linux-Befehl

mktemp Erstellen Sie auf sichere Weise temporäre ...

Detaillierte Erklärung der JavaScript-Timer

Inhaltsverzeichnis Kurze Einleitung Intervall fes...

Detaillierte Erklärung des MySQL-Datenbank-LIKE-Operators in Python

Der LIKE-Operator wird in der WHERE-Klausel verwe...

Zusammenfassung der Methoden zum Einbinden von Dateiinhalten in HTML-Dateien

Im Forum fragen Internetnutzer oft: „Kann ich den...

Vue3+Element+Ts implementiert grundlegende Such-Resets und andere Funktionen des Formulars

Nach der Umstellung vom Schreibstil von Vue2 auf ...

Detaillierte grafische und textliche Anweisungen zur Installation von MySQL 5.7.20 unter Mac OS

Installieren von MySQL 5.7 aus TAR.GZ auf Mac OS ...