Normale Input Felder sehen standardmäßig doch eher bescheiden aus und ein Rahmen (border) oder eine Hintergrundfarbe (background) ändern oftmals nichts an der Tatsache.
Was jedoch wirkt, sind mit CSS formatierte Hintergrundbilder (background-image).
Wir nehmen also unsere CSS Datei und formatieren unsere Input-Felder folgendermaßen:
input {
background: #fff url(img/input.jpg) no-repeat bottom right;
width:149px;
height:19px;
padding-left:10px;
padding-top:3px;
border:none;
}
Wichtig dabei ist, dass unserer background-image die Position “bottom right” hat.
Im IE würde es sonst das Hintergrundbild bei einer längeren Eingabe erst verschieben und dann ganz verschwinden lassen.
Ein wenig padding sorgt dafür, dass der eingegebene Text nicht ganz vorne beginnt.
Wenn nicht alle Input Felder formatiert werden sollen dann müsste statt dem “input” in der CSS eine Klasse formatiert und im Formular dann jeweils zugeordnet werden.
Also z.B.:
.input-feld {
background: #fff url(img/input.jpg) no-repeat bottom right;
width:149px;
height:19px;
padding-left:10px;
padding-top:3px;
border:none;
}
und im Formular dann:
<input name=”name” type=”text” />
Als nächstes möchten wir den Benutzer bei einer Falscheingabe im Formular mit einem wechselnden background-image darauf hinweisen, wo er einen Fehler gemacht hat und ggf. auch jene Input Felder markieren, wo die Eingabe bis dato korrekt ist.
Hierfür benötigen wir nun folgenden Javascript Codesnipsel, der im <head> Bereich eingefügt wird:
<script type=”text/javascript”>
function checkForm()
{
var error = new Array();
if(document.data.name.value == “”)
{
document.data.name.focus();
document.data.name.style.background = “url(img/input-error.jpg) no-repeat bottom right”;
error[0] = 1;
}
else
{
document.data.name.style.background = “url(img/input-ok.jpg) no-repeat bottom right”;
}
if(document.data.ort.value == “”)
{
document.data.ort.focus();
document.data.ort.style.background = “url(img/input-error.jpg) no-repeat bottom right”;
error[0] = 1;
}
else
{
document.data.ort.style.background = “url(img/input-ok.jpg) no-repeat bottom right”;
}
for (i=0; i <= 8; i++)
{
if (error[i] == 1)
{
alert(”Bitte korrigieren/vervollstaenidgen Sie die Daten in den ROT markierten Feldern!”);
return false;
}
}
}
</script>
Wenn das Input Feld “name” nicht eingetragen wurde, dann wird jetzt anstatt das in der CSS angegebene background-image “input.jpg” unser neues mit dem Namen “input-error.jpg” geladen und zusätzlich ein Popup mit dem Hinweis, dass die Rot markierten Felder fehlerhaft sind. Das selbe Prinzip passiert mit dem Input Feld “ort”, nur das dort statt dem “input-error.jpg” das “input-ok.jpg” geladen wird, da wir hier eine Eingabe gemacht haben.
Eine Demo gibt es dazu hier.
Tags: CSS, feld, felder, formatieren, Formular, gestalten, input, Javascript
Eigenes Javascript zu schreiben ist schon ziemlich Old School, eine moderne Technik ist die Verwendung von Javascript Bibliotheken, wie jQuery plus Plugins. Damit lässt sich so eine Überprüfung in wenigen Zeilen zuverlässig programmieren.