Ausgrauen und Nurlesen von Formularfeldern

HTML5-Handbuch » Formulare und Interaktion » Eingabekontrolle und Eingabehilfe » Ausgrauen und Nurlesen von Formularfeldern

Sie können erzwingen, dass ein Eingabefeld kein Eingabefeld mehr ist, sondern eigentlich nur ein Ausgabefeld, und ein Eingabebereich nur ein Ausgabebereich. Das kann beispielsweise interessant sein, wenn Sie JavaScript-ermittelte Werte in einem Formularfeld anzeigen möchten, oder wenn Sie Felder mit einem Wert vorbelegen möchten, den der Anwender aber nicht ändern können soll.

Ferner können Sie Elemente ausgrauen, um zu signalisieren, dass das Element im aktuellen Zusammenhang ohne Bedeutung ist. Sinnvoll ist das Ausgrauen allerdings vor allem als HTML-Grundlage für Script-Sprachen, die Elemente je nach Eingaben oder Auswahl in anderen Elementen dynamisch ausgrauen. So wäre es beispielsweise sinnvoll, Angaben zum Typ des gefahrenen Autos dynamisch auszugrauen, wenn der Anwender ankreuzt, dass er gar kein Auto besitzt.

Beispiel

<form method="post" action="rechnung.php">
<p><label>Nettobetrag:<br>
<input type="number" name="nettobetrag" size="10"></label><br>
<label>MwSt:<br>
<input type="number" name="mwst" size="2" value="19" readonly>%</label>
<br><label>
<input type="checkbox" name="mwst-befreit" disabled> MwSt.-befreit
</label></p>
</form>
</body>

Erläuterung

Mit dem Standalone-Attribut readonly können Sie ein Eingabefeld auf „nur lesen“ setzen. Anwendbar ist das Attribut sowohl auf einzeilige als auch auf mehrzeilige Eingabefelder. Sinnvoll ist diese Angabe, wenn ein Feldwert zwar als Formulardatum übertragen werden soll, und wenn der Anwender den Wert auch sehen, aber nicht ändern können soll. Im obigen Beispiel ist das Feld mit dem Mehrwertsteuersatz entsprechend gekennzeichnet.

Mit dem Standalone-Attribut disabled grauen Sie ein Element aus. Erlaubt ist das Attribut in den Formular-Tags in allen Formularfeldtypen, also bei Eingabefeldern, Auswahllisten, Schaltflächen, Radiobuttons, Checkboxen usw. Das Element ist nicht editierbar bzw. nicht anklickbar, und es wird in irgendeiner Form blasser dargestellt, um zu signalisieren, dass es nicht bearbeitbar ist. Im obigen Beispiel ist die Checkbox auf diese Weise gekennzeichnet.