<input type="hidden"> HTML-Attributwert

Wert

Das value-Attribut des <input>-Elements enthält eine Zeichenkette, die die versteckten Daten enthält, die beim Absenden des Formulars an den Server übermittelt werden sollen. Diese können über die Benutzeroberfläche nicht bearbeitet oder eingesehen werden, obwohl Sie den Wert über die Entwicklerwerkzeuge des Browsers ändern könnten.

Zusätzliche Attribute

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

name

Dies ist eigentlich eines der allgemeinen Attribute, aber es hat eine besondere Bedeutung für versteckte Eingaben. Normalerweise funktioniert das name-Attribut bei versteckten Eingaben genauso wie bei jeder anderen Eingabe. Wenn das Formular jedoch abgesendet wird, wird eine versteckte Eingabe, deren name-Attribut auf _charset_ gesetzt ist, automatisch mit dem Wert gemeldet, der auf die Zeichenkodierung gesetzt ist, die zur Übermittlung des Formulars verwendet wird.

Verwendung von versteckten Eingaben

Wie oben erwähnt, können versteckte Eingaben überall dort 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. Lassen Sie uns einige Beispiele betrachten, die die Verwendung verdeutlichen.

Nachverfolgung bearbeiteter Inhalte

Eine der häufigsten Anwendungen für versteckte Eingaben ist das Nachverfolgen, welcher Datensatz in der Datenbank aktualisiert werden muss, wenn ein Bearbeitungsformular abgesendet wird. Ein typischer Workflow sieht folgendermaßen aus:

1. Der Benutzer entscheidet sich, einen Inhalt zu bearbeiten, über den er Kontrolle hat, zum Beispiel einen Blogbeitrag oder einen Produkteintrag. Er beginnt, indem er die Schaltfläche "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 dem Bearbeiten übermittelt 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 Datensatzes in einem versteckten Eingabefeld aufbewahrt wird. Wenn das Formular in Schritt 3 abgesendet wird, wird die ID automatisch zusammen mit dem Datensatzinhalt zurück an den Server gesendet. Die ID ermöglicht es dem serverseitigen Teil der Site genau zu wissen, welcher Datensatz mit den eingesendeten Daten aktualisiert werden muss.

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

Verbesserung der Website-Sicherheit

Verdeckte Eingaben werden auch verwendet, um Sicherheits-Token oder -geheimnisse zu speichern und zu übermitteln, um die Sicherheit der Website zu erhöhen. Die Grundidee ist, dass, wenn ein Benutzer ein sensibles Formular ausfüllt, zum Beispiel ein Formular auf seiner Banking-Website, um Geld auf ein anderes Konto zu überweisen, ihm ein Geheimnis zur Verfügung gestellt würde, das beweist, dass er derjenige ist, für den er sich ausgibt, und dass er das richtige Formular verwendet, um den Überweisungsauftrag abzusenden.

Dies würde einen böswilligen Benutzer davon abhalten, ein gefälschtes Formular zu erstellen, das vortäuscht, eine Bank zu sein, und das Formular nichtsahnenden Benutzern zuzusenden, um sie dazu zu bringen, Geld an den falschen Ort zu überweisen. Diese Art von Angriff wird als Cross Site Request Forgery (CSRF) bezeichnet; praktisch jeder seriöse serverseitige Rahmen arbeitet mit versteckten Geheimnissen, um solche Angriffe zu verhindern.

Validierung

Verdeckte Eingaben nehmen nicht an der Constraint-Validierung teil; sie haben keinen echten zu beschränkenden Wert.

Beispiele

Lassen Sie uns betrachten, wie wir eine Version des oben beschriebenen Bearbeitungsformulars implementieren könnten (siehe Nachverfolgung bearbeiteter Inhalte), indem wir eine versteckte Eingabe verwenden, um die ID des bearbeiteten Datensatzes zu speichern.

Das HTML des Bearbeitungsformulars könnte etwa 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>

Fügen wir auch etwas CSS hinzu:

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 setzen, bevor er das Formular an den Browser des Benutzers sendet, und diese Information verwenden, wenn das Formular zurückgesendet wird, um zu wissen, welcher Datenbankeintrag mit den geänderten Informationen aktualisiert werden soll. Im Inhalt ist kein Skript erforderlich, um dies zu handhaben.

Die Ausgabe sieht so aus:

Beim Absenden sieht die an den Server gesendete Formulardaten ungefähr so aus:

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

Obwohl die versteckte Eingabe überhaupt nicht gesehen werden kann, werden ihre Daten dennoch übermittelt.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Leitfaden zu HTML-Formularen
• <input> und die darauf basierende HTMLInputElement-Schnittstelle