HTML/Tutorials/Formulare/Versteckte Elemente

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie können Felder in einem Formular definieren, die dem Anwender nicht angezeigt werden. Versteckte Felder können Daten enthalten. Beim Absenden des Formulars werden die Daten versteckter Felder mit übertragen. Auf diese Weise können Sie beispielsweise zusätzliche Informationen an das verarbeitende Script übergeben.

Auch für JavaScript ist diese Möglichkeit interessant. Da ein JavaScript Formularfelder problemlos auslesen und deren Werte auch ändern kann, ist es auf diese Weise bequem möglich, Daten zu speichern, die nicht am Bildschirm angezeigt werden. So könnte ein JavaScript beispielsweise, nachdem die Seite mit dem Formular beim Anwender geladen ist, Informationen zum verwendeten Browser beim Anwender sammeln und das Ergebnis in ein verstecktes Formularfeld schreiben. Die Daten werden dann, wenn der Anwender das Formular abschickt, mit übertragen.

Das Attribut type="hidden" verhindert die Anzeige des Input-Feldes, die Daten werden durch das value-Attribut festgelegt.

Beispiel
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Versteckte Elemente</title> </head> <body> <h1>Feedback</h1> <form name="Feedback" action="input_hidden.htm"> <p> <input type="hidden" name="UserBrowser" value=""> Ihr Kommentar:<br> <textarea name="UserKommentar" rows="2" cols="20"></textarea><br> <input type="submit" value="senden"><br> </p> <script type="text/javascript"> document.Feedback.UserBrowser.value = navigator.appName; </script> </form> </body> </html>

Das versteckte Formularfeld enthält zunächst keine Daten (value=""). Innerhalb des Formulars ist jedoch ein JavaScript notiert, das den Browser, den der Anwender verwendet, ermittelt und diesen Wert in das Formular einträgt. Wenn der Anwender das Formular absendet, wird also der verwendete Browser als Formularinhalt mit übertragen. Das Ergebnis wird in der Adresszeile sichtbar.


Auf den JavaScript-Code wird hier nicht weiter eingegangen, eine Beschreibung finden Sie in der JavaScript-Dokumentation, beziehungsweise in der Referenz zum forms-Objekt. Wichtig hier ist die Tatsache, dass das Script nicht im head-Bereich notiert ist, weil es erst auf die Formular-Elemente zugreifen kann, nachdem es geladen wurde.


Siehe auch