<input type="hidden">

Das value -Attribut des <input>-Elements enthält eine Zeichenkette mit den versteckten Daten, die Sie einschließen möchten, wenn das Formular an den Server gesendet wird. Dieser Wert kann vom Benutzer nicht über die Benutzeroberfläche bearbeitet oder gesehen werden, obwohl Sie den Wert über Entwicklerwerkzeuge des Browsers bearbeiten könnten.

Zusätzlich zu den Attributen, die allen <input>-Elementen gemeinsam sind, bieten hidden Eingaben die folgenden Attribute.

Dies ist eigentlich eines der gemeinsamen Attribute, hat jedoch eine spezielle Bedeutung für versteckte Eingaben. Normalerweise funktioniert das name Attribut bei versteckten Eingaben, genau wie bei jeder anderen Eingabe. Wenn das Formular jedoch gesendet wird, wird eine versteckte Eingabe, deren name auf _charset_ gesetzt ist, automatisch mit dem Wert der zur Übermittlung des Formulars verwendeten Zeichenkodierung gemeldet.

Wie oben erwähnt, können versteckte Eingaben überall verwendet werden, wo Sie Daten einschließen möchten, die der Benutzer nicht sehen oder bearbeiten kann, zusammen mit dem Formular, wenn es an den Server gesendet wird. Schauen wir uns einige Beispiele an, die ihre Verwendung veranschaulichen.

Eine der häufigsten Anwendungen für versteckte Eingaben ist die Verfolgung, welcher Datenbankeintrag aktualisiert werden muss, wenn ein Bearbeitungsformular gesendet wird. Ein typischer Arbeitsablauf sieht etwa so aus:

1. Der Benutzer entscheidet sich, Inhalte zu bearbeiten, über die er Kontrolle hat, wie einen Blog-Eintrag oder einen Produkteintrag. Er beginnt, indem er die Schaltfläche zum Bearbeiten drückt.
2. Der zu bearbeitende Inhalt wird aus der Datenbank entnommen und in ein HTML-Formular geladen, damit der Benutzer Änderungen vornehmen kann.
3. Nach der Bearbeitung sendet der Benutzer das Formular, und die aktualisierten Daten werden zurück an den Server gesendet, um in der Datenbank aktualisiert zu werden.

Die Idee hierbei ist, dass während Schritt 2 die ID des aktualisierten Eintrags in einer versteckten Eingabe aufbewahrt wird. Wenn das Formular in Schritt 3 übermittelt wird, wird die ID automatisch zusammen mit dem Inhalt des Eintrags an den Server zurückgesendet. Die ID zeigt der serverseitigen Komponente der Website genau, welcher Eintrag mit den übermittelten Daten aktualisiert werden muss.

Ein vollständiges Beispiel, wie dies aussehen könnte, finden Sie im Abschnitt Beispiele unten.

Versteckte Eingaben werden auch verwendet, um Sicherheitstoken oder Geheimnisse zu speichern und zu übermitteln, um die Sicherheit einer Website zu verbessern. Die grundlegende Idee ist, dass wenn ein Benutzer ein sensibles Formular ausfüllt, wie z.B. ein Formular auf seiner Bank-Website, um Geld auf ein anderes Konto zu überweisen, das Geheimnis, das ihm zur Verfügung gestellt wird, beweist, dass er tatsächlich der ist, der er vorgibt zu sein, und dass er das richtige Formular verwendet, um die Überweisungsanfrage einzureichen.

Dies würde einen böswilligen Benutzer davon abhalten, ein gefälschtes Formular zu erstellen, das vorgibt, eine Bank zu sein, und das Formular an ahnungslose Benutzer zu senden, um sie zu täuschen, damit sie Geld an den falschen Ort überweisen. Diese Art von Angriff wird als Cross Site Request Forgery (CSRF) bezeichnet; praktisch jedes seriöse serverseitige Framework verwendet versteckte Geheimnisse, um solche Angriffe zu verhindern.

Versteckte Eingaben nehmen nicht an Constraint-Validierungen teil; sie haben keinen echten Wert, der eingeschränkt werden könnte.

Schauen wir uns an, wie wir eine Version des zuvor beschriebenen Bearbeitungsformulars (siehe Verfolgung bearbeiteter Inhalte) implementieren könnten, indem wir eine versteckte Eingabe verwenden, um die ID des bearbeiteten Eintrags zu speichern.

Das HTML des Bearbeitungsformulars könnte ungefähr so aussehen:

<form>
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" value="My excellent blog post" />
  </div>
  <div>
    <label for="content">Post content:</label>
    <textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea>
  </div>
  <div>
    <button type="submit">Update post</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657" />
</form>

Lassen Sie uns auch etwas CSS hinzufügen:

html {
  font-family: sans-serif;
}

form {
  width: 500px;
}

div {
  display: flex;
  margin-bottom: 10px;
}

label {
  flex: 2;
  line-height: 2;
  text-align: right;
  padding-right: 20px;
}

input,
textarea {
  flex: 7;
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 5px;
}

textarea {
  height: 60px;
}

Der Server würde den Wert der versteckten Eingabe mit der ID postID auf die ID des Beitrags in seiner Datenbank einstellen, bevor er das Formular an den Browser des Benutzers sendet, und diese Informationen verwenden, wenn das Formular zurückgesendet wird, um zu wissen, welcher Datenbankeintrag mit den geänderten Informationen aktualisiert werden soll. Es ist kein Skripting im Inhalt erforderlich, um dies zu handhaben.

Die Ausgabe sieht so aus:

Wenn es gesendet wird, sieht die an den Server gesendete Formulardaten etwa so aus:

title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657

Auch wenn die versteckte Eingabe überhaupt nicht sichtbar ist, werden ihre Daten dennoch übermittelt.

• HTML Forms Leitfaden
• <input> und die HTMLInputElement-Schnittstelle, auf der es basiert.