Genau wie für Hintergründe und Listen gibt es auch für Formulare die Möglichkeit, dass Elemente gestaltet werden können. Allerdings gibt es bei Formularen keine speziellen CSS-Tags (wie z. B. list-style-type oder Ähnliches). Sie greifen hier lediglich darauf zurück, die „normalen“ HTML-Elemente mit CSS anzusprechen und zu formatieren.
Ein Kontaktformular formatiert mit CSS
Sie können z. B. dem gesamten Formular eine einheitliche Schrift zuweisen oder den input-Elementen eine Hintergrundfarbe geben (siehe Beispielbild). Sie können Formulare in folgenden Bereichen formatieren:
<!doctype html><htmllang="de"><head><metacharset="utf-8"><title>Kontaktformular</title><linkrel="stylesheet"type="text/css"href="css_bsp_formulare.css"></head><body><h1>Kontaktformular</h1><formaction="datenaufnahmedatei.html"method="get"><fieldset><legend>Persönliche Daten</legend> Vorname: <inputtype="text"name="vorname"size="30"maxlength="30"><br> Nachname: <inputtype="text"name="nachname"size="30"maxlength="30"><br> E-Mail: <inputtype="text"name="email"size="30"maxlength="30"><br> Telefonnummer: <inputtype="text"name="telefon"size="30"maxlength="30"><br><selectname="landauswahl"size="1"><option>Wählen Sie Ihr Land:</option><option>Deutschland</option><option>Österreich</option><option>Schweiz</option></select><br><inputtype="radio"name="geschaeftskunde"value="Geschaeftskunde"> Geschäftskunde
<inputtype="radio"name="privatkunde"value="Privatkunde"> Privatkunde
</fieldset><fieldsetclass="left"><legend>Kontakt per</legend><inputtype="checkbox"name="telefon"value="telefon"> Telefon
<inputtype="checkbox"name="email"value="email"> E-Mail
</fieldset><fieldsetclass="left"><legend>Schreiben Sie uns Ihre Meinung:</legend><textareaname="user_eingabe"cols="30"rows="10"></textarea></fieldset></form></body></html>
Verschönern Sie nun das Kontaktformular
Hier können Sie CSS- und HTML-Code eingeben, um direkt im Browser eine Vorschau zu sehen. Klicken Sie dann auf Vorschau aktualisieren, um das Ergebnis zu sehen.