<input type="hidden"> HTML-Attributwert

Wert

Das Attribut value des <input>-Elements enthält eine Zeichenkette, die die versteckten Daten enthält, die Sie beim Absenden des Formulars an den Server übermitteln möchten. Diese können vom Benutzer über die Benutzeroberfläche nicht bearbeitet oder gesehen werden, obwohl Sie den Wert über die Entwicklertools des Browsers bearbeiten könnten.

Zusätzliche Attribute

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

name

Dies ist tatsächlich 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 jedoch das Formular übermittelt wird, wird eine verborgene Eingabe, deren name auf _charset_ gesetzt ist, automatisch mit dem Wert des Zeichencodierungsschemas übermittelt, das zur Übermittlung des Formulars verwendet wurde.

Verwendung versteckter 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, wenn das Formular an den Server übermittelt wird. Sehen wir uns einige Beispiele an, die die Verwendung veranschaulichen.

Nachverfolgung bearbeiteter Inhalte

Eine der häufigsten Verwendungen für versteckte Eingaben besteht darin, nachzuverfolgen, welcher Datenbankeintrag aktualisiert werden muss, wenn ein Bearbeitungsformular übermittelt wird. Ein typischer Ablauf sieht so aus:

1. Der Benutzer entscheidet sich, Inhalte zu bearbeiten, über die er Kontrolle hat, wie z.B. einen Blogbeitrag oder einen Produkteintrag. Er beginnt, indem er den Bearbeitungsknopf 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 ü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 hier ist, dass während Schritt 2 die ID des aktualisierten Eintrags in einer verborgenen Eingabe gespeichert wird. Wenn das Formular in Schritt 3 übermittelt wird, wird die ID automatisch mit dem Inhalte des Eintrags an den Server gesendet. Die ID ermöglicht es der serverseitigen Komponente der Seite genau zu wissen, welcher Eintrag mit den übermittelten Daten aktualisiert werden muss.

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

Verbesserung der Sicherheit von Websites

Verdeckte Eingaben werden auch verwendet, um Sicherheitstoken oder Secrets zu speichern und zu übermitteln, um die Sicherheit von Websites zu verbessern. Die Grundidee ist, dass, wenn ein Benutzer ein empfindliches Formular ausfüllt, wie z.B. ein Formular auf seiner Bankwebsite, um Geld auf ein anderes Konto zu überweisen, das Secret, mit dem er arbeiten würde, beweisen würde, dass er derjenige ist, für den er sich ausgibt, und dass er das richtige Formular benutzt, um die Überweisungsanfrage zu übermitteln.

Dies würde einen bösartigen Benutzer davon abhalten, ein gefälschtes Formular zu erstellen, das vorgibt, eine Bank zu sein, und das Formular an nichtsahnende Benutzer zu senden, um sie zu überlisten, Geld an die falsche Stelle zu überweisen. Diese Art von Angriff wird als Cross Site Request Forgery (CSRF) bezeichnet; fast jedes seriöse serverseitige Framework verwendet verborgene Secrets, um solche Angriffe zu verhindern.

Validierung

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

Beispiele

Sehen wir uns an, wie wir eine Version des Bearbeitungsformulars implementieren könnten, das wir zuvor beschrieben haben (siehe Nachverfolgung bearbeiteter Inhalte), indem wir eine versteckte Eingabe verwenden, um die ID des bearbeiteten Eintrags zu speichern.

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

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 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 modifizierten Informationen aktualisiert werden muss. Kein Skripting ist erforderlich, um dies im Inhalt zu handhaben.

Die Ausgabe sieht so aus:

Beim Absenden sieht die an den Server gesendete Formulardaten in 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

Obwohl die versteckte Eingabe überhaupt nicht zu sehen ist, werden ihre Daten dennoch übermittelt.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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