CSS Kochbuch

7.16 Benötigte Formularfelder hervorheben

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 Abbildung 7-23).

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" ...