Schicke Formulare/Kontaktformulare barrierefrei gestalten mit XHTML und Css

Tabellengestaltung ist Out, Css ist In.
Ich möchte an einem kleinen Beispiel zeigen, wie man mit Css problemlos Formulare/Kontaktformulare barrierefrei gestalten kann.
Der Vorteil bei der Gestaltung von Formularen mit Css liegt darin: das Formular ist barrierearm und entspricht den Regeln des w3c, wonach Tabellen lediglich zur Darstellung tabellarischer Daten dient.
Auch bei der optischen Gestaltung bleiben keine Wünsche offen; mit ein wenig Fantasie und auch geringen kenntnissen in Css, kann man schöne Formulare gestalten.
Und wer bei der Erstellung von Webseiten Wert auf Semantik legt, dem bleibt gar keine andere Möglichkeit, bei der Gestaltung von Formularen auf Tabellen zu verzichten.

Die Tags form, input, textarea, option select sind die Standart-Tags, mit denen eine Formular erstellt wird.

Diese Tags werden erweitert durch:
fieldset: Umschließt eine zusammengehörende Gruppe von Formularelementen
legend: Dient der Überschrift des Kontaktformulars
label: Mit Hilfe von Labels wird eine logischer Bezug zwischen Formularelement und Beschriftungstext (Name, Vorname, Email) hergestellt.

Kontaktformular anschauen
Kontaktformular Downloaden zip-Datei enthält 1 Css Datei, 1 HTML Datei und Button Grafik

Das HTML des Formulars

<form id="form1" name="form1" method="post" action="">
<fieldset>
<legend>Bitte geben Sie Ihre Kontaktdaten an</legend>

Mit <form>...</form> wird das Formular definiert. Alles, was zwischen dem einleitenden <form>und dem abschließenden </form>Tag steht, gehört zum Formular (Eingabefelder, Auswahllisten oder Buttons). Mit dem <fieldset>...</fieldset> Element wird die Gruppe der Eingabefelder, Auswahllisten oder Buttons umschlossen.
<legend>Bitte geben Sie Ihre Kontaktdaten an</legend> ist die Überschrift des Formulars und wird direkt unterhalb des einleitenden fieldset Elements notiert.

<p><label for="name">Name:</label>
<input type="text" name="name" id="name" /></p>
<p><label for="vorname">Vorname:</label>
<input type="text" name="vorname" id="vorname" /></p>
<p><label for="straße">Straße:</label>
<input type="text" name="straße" id="straße" />
<label for="straße">Nummer: </label>
<input type="text" name="nummer" id="nummer" /></p>
<p><label for="postleitzahl">PLZ:</label>
<input type="text" name="postleitzahl" id="postleitzahl" />
<label for="ort">Ort: </label>
<input type="text" name="ort" id="ort" /></p>
<p><label for="nachricht">Ihre Nachricht:<br /></label>
<textarea name="nachricht" id="nachricht"></textarea> </p>

Für Formularelemente ( Eingabefelder, Auswahllisten) gibt es normalerweise keine logische Beschriftungsmöglichkeit. Mit Hilfe von <label>...</lable> Tags und dem Attribut for können Sie einen logischen Bezug zwischen Formularelement und Beschriftungstext herstellen.
Das label-Tag selbst hat keine sichtbare Wirkung am Bildschirm, es dient lediglich dem Zweck, den logischen Bezug zum Formularelement herzustellen. Das for-Attribut sollte im Sinne der Barrierefreiheit auf jeden Fall angegeben werden. Laut XHTML-Spezifikationen ist es nicht zwingend erforderlich, aber der Benutzer braucht so nur auf den Text zu klicken, um das Eingabefeld oder Radiobutton zu Aktivieren.

Damit auch die Buttons über Css angesprochen werden können, werden sie mit einer Klasse class="button" belegt.

</fieldset>
</form>

Das dazugehörige Css

Hier wäre eigentlich nur zu erwähnen, dass p innerhalb des Form -Elements formatiert wurde.
Über clear: left; und float: left; wird der Zeilenumbruch und die Ausrichtung festgelegt, was sich dann auf die optische Darstellung des Formulars auswirkt.

body, input { font-size: 1em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background-color: white;
}
form p { clear: left;
           float: left;
           width: 100%;
           margin: 2px 2px 2px 0;
           padding: 2px;
}
form { font-size: 0.9em;
        line-height: 120%;
        width: 30em;
        margin: 1em;
        padding: 1em;
}
label { color: #878787;
         font-weight: normal;
         text-align: right;
         width: 5em;
         float: left;
        margin: 5px 0;
        padding: 5px;
}
fieldset { margin: 0;
            padding: 0 0 10px;
            border: solid 2px maroon;
}
legend { color: maroon;
          font-size: 1em;
            margin: 3px;
            padding: 3px;
}
.button { font-size: 0.9em;
             background-image: url(button.gif);
             background-repeat: no-repeat;
             background-attachment: scroll;
           width: 70px;
            height: 30px;
            margin: 5px;
            cursor:pointer;
}
input { width: 10em;
          float: left;
          margin: 3px;
          padding: 2px;
          border: solid 1px silver;
          display: block;
}
#straße { }
#nummer { width: 3em; }
#ort { }
#postleitzahl { width: 3em; }
#name { }
#nachricht { width: 250px;
                 height: 100px;
                 margin-left: 20px;
}
#vorname { }

Kontaktformular anschauen
Kontaktformular Downloaden zip-Datei enthält 1 Css Datei, 1 HTML Datei und Button Grafik

Mit wenigen Zeilen Css wurde nun ein nettes Formular erstellt; es läßt sich auf dieser Basis ohne Probleme weiter ausbauen. Sollten Fehler im Code oder meiner Ausdrucksweise vorzufinden sein, möchte ich zu meiner Entschuldigung sagen, dass Webdesign und Css nur ein Hobby von mir ist.