HTML Hidden Input: Formularwerte, JavaScript-Änderungen und Sicherheitsgrenzen

HTML-Referenz

Erstellt 2026-10-30 Zuletzt geändert 2026-10-30

input type="hidden" enthält einen Namen und einen Wert in einem Formular, ohne ein Eingabefeld anzuzeigen. name ist der übermittelte Feldname und value ist dessen Wert. Benutzer können dies einsehen oder ändern, daher sollte es nicht zum Schutz von Passwörtern, Berechtigungen, Preisen oder anderen sensiblen Entscheidungen verwendet werden.

Wann sollten Sie versteckte Eingabefelder verwenden?

Verwenden Sie es, um die Zielbeitrags-ID mit einem Bearbeitungsformular zu senden oder Suchbedingungen in die nächste Anfrage zu übernehmen. Es übermittelt Werte, die der Benutzer nicht eingeben muss, während der Server weiterhin dafür verantwortlich bleibt, zu entscheiden, ob sie gültig sind.

Der Empfang einer Beitrags-ID gewährt keine Berechtigung zur Bearbeitung dieses Beitrags. Der Server muss den Benutzer über die authentifizierte Sitzung identifizieren und den Zugriff auf den Beitrag überprüfen. Vertrauen Sie nicht ausschließlich auf Kontodetails oder Client-IP-Informationen, nur weil der Client sie in versteckten Feldern gesendet hat.

Typ	Verhalten auf dem Bildschirm	Formulardaten
`type="hidden"`	Es gibt keine Eingabe-Benutzeroberfläche, und es erhält keinen Fokus.	Eingeschlossen, wenn benannt und nicht deaktiviert.
`disabled`	Deaktiviert die Steuerung.	Ausgeschlossen.
Gewöhnliche Eingabe, die mit CSS display: none verborgen ist	CSS verbirgt die gewöhnliche Eingabe aus dem Layout.	Allein durch CSS-Verbergung wird sie nicht von der Übermittlung ausgeschlossen.

id kann ein Element in einem Skript finden, ersetzt jedoch nicht seinen übermittelten Namen. Eine verborgene Eingabe ohne Namen wird bei der gewöhnlichen Formularübermittlung nicht als Name/Wert-Eintrag eingeschlossen. Auch mit required nehmen verborgene Eingaben nicht an der Validierung der Browser-Bedingungen teil.

Überprüfen Sie, dass unsichtbare Werte übermittelt werden

Speichern Sie diesen vollständigen Code als hidden.html und öffnen Sie ihn in einem Browser. Es wird kein Server benötigt. Die Übermittlung zeigt die Name/Wert-Einträge, die mit FormData erstellt wurden, an, anstatt eine Netzwerk-Anfrage zu machen.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Versteckte Werte prüfen</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin: 12px 0; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Farben auswählen</h1>
  <form id="demo">
    <label><input type="checkbox" name="color" value="blue" checked> Blau</label>
    <label><input type="checkbox" name="color" value="red"> Rot</label>
    <input type="hidden" id="size" name="size" value="big">
    <input type="hidden" name="excluded" value="not-sent" disabled>
    <button type="submit">Formularwerte anzeigen</button>
    <button type="button" id="change">Versteckten Wert auf small ändern</button>
    <button type="button" id="restore">Versteckten Wert auf big zurücksetzen</button>
  </form>
  <p id="status" aria-live="polite">Der anfängliche versteckte Wert ist big.</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const size = document.querySelector('#size');
    const result = document.querySelector('#result');
    const status = document.querySelector('#status');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    function setSize(value) {
      size.value = value;
      status.textContent = `Aktueller versteckter Wert: ${value}. Zeigen Sie die Formularwerte erneut an.`;
    }
    document.querySelector('#change').addEventListener('click', () => setSize('small'));
    document.querySelector('#restore').addEventListener('click', () => setSize('big'));
  </script>
</body>
</html>

Initial einreichen: color=blue und size=big erscheinen. Es gibt kein sichtbares Größenfeld, aber sein Wert wird berücksichtigt. excluded wird ausgelassen, da es deaktiviert ist.
Wählen Sie Rot aus und senden Sie erneut, um Blau und Rot unter dem wiederholten Farbnamen zu erhalten. Beide Kontrollkästchen löschen und nur die Größe bleibt.
Drücken Sie die Schaltfläche, die den versteckten Wert auf small ändert, und senden Sie erneut: size=small erscheint. Versteckte Werte können auch über JavaScript geändert werden.
Stellen Sie mit der Wiederherstellungsschaltfläche big wieder her und senden Sie erneut. Die Änderungsschaltfläche dient der Beobachtung dieses Beispiels und ist nicht für jeden realen Dienst erforderlich.

Senden Sie das Formular an einen echten Server

Für einen echten Dienst setzen Sie die Aktion auf eine bestehende Verarbeitungsroute und wählen eine unterstützte Methode wie method="post". Der Einreichungs-Handler des Beispiels blockiert Anfragen; entfernen Sie ihn oder ersetzen Sie ihn durch serveranfragebasierten Code, um Daten zu senden. Server-Formularverarbeitungsfunktionen empfangen versteckte Felder wie gewöhnliche Textfelder.

Beim Empfangen mehrerer Kontrollkästchen mit demselben Namen überprüfen Sie die Array- und Mehrfachwertregeln des Server-Frameworks. Einige Parser lesen nur den letzten wiederholten Wert. Die JavaScript-Ausgabe behält wiederholte Namen bei, sodass Sie den Unterschied beobachten können.

Verwechseln Sie Verbergen nicht mit Sicherheit

Versteckte Werte sind im HTML-Quelltext, in den Entwicklertools und in Netzwerkrequests sichtbar. HTTPS verbirgt den Wert nicht vor dem Benutzer, der ihn sendet. Beim Empfangen einer Produkt-ID sollten Sie das Produkt und den Preis auf dem Server nachschlagen und zulässige Größenwerte anhand vertrauenswürdiger Serverinformationen validieren.

Ein verstecktes Feld kann ein CSRF-Token (Cross-Site Request Forgery) enthalten. Der Schutz ergibt sich aus der ordnungsgemäßen serverseitigen Ausgabe und Validierung des Tokens. Das Einfügen eines beliebigen festen Strings in ein verstecktes Eingabefeld verhindert nicht automatisch gefälschte Anfragen.

Die MDN Referenz für versteckte Eingaben erklärt ihr Verhalten und warum sie von der Validierung ausgeschlossen sind.

HTML-Referenz