Benötigte Formularfelder hervorheben

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Benutzer sollen sofort sehen, welche Formularfelder auf jeden Fall ausgefüllt werden müssen. Muss das Formular erneut angezeigt werden, weil die Felder leer oder fehlerhaft waren, sollen diese zusätzlich markiert werden.

Lösung

Platzieren Sie neben den Formularbeschriftungen (labels) für die notwendigen Felder eine Textwarnung und ein Icon (siehe nächste Abbildung).

Erweitern Sie die benötigten Formularelemente (in unserem Beispiel input und textarea) sowie die dazugehörigen label-Elemente mit einem class-Attribut, das den Wert required ("notwendig") trägt, wie hier gezeigt:

<form id="msgform" name="msgform" method="post" action="/process.php">
  <fieldset>
    <legend>Kontaktinformationen</legend>
    <label for="fmtitle" accesskey="a"><span class="akey">A</span>nrede</label>
    <select name="fmtitle" id="fmtitle">
      <option value="herr">Herr</option>
      <option value="frau">Frau</option>
      <option value="firma">Firma</option>
    </select>
    <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
    <input type="text" name="fmname" id="fmname"/>
    <label for="fmemail" accesskey="e" class="required"><span class="akey">E-</span>Mail <img src="img/warning.gif"/>Notwendige Eingabe!</label>
    <input type="text" name="fmemail" id="fmemail" class="required"/>
  </fieldset>
  <fieldset>
    <legend>Ihre Nachricht</legend>
    <label for="fmstate" accesskey="b"><span class="akey">B</span>etreff</label>
    <input type="text" name="fmcountry" id="fmcountry"/>
    <label for="fmmsg" class="required"><span class="akey">N</span>achricht <img src="img/warning.gif"/>Notwendige Eingabe!</label>
    <textarea name="fmmsg" accesskey="n" id="fmmsg" rows="5" cols="14" class="required"></textarea>
  </fieldset>
  <input type="submit" name="submit" value="Abschicken" class="submit"/>
</form>

Icon und Text für benötigte Formularfelder werden angezeigt

Abbildung: Das Icon und der Text für benötigte Formularfelder werden angezeigt.

Um diese Felder zusätzlich zu kennzeichnen, können Sie deren Rahmen und Hintergrundfarbe verändern (siehe folgende Abbildung):

label {
 margin-top: .33em;
 display: block;
}
input {
 display: block;
 width: 250px;
}
textarea {
 width: 250px;
 height: 75px;
}
label.required {
 color: #c00;
 font-weight: bold;
}
textarea.required, input.required {
 border: 1px solid red;
 background-color: #eee;
}

Formularfelder werden zusätzlich hervorgehoben

Abbildung: Die Formularfelder werden zusätzlich hervorgehoben.

Diskussion

Durch die Änderungen an den Eingabe- und label-Elementen können Benutzer leicht erkennen, welche Formularelemente auf jeden Fall ausgefüllt werden sollen.

Durch den Hinweis "Notwendige Eingabe!" sowie das Warn-Icon und die farbliche Hervorhebung der notwendigen Felder sieht der Benutzer schnell, mit welchen Formularfeldern es Probleme gab. Sofern der Browser CSS nicht unterstützt, sind der Texthinweis und das Icon die einzigen Anzeichen, dass bestimmte Bereiche im Formular korrigiert werden müssen.

Siehe auch

Eine Anleitung zur Integration von Formular-Überprüfungen mit PHP.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln