Ich habe ein sehr interessantes YouTube Video entdeckt über die Top 5 Fehler beim Gebrach von CSS. Nicole Sullivan gibt dabei viele anschauliche Beispiele.

Kümmern wir uns nun um das “stylen” des Formulars. Mit Hilfe von CSS lassen sich HTML Elemente einfach modifizieren. Dazu erstellen wir uns erst einmal eine css Datei. Ich habe sie style.css genannt und in das selbe Verzeichnis abgelegt.

Eingebunden wird die Datei im head Bereich unserer formular.php mit dem Befehl:

<link rel="stylesheet" type="text/css" href="style.css" />

Die von mir verwendete CSS Datei hat folgenden Inhalt:

body, * {
margin: 2px;
padding: 0;
}

body {
font-family: verdana,arial,sans-serif;
font-size: 12px;
}

label {
font-weight:bold;
color: #000000;
}

#formular {
border:#333333 1px solid;
background-color: #e4e3e3;
margin: 10px;
padding: 5px;
width: 400px;
}

.fehler {
font-weight:bold;
color:red;
display:inline;
}

Wozu die einzelnen Elemente verwendet werden, sehen wir später. Des weiteren habe ich mich entschlossen, das jQuery Plugin “jQuery Corners” zu benutzen. Nicht, weil es nötig ist, aber abegrundete Ecken find ich einfach schön. Runterladen kann man das hier. Bitte die Datei jquery.corners.js auch in dem Ordner speichern und in formualr.php einbinden.

<script type="text/javascript" src="jquery.corners.js"></script>

Um das Script verwenden zu können brauchen wir noch einen Adressaten. Also fügen wir um unser Formualar ein div Tag ein.

<div id="formular">

<!-- Hier steht  das Formular -->

</div>

Desweitern müssen wir unser kleines jQuery Plugin nun noch um die folgenden zwei Zeilen verwenden.

$('#formular').corners("5px");
$(".button").click(function(event)

Dieses geschieht direkt nach $(document).ready(function() {.  Eine Kleinigkeit können wir nun noch ergänzen. Wenn das Formular als richtig gilt, dann möchten wir die Hintergrundfarbe unserer div Box ändern. Dazu können wir einfach in den if(error == false) { Bock noch eine Manipulation des Styles von #formular vornehmen.

$("#formular").css("background-color", "#fffebd");

Möchten wir nun noch eine Mehrfachabsendung verhindern, löschen wir jetzt einfach noch die eingegebenen, abgesendeten Werte.

$("#Name").val("");
$("#Email").val("");
$("#Nachricht").val("");

Hier gibts das ganze als Demo und hier zum Download.