Hilfreiches Formular, optisch aufgewertet

(Durchschnitt: 0,00 von 5 – 0 Stimme(n)) - Fehler: Nicht angemeldet!

Nur noch bis morgen: Mit Amazon Pay zahlen und 5 EUR Amazon Gutschein sichern!

Mit CSS, den Cascading Style Sheets, lässt sich dem Besucher helfen, und das angeklickte Eingabefeld optisch hervorheben. Der Internet Explorer 6 kommt damit aber nicht zurecht, er braucht etwas Javascript für den gleichen Effekt.

Mozilla und Opera verstehen die CSS Eigenschaften hover und focus nämlich nicht mehr nur ausschließlich bei Links, auch bei Formularen können diese hier genutzt werden. Wird per Style-Definition das Input-Feld optisch etwas verschönert, lässt sich auch gleich das Aussehen bei Mausberührung (hover) und Aktivierung (focus) definieren:


<html><head>
<style type="text/css">
input {
	border: 1px solid black;
	background-color: #A5A2A2;
	margin: 5px;
	padding: 2px 2px 2px 5px;
	vertical-align: top;
}

input:focus { background-color: #E3E3E3; }
input:hover { background-color: #E3E3E3; }
</style>
</head>
<body>
<input type="text" name="Name">

Mozilla und neue Opera-Browser kommen damit klar und ändern die Input-Feld-Farbe von dunkelgrau nach hellgau. Der IE 6 hinkt hier hinterher und versteht diese Anweisung nur in Bezug auf Hyperlinks. Ein einfacher Farbwehsel ist aber nichts neues, mit den Style-Anweisungen ließe sich zum Beispiel das aktuelle Eingabefeld oder dessen Schrift vergrößern. So fällt es nicht nur besonders auf, es hilft gerade kurzsichtigen Besuchern gut weiter. Damit der Internet Explorer also auch bei Klick auf das Feld die Farbe wechselt und der Besucher das aktive Feld deutlich unterscheiden kann, braucht es die Javascript Events onclick und onblur.

<input type="text" name="Name" 
onclick="this.style.background='#E3E3E3';"
onblur="this.style.background='#A5A2A2';">

Der erste ändert die Farbe bei Aktivierung des Feldes in helleres grau, der zweite sorgt dafür dass alles rückgängig gemacht wird, wenn das nächste Feld angeklickt wird. Um auch den Hover-Befehl zu simulieren, lässt sich mit “onmouseover” und “onmouseout” dem Feld eine weitere Farbe zuweisen.

Fragen zu diesem Tipp? In unserem Webmaster-Forum helfen wir weiter!

Das könnte Sie auch interessieren:

» Top Tipps: Diese Tipps sind heute beliebt

Irfanview auf deutsch (97x gelesen)
Malwarebytes Anleitung (91x gelesen)
169.254.1.1: So geht's zur Fritzbox! (88x gelesen)
Irfanview: Tipps & Tricks! (85x gelesen)
Windows Zwischenablage öffnen und gespeicherte Daten ansehen (62x gelesen)

Passende Wörter im Lexikon:

Opera
Opera ist ein für viele Plattformen kostenlos erhältliche Software des norwegischen Unternehmen Opera Software ASA. Sie beinhaltet sowohl einen Browser als auch...

Operating System
Englischer Begriff für Betriebssystem. Siehe auch Betriebssystem....

Javascript
JavaScript ist eine weit verbreitete Skriptsprache, die ursprünglich von Netscape für das DOM-Scripting für Webseiten entwickelt wurde. Sie hat sich seitde...

Mehr Tipps zu Hilfreiches Formular, optisch aufgewertet

Map of the Dead: Hier bist Du wirklich sicher!
Ein schrecklicher Virus bricht aus und verwandelt die meisten Nachbarn, Freunde und Arbeitskoll...

Ähnliche Fragen:

Tipps-Rubriken