CSS

Ausgewählte Formularfelder in einer anderen Farbe anzeigen

Details

Veröffentlicht am Sonntag, 19. Oktober 2008 19:41

Geschrieben von Jan Pionzewski

Um die Übersicht in Ihren Formularen zu erhöhen, könnten mit CSS und ein wenig JavaScript bereits ausgewählte Eingabefelder in einer anderen Farbe dargestellt werden, als noch nicht angewählte Felder.

Beispiel:

<form>
   Name: <input name="Name" onFocus="this.style.background='lightgray';" size="25" style="background: white;" type="text"><br>
   Straße: <input name="Strasse" onFocus="this.style.background='lightgray';" size="25" style="background: white;" type="text"><br>
   PLZ / Ort: <input name="PLZ" onFocus="this.style.background='lightgray';" size="5" style="background: white;" type="text">
<input name="Ort" onFocus="this.style.background='lightgray';" size="15" style="background: white;" type="text"><br>
   <input name="Absenden" type="submit">
</form>

Erläuterung:
Beim ersten Aufrufen der Seite werden die Formularfelder weiß dargestellt. Klickt man nun in eines der Formularfelder, so ändert sich die Farbe zu hellgrau.