HTML-Kurs / Formularstruktur und der Unterschied zwischen GET und POST

Ein form fasst Steuerelemente zusammen, deren Werte von den Benutzern übermittelt werden. Um zu verstehen, wohin die Daten gehen, unterscheiden Sie die Attribute name der Steuerelemente, das Ziel in action und die Anfragemethode in method. HTML kann die Eingabeschnittstelle erstellen, aber das Speichern oder Abrufen von Daten erfordert einen serverseitigen Handler.

Erstellen Sie ein kleines Suchformular

Das Beispiel akzeptiert einen Suchbegriff. Ersetzen Sie /search durch einen echten Endpunkt, bevor Sie ihn auf einer Website verwenden. Vergleichen Sie die Attribute for und id sowie den Namen des Submit-Schlüssels in Beschriftungen und Eingabefelder korrekt verbinden.

<form action="/search" method="get">
  <label for="keyword">Gesuchter Begriff</label>
  <input id="keyword" name="q" type="search">
  <button type="submit">Suchen</button>
</form>

Das for-Attribut des Labels stimmt mit der id des Eingabefelds überein und ordnet ihm seine Beschriftung zu. name="q" identifiziert den Wert in den gesendeten Daten. Die Eingabe von „HTML“ erzeugt normalerweise eine URL, die ?q=HTML enthält. Ein id ohne name kann immer noch ein Label verbinden, aber der Wert des Feldes wird normalerweise nicht in die Übermittlung aufgenommen.

action gibt das Ziel an; method wählt aus, wie der Browser die Werte sendet. Wenn beide weggelassen werden, wird das Formular standardmäßig mit GET an die aktuelle URL gesendet. Versuchen Sie einen Begriff mit Leerzeichen oder nicht-ASCII-Buchstaben: die Adressleiste kann eine codierte Darstellung dieser Zeichen anzeigen. Es handelt sich um ein Transportformat und nicht um ein Zeichen dafür, dass die Eingabe verschwunden ist.

Wählen Sie GET oder POST

GET legt die Formulardaten in der Abfragezeichenfolge der URL ab. Es ist geeignet für Suchen und Filter, die Benutzer als Lesezeichen speichern oder teilen können. Verwenden Sie es nicht, um Passwörter oder andere sensible Werte zu senden, da die Daten in der URL sichtbar sind. POST sendet die Formulardaten im Anfragetext und wird häufig für Vorgänge verwendet, die den Status des Servers ändern, wie das Erstellen eines Kontos oder das Senden einer Nachricht. POST verschlüsselt die Daten nicht selbst; sensible Übermittlungen erfordern HTTPS und eine angemessene Verwaltung auf der Serverseite.

<form action="/contact" method="post">
  <label for="message">Nachricht</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">Senden</button>
</form>

Der Pfad /contact ist illustrativ; ohne einen Handler kann er einen Fehler zurückgeben. Um GET an das aktuelle Dokument zu versuchen, beginnen Sie mit dem ersten Formular, behalten Sie method="get" bei und entfernen Sie dessen Attribut action. Ein führender Schrägstrich bezieht sich auf die Wurzel der Website und nicht auf einen funktionalen Endpunkt in einer lokalen Datei. Senden Sie keine echten persönlichen Informationen an einen Beispiel-Endpunkt.

Überprüfen Sie die Daten, bevor Sie sie senden

Speichern Sie das vollständige Beispiel unter inspect-form.html. Das Weglassen von action zielt auf das aktuelle Dokument. Eine explizit geschriebene Aktion muss eine gültige, nicht leere URL sein, daher lassen Sie das Attribut weg, anstatt action="" zu schreiben, um die aktuelle Seite zu kennzeichnen.

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Übung zu Formulardaten</title>
</head>
<body>
  <h1>Gesendete Felder überprüfen</h1>
  <form id="inspect-form" method="get">
    <p><label for="query">Gesuchter Begriff</label>
      <input id="query" name="q" value="HTML" required></p>
    <p><label for="limit">Maximale Anzahl der Ergebnisse</label>
      <input id="limit" name="limit" value="5" readonly></p>
    <p><label for="coupon">Coupon nicht verfügbar</label>
      <input id="coupon" name="coupon" value="DEMO" disabled></p>
    <p><label><input type="checkbox" name="news" value="yes" checked> Nachrichten</label></p>
    <button type="submit">Werte in der URL überprüfen</button>
  </form>
</body>
</html>

Nachdem Sie die Datei geöffnet haben, führen Sie diese Zeile in der Konsole der Entwicklertools aus, um die Namen und Werte der aktuellen Felder zu überprüfen. FormData ist eine Programmierschnittstelle des Browsers (API, Application Programming Interface), die eine Liste von Namens-Wert-Paaren aus dem Formular erstellt. Dieser Befehl selbst sendet die Daten nicht über das Netzwerk und löst keine Validierung der Einschränkungen aus.

Array.from(new FormData(document.getElementById("inspect-form")).entries())

[["q", "HTML"], ["limit", "5"], ["news", "yes"]]

Ursprünglich ist das schreibgeschützte limit enthalten und das deaktivierte coupon wird weggelassen. Entfernen Sie das Häkchen bei „Nachrichten“ und der Eintrag verschwindet ebenfalls. Das Löschen des Suchbegriffs ermöglicht es Ihnen weiterhin, einen leeren q-Wert zu prüfen, aber die Schaltfläche zum Absenden löst die erforderliche Validierung aus. Vergleichen Sie die Erstellung der Datenliste mit den interaktiven Überprüfungen bei der Übermittlung.

Auf einer von einem Server bereitgestellten Seite öffnen Sie Netzwerk, senden und prüfen die entsprechende Anfrage. Ein lokales Dokument file:// ist nicht gleichwertig mit einem GET- oder POST-HTTP an einen Server. Ein 404 oder 405 kann das Ziel oder die unterstützte Methode widerspiegeln; das Entfernen von Feldnamen oder Validierungsattributen löst dieses Problem nicht.

Regeln für HTML-Übermittlungsattribute · FormData-Konstruktor auf MDN

Warum könnte ein Feld in den übermittelten Daten fehlen?

Ein deaktiviertes Steuerelement kann nicht geändert werden und wird nicht übermittelt. Wenn Sie möchten, dass ein nicht bearbeitbarer Wert übermittelt wird, prüfen Sie, ob dieser Steuerelementtyp readonly unterstützt. Nur angekreuzte Kontrollkästchen und ausgewählte Optionsfelder steuern ihre Werte bei; deaktivierte Felder werden dabei ausgelassen. Ein Datei-Upload erfordert zusätzliche Formulareinstellungen und serverseitige Verarbeitung; das Hinzufügen eines Datei-Feldes zu diesem Beispiel allein reicht nicht aus. Testen Sie die Einschränkungen, die die Übermittlung in Formularvalidierung mit Pflichtfeld, Länge und Bereichsgrenzen blockieren.

Wenn das Ergebnis unerwartet ist, überprüfen Sie zuerst den name jedes Steuerelements, dann, ob das Steuerelement ausgewählt und nicht deaktiviert ist, und anschließend, ob die URL und die Methode mit dem Server übereinstimmen. Das Netzwerk-Panel eines Browsers kann die Anfrage anzeigen, auch wenn der Server mit einem Fehler antwortet. Eine korrekte Anfrage bedeutet nicht, dass der Server den Wert gespeichert hat. Siehe das Formularreferenzdokument MDN für Details zur Übermittlung.