<input type="hidden">
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<input>
-Elemente vom Typ hidden
ermöglichen es Webentwicklern, Daten einzuschließen, die beim Absenden eines Formulars nicht von den Benutzern gesehen oder geändert werden können. Zum Beispiel die ID des Inhalts, der gerade bestellt oder bearbeitet wird, oder ein einzigartiges Sicherheitstoken. Versteckte Eingaben sind auf der gerenderten Seite völlig unsichtbar, und es gibt keine Möglichkeit, sie im Seiteninhalt sichtbar zu machen.
Wert
Das value
-Attribut des <input>
-Elements enthält einen String, der die versteckten Daten enthält, die Sie beim Absenden des Formulars zum Server einschließen möchten. Diese können über die Benutzeroberfläche weder bearbeitet noch gesehen werden, obwohl Sie den Wert über die Entwicklerwerkzeuge des Browsers bearbeiten könnten.
Warnung:
Obwohl der Wert nicht für den Benutzer im Seiteninhalt angezeigt wird, ist er sichtbar und kann mit den Entwicklerwerkzeugen oder der „Seitenquelltext anzeigen“-Funktionalität eines jeden Browsers bearbeitet werden. Verlassen Sie sich nicht auf hidden
Eingaben als eine Form der Sicherheit.
Zusätzliche Attribute
Zusätzlich zu den gemeinsamen Attributen aller <input>
-Elemente bieten hidden
Eingaben die folgenden Attribute.
name
Dies ist eigentlich eines der gemeinsamen Attribute, hat aber eine spezielle 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
auf _charset_
gesetzt ist, automatisch mit dem für die Übermittlung des Formulars verwendeten Zeichensatz gemeldet.
Verwendung von versteckten Eingaben
Wie oben erwähnt, können versteckte Eingaben überall dort verwendet werden, wo Sie Daten einfügen möchten, die der Benutzer nicht sehen oder bearbeiten kann, wenn das Formular zum Server gesendet wird. Schauen wir uns einige Beispiele an, die ihre Verwendung veranschaulichen.
Verfolgung bearbeiteter Inhalte
Eine der häufigsten Anwendungen für versteckte Eingaben besteht darin, festzuhalten, welcher Datenbankeintrag aktualisiert werden muss, wenn ein Bearbeitungsformular gesendet wird. Ein typischer Workflow sieht so aus:
- Der Benutzer beschließt, einige Inhalte zu bearbeiten, über die er die Kontrolle hat, wie z.B. einen Blogbeitrag oder einen Produkteintrag. Er beginnt, indem er auf die Schaltfläche "Bearbeiten" drückt.
- Der zu bearbeitende Inhalt wird aus der Datenbank entnommen und in ein HTML-Formular geladen, damit der Benutzer Änderungen vornehmen kann.
- Nach der Bearbeitung sendet der Benutzer das Formular ab, 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 gesendet wird, wird die ID automatisch zusammen mit dem Inhalt des Eintrags an den Server gesendet. Die ID lässt die serverseitige Komponente der Website genau erkennen, welcher Eintrag mit den übermittelten Daten aktualisiert werden muss.
Ein vollständiges Beispiel, wie dies aussehen könnte, finden Sie im Abschnitt Beispiele unten.
Verbesserung der Website-Sicherheit
Versteckte Eingaben werden auch verwendet, um Sicherheitstoken oder Geheimnisse zu speichern und zu übermitteln, um die Sicherheit einer Website zu verbessern. Die Grundidee ist, dass, wenn ein Benutzer ein sensibles Formular ausfüllt, wie ein Formular auf einer Bank-Website, um Geld auf ein anderes Konto zu überweisen, das Geheimnis, das ihm zur Verfügung gestellt wird, beweisen würde, dass er derjenige ist, für den er sich ausgibt, und dass er das richtige Formular verwendet, um die Überweisungsanforderung zu senden.
Dies würde einen böswilligen Benutzer daran hindern, ein gefälschtes Formular zu erstellen, das vorgibt, eine Bank zu sein, und das Formular an ahnungslose Benutzer zu senden, 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 jedes seriöse serverseitige Framework verwendet versteckte Geheimnisse, um solche Angriffe zu verhindern.
Hinweis: Das Platzieren des Geheimnisses in einer versteckten Eingabe macht es nicht von Natur aus sicher. Die Zusammensetzung und Kodierung des Schlüssels würde das bewirken. Der Wert der versteckten Eingabe besteht darin, das Geheimnis mit den Daten zu verknüpfen und es automatisch einzuschließen, wenn das Formular an den Server gesendet wird. Sie müssen gut gestaltete Geheimnisse verwenden, um Ihre Website tatsächlich zu sichern.
Validierung
Versteckte Eingaben nehmen nicht an der Einschränkungsvalidierung teil; sie haben keinen echten Wert, der eingeschränkt werden könnte.
Beispiele
Schauen wir uns an, wie wir eine Version des zuvor beschriebenen Bearbeitungsformulars implementieren könnten (siehe Verfolgung bearbeiteter Inhalte), indem wir eine versteckte Eingabe verwenden, um uns die ID des bearbeiteten Eintrags zu merken.
Das HTML des Bearbeitungsformulars könnte 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 das Formular an den Browser des Benutzers gesendet wird, und würde diese Informationen verwenden, wenn das Formular zurückgesendet wird, um zu wissen, welchen Datenbankeintrag mit geänderten Informationen aktualisiert werden soll. Es ist kein Skripting zum Umgang mit diesem Inhalt erforderlich.
Die Ausgabe sieht so aus:
Hinweis: Sie können das Beispiel auch auf GitHub finden (sehen Sie sich den Quellcode an und sehen Sie es live in Aktion).
Beim Absenden wird die Formulardaten wie folgt an den Server gesendet:
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 zu sehen ist, wird ihre Daten dennoch gesendet.
Technische Zusammenfassung
Wert | Ein String, der den Wert der versteckten Daten darstellt, die Sie an den Server senden möchten. |
Events | Keine. |
Unterstützte gemeinsame Attribute | autocomplete |
IDL-Attribute | value |
DOM-Schnittstelle | [`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement) |
Methoden | Keine. |
Implizite ARIA-Rolle | keine entsprechende Rolle |
Spezifikationen
Specification |
---|
HTML # hidden-state-(type=hidden) |
Browser-Kompatibilität
Siehe auch
- HTML-Formulare Leitfaden
<input>
und dieHTMLInputElement
Schnittstelle, auf der es basiert.