<input type="hidden"> HTML-Attributwert

Wert

Das Attribut value des <input>-Elements enthält eine Zeichenfolge, die die versteckten Daten enthält, die Sie beim Absenden des Formulars an den Server übermitteln möchten. Dieser Wert wird dem Benutzer über die Benutzeroberfläche nicht angezeigt.

Zusätzliche Attribute

Zusätzlich zu den gemeinsamen Attributen aller <input>-Elemente bieten hidden Eingaben die folgenden Attribute.

name

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

Verwendung von versteckten Eingaben

Wie bereits erwähnt, können verborgene Eingaben überall dort verwendet werden, wo Sie Daten einfügen möchten, die der Benutzer nicht sehen kann, wenn sie zusammen mit dem Formular an den Server übermittelt werden. Lassen Sie uns einige Beispiele ansehen, die ihre Verwendung veranschaulichen.

Nachverfolgung bearbeiteter Inhalte

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

1. Der Benutzer entscheidet sich, Inhalte zu bearbeiten, über die er die Kontrolle hat, wie z.B. einen Blogbeitrag oder einen Produkteintrag. Er beginnt, indem er die Bearbeitungstaste 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 ab, 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 zu aktualisierenden Datensatzes in einer versteckten Eingabe gehalten wird. Wenn das Formular in Schritt 3 übermittelt wird, wird die ID automatisch mit dem Datensatzinhalt zurück an den Server gesendet. Die ID informiert die Server-Komponente der Website genau darüber, welcher Datensatz 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 Website-Sicherheit

Ein häufiger Gebrauch von versteckten Eingabefeldern ist das Speichern von Cross-Site Request Forgery (CSRF) Tokens, die helfen, Websites vor CSRF-Angriffen zu schützen.

Validierung

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

Beispiele

Verwendung einer versteckten Datensatz-ID

Lassen Sie uns ansehen, wie wir eine Version des bearbeiteten Formulars implementieren könnten, das wir zuvor beschrieben haben (siehe Nachverfolgung bearbeiteter Inhalte), indem wir eine versteckte Eingabe verwenden, um die ID des bearbeiteten Datensatzes zu merken.

HTML

Das HTML des Bearbeitungsformulars sieht folgendermaßen aus:

<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>

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;
}

const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault();
});

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 würde diese Informationen verwenden, wenn das Formular zurückgesendet wird, um zu wissen, welcher Datenbankeintrag mit den geänderten Informationen aktualisiert werden soll. Kein Skript ist im Inhalt erforderlich, um dies zu handhaben.

Ergebnis

Wenn das Formular übermittelt wird, sehen die an den Server gesendeten 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

Obwohl die versteckte Eingabe im Formular nicht sichtbar 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