Webmaster-Crashkurs

Formulare über CSS gestalten

Formulardesign über CSS ist wichtig für eine Trennung zwischen Design und Inhalt. Früher wurden Formulare gerne in Tabellen gepackt. Dies ist bei Nutzung von CSS für Formulare nicht mehr notwendig. Als Grundvoraussetzung benötigt man ein Formular und diese sollte auch mit den entsprechenden gekennzeichneten Beschriftungen (siehe Kapitel Formularfeld-Beschriftung formularfeld-beschriftung.htm) versehen sein. Nehmen wir als Grundlage folgenden HTML-Code:

<form id="umfrage" name="umfrage" action="" method="get" enctype="text/html">
<fieldset>
    <legend>Ihre Adresse</legend>
    <p>
      <label for="nachname">Nachname:</label>
      <input id="nachname" type="text" name="nachname" value="" size="20" maxlength="50" />
    </p>
    <p>
      <label for="plz">PLZ:</label>
      <input id="plz" type="text" name="plz" value="" size="5" maxlength="5" />
    </p>
</fieldset>
<input type="Submit" name="" value="jetzt senden" />
</form>

Noch sieht das Formular nicht sehr schön aus:

Formulare über CSS gestalten

Wenn wir nun die Eingabefelder sauber untereinander ausgerichtet haben möchten, geben wir dem Inline-Element <label> eine Breite mit, machen es zu einem Block-Element und lassen es floaten:

label {
    width: 10em;
    display: block;
    float: left;
}

Formulare über CSS gestalten

Im nächsten Schritt wollen wir dem Formular eine Hintergrundfarbe und eine Breite mitgeben.

In Beispiel verwende ich ein pastellfarbenes Blau mit dem Wert #eeeeff als Hintergrundfarbe

Formulare über CSS gestalten

Und für das Aussehen bekommt das ganze noch einen Abstand und einen Umrahmung:

form {
    background-color: #eeeeff;
    padding: 20px;
    border: 1px solid silver;
}

Formulare über CSS gestalten

Formulare mit CSS und Mehrfachauswahlen

Wenn Sie auf Ihrem Formular Mehrfachauswahlen haben (z.B. Herr | Frau), dann sollte das Design eine klar ersichtliche Trennung ermöglichen

Formulare über CSS gestalten

Im folgenden Beispiel bei der Frage „Lesbarkeit des Textes“ wird es schon schwierig, das richtige Kästchen für die 4 zu treffen – ist es da vor oder nach Beschreibung 4? Hier muss eine saubere Trennung (sprich Abstand oder noch besser ein Trennzeichen her.

Wir platzieren also um die entsprechenden Eingabebereiche …

    <p>
      <label for="meinung">Wie finden Sie diese Seiten</label>
      <span class="radiotrenner"><input type="radio" name="anrede" value="1" /> gut </span>
      <span class="radiotrenner"><input type="radio" name="anrede" value="2" /> neutral </span>
      <span class="radiotrenner"><input type="radio" name="anrede" value="3" /> schlecht </span>
    </p>

Und Ergänzen CSS um:

.radiotrenner {
    display: block;
    float: left;
    border: 1px solid black;
    background-color: white;
    width: 90px;
}

Wir haben aus den SPAN-Bereichen Blöcke gemacht, um diesen eine Breite mitgeben zu können und haben diese gefloatet, damit diese weiterhin nebeneinander angezeigt werden. Zur besseren Sichtbarkeit des Ergebnisses haben diese die Hintergrundfarbe weiß bekommen und einen Rahmen.

Das Ergebnis entspricht noch nicht ganz unseren Vorstellungen. Durch das foaten kommt nun entweder direkt nach der Auswahl „schlecht“ (wenn der Platz ausreicht) oder unterhalb der nächste Punkt:

Formulare über CSS gestalten

Formulare über CSS gestalten

Das ist unerwünscht. Unser nächstes Element ist da Label. Diese können wir ergänzen mit der Aufhebung des floats:

label {
    clear: both;
    width: 10em;
    display: block;
    float: left;
    cursor: pointer;  /* Mauszeiger aendern */
}

Im nächsten Schritt wollen wir zwischen den einzelnen Punkten als Trennung einen Querstrich. Dieser soll aber nicht im HTML sonder rein über CSS erstellt werden. Dazu nutzen wir unseren border – allerdings nur für die rechte Seite:

.radiotrenner {
    display: block;
    float: left;
    border-right: 1px solid black;
    background-color: white;
    width: 90px;
}

Formulare über CSS gestalten

Um mehr Platz zwischen der sichtbaren Trennung und dem nächsten Punkt zu haben, wird der Außenabstand gesetzt.

Formulare über CSS gestalten

Der letzte Punkt braucht keine Trennung mehr zum nächsten Punkt, denn es gibt keinen nächsten Punkt. Also dort den Rahmen wag – dazu erstellen wir eine weitere CSS-Defintion:

    <p>
      <label for="meinung">Wie finden Sie diese Seiten</label>
      <span class="radiotrenner"><input type="radio" name="anrede" value="1" /> gut </span>
      <span class="radiotrenner"><input type="radio" name="anrede" value="2" /> neutral </span>
      <span class="radiotrennerEnde"><input type="radio" name="anrede" value="3" /> schlecht </span>
    </p>

Zur besseren Sichtbarkeit ist dieser Gelb eingefärbt. Alle nicht mehr benötigten Angaben sind ausgeklammert. Es bleibt nicht mehr viel:

.radiotrenner {
    display: block;
    float: left;
    border-right: 1px solid black;
    margin-right: 1em;
    background-color: white;
    width: 90px;
}
.radiotrennerEnde {
    /*
    display: block;
    float: left;
    border-right: 1px solid black;
    margin-right: 1em;
    */
    background-color: yellow;
    /*
    width: 90px;
    */
}

Formulare über CSS gestalten

Und wenn man es genau nimmt, bleibt gerade außer der Hintergrundfarbe nichts mehr. Somit können wir uns einfach die Zuweisung der Klasse sparen und gut ist. Die Hintergrundfarben werden jetzt herausgenommen, da diese eh nur zum zeigen war, wo man sich gefunden hat. Wenn diese Ausgeschaltet sind, dann sieht unser fertiges Ergebnis für die Zeile „Wie finden Sie diese Seiten“ wie folgt aus:

Formulare über CSS gestalten

Label bei Radio-Felder

Haben Sie den Fehler bei den Radio-Buttons schon bemerkt. Sie können die Ausprägungen zwar anklicken, aber es wird nichts gesetzt. Das liegt daran, dass das Label-Element nicht die Frage vorne ist „Wie finden Sie diese Seiten“ sondern jeweils die Ausprägungen gut | neutral | schlecht. Setzen wir nun die Labels korrekt.

    <p>
      <label for="meinung">Wie finden Sie diese Seiten</label>
      <span class="radiotrenner"><input type="radio" name="anrede" id="meinung1" value="1" />
      <label for="meinung1">gut</label> </span>
      <span class="radiotrenner"><input type="radio" name="anrede" id="meinung2" value="2" />
      <label for="meinung2">neutral</label> </span>
      <span class="radiotrenner"><input type="radio" name="anrede" id="meinung3" value="2" />
      <label for="meinung3">schlecht</label> </span>
    </p>

Das führt im ersten Augenblick zu einem unerwarteten Design.

Formulare über CSS gestalten

Aber das wird so ausgeführt, wie wir das Design festgelegt habe. Jedes Label ist ein Blockelement mit einer festgelegten Breite. Das Label-Element bei den Radio-Buttons soll also kein Style-Sheet bekommen – oder anders gesagt. Nur die Label-Elemente am Beginn der Zeile sollen das Style-Sheet zugewiesen bekommen. Diese habe die Eigenschaften, das immer als Element davor ein <p> kommt. Dies können wir uns zunutze machen, indem wir verschachtelte Selektoren nutzen. Das bedeutet, ein Selektor wird nur dann genutzt, wenn dieser genau 1 Ebene tiefer verwendet wird. Unser CSS wird ergänzt um:

p > label {
    clear: both;
    width: 10em;
    display: block;
    float: left;
    cursor: pointer;  /* Mauszeiger aendern */
    background-color: green;
}

Wichtig ist beim „p > label“ Größerzeichen, dass diese verschachtelten Selektorenberücksichtigung bewirkt.

Formulare über CSS gestalten

Änderung des Cursor beim Kontakt mit den Label-Felder

Damit der Nutzer ein Feedback bekommt, dass es hier die Möglichkeit gibt, dass er etwas anklicken kann, ändern wir den Mauszeiger, wenn dieser sich auf den Label-Feldern befindet. Klickt der Nutzer, springt der Cursor in das entsprechende Formularfeld:

label {
    width: 10em;
    display: block;
    float: left;
    cursor: pointer;  /* Mauszeiger aendern */
}

Formulare über CSS gestalten

Aktuelles Eingabefeld farblich hervorheben

Um den Nutzer ein Feedback zu geben, in welchem Eingabefeld er sich befindet (außer dem sehr kleinen blinkenden Cursor), geben wir dem entsprechenden Feld eine Hintergrundfarbe mit. Im Beispiel ein sehr auffälliges gelb:

input:focus, textarea:focus {
    background-color: yellow;
}

Formulare über CSS gestalten

Denkbar wäre diese Funktion auch, dass alle Pflichtfelder eine andere farbliche Hinterlegung bekommen, wenn der Cursor im Feld ist. Dazu kann dann das direkte ansprechen der Felder genutzt werden:

Durch folgenden CSS-Aufbau werden alle Felder gelb hinterlegt, sobald in diesen sicher Cursor befindet, mit Ausnahme des Eingabefeldes für die PLZ – dieses wird rot:

input:focus, textarea:focus {
    background-color: yellow;
}
input#plz:focus {
    background-color: red;
}

Erstes Eingabefeld aktivieren

Als Komfort können wir beim Aufruf der Seite mit dem Formular den Cursor in das erste Eingabefeld setzen. Dazu wird der body-TAG mit dem JavaScript erweitert.

<body onload="document.umfrage.nachname.focus();">

Was passiert: durch das onload weiß der Browser, dass folgender Befehl ausgeführt werden soll:

Im document (sprich die HTML-Seite) wird das Element „umfrage“ (ID von <form id=“umfrage“) und dann das Unterelement „nachname“ (ID von <input id=“nachname“) angesprochen mit der Funktion focus, was dem setzen des Cursors bewirkt. Als Ergebnis blinkt nun der Cursor munter im ersten Eingabefeld und der Nutzer kann direkt anfangen, das Formular auszufüllen. Das ist Benutzerkomfort.

Formulare über CSS gestalten

Sollte JavaScript deaktiviert sein, macht es nichts aus. Dann wird der Cursor nicht automatisch in das erste Feld gesetzt und der Nutzer muss in das Feld klicken. Außer Komfort haben wir nichts verloren. Das unbedingt bei Einsatz von JavaScript beachten. Alles muss auch noch Nutzbar sein, wenn JavaScript ausgeschaltet ist!

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2016   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit Videos