SELFHTML: HTML/XHTML / Formulare / Formulare formatieren mit CSS

	Formulare formatieren mit CSS
	Formulare und Formularelemente gestalten mit CSS

Formulare und Formularelemente gestalten mit CSS

Mit CSS Stylesheets können Sie Formulare und Formularelemente optisch gestalten. Welche Gestaltungsmöglichkeiten funktionieren, ist jedoch noch ein Glücksspiel. Diejenigen Browser, die das Formatieren von Formularelementen mit CSS unterstützen, unterstützen es noch nicht konsequent. Ausprobieren ist also angesagt.
Für das gesamte Formular können Sie beispielsweise Angaben zur Schriftformatierung oder zum Hintergrund bestimmen. Für einzelne Formularelemente können Sie ebenfalls Angaben zur Schriftformatierung machen, oder auch den vorgegebenen Feldrahmen abändern.
Bei Verwendung von CSS Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Interessant sind zur Gestaltung von Formularen und Formularelementen folgende CSS-Eigenschaften:
Schriftformatierung
Außenrand und Abstand
Innenabstand
Rahmen
Seite Hintergrundfarben und -bilder

Das folgende Beispiel zeigt ein vollständiges, absendbares Formular, das mit CSS Stylesheets gestaltet wurde.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Formulare und Formularelemente gestalten mit CSS</title>
<style type="text/css">
<!--
 form
   { background-image:url(background.gif); padding:20px; border:6px solid #DDDDDD; }
 td, input, select, textarea
   { font-size:13px; font-family:Verdana,sans-serif; font-weight:bold; }
 input, select, textarea
   { color:#0000CC; }
 .Bereich, .Feld
   { background-color:#FFFFAA; width:300px; border:6px solid #DDDDDD; }
 .Auswahl
   { background-color:#DDFFFF; width:300px; border:6px solid #DDDDDD; }
 .Check, .Radio
   { background-color:#DDFFFF; border:1px solid #DDDDDD; }
 .Button
   { background-color:#AAAAAA; color:#FFFFFF; width:200px; border:6px solid #DDDDDD; }
-->
</style>
</head>
<body>

<h1>Das hier k&ouml;nnen Sie absenden!</h1>

<p>Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.</p>

<form action="http://selfhtml.teamone.de/cgi-bin/comments.pl">
<table border="0" cellpadding="3" cellspacing="0">
 <tr>
  <td align="right">Vorname:</td>
  <td><input name="Vorname" type="text" class="Feld" size="30" maxlength="30"></td>
 </tr><tr>
  <td align="right">Zuname:</td>
  <td><input name="Zuname" type="text" class="Feld" size="30" maxlength="40"></td>
 </tr><tr>
  <td align="right" valign="top">Geschlecht:</td>
  <td>
   <input type="radio" class="Radio" name="Geschlecht" value="m"> m&auml;nnlich<br>
   <input type="radio" class="Radio" name="Geschlecht" value="w"> weiblich
  </td>
 </tr><tr>
  <td align="right" valign="top">Eigenschaften:</td>
  <td>
   <input type="checkbox" class="Check" name="Eigenschaft" value="Raucher"> Raucher<br>
   <input type="checkbox" class="Check" name="Eigenschaft" value="Autofahrer"> Autofahrer<br>
   <input type="checkbox" class="Check" name="Eigenschaft" value="HTMLFreak"> HTML-Freak
  </td>
 </tr><tr>
  <td align="right" valign="top">N&auml;chste Gro&szlig;stadt:</td>
  <td>
   <select name="Grossstadt" class="Auswahl" size="1">
    <option value="Hamburg">Hamburg</option>
    <option value="Berlin">Berlin</option>
    <option value="Frankfurt">Frankfurt</option>
    <option value="Muenchen">M&uuml;nchen</option>
   </select>
  </td>
 </tr><tr>
  <td align="right" valign="top">Kommentar:</td>
  <td><textarea name="Text" class="Bereich" rows="10" cols="50"></textarea></td>
 </tr><tr>
  <td align="right">Formular:</td>
  <td>
   <input type="submit" class="Button" value="Absenden">
   <input type="reset" class="Button" value="Abbrechen">
  </td>
 </tr>
</table>
</form>

</body>
</html>

Erläuterung:

Im Beispiel werden die CSS-Formate für die Formularelemente zentral für eine HTML-Datei definiert in einem Style-Bereich im Dateikopf. Für die einzelnen Formularfeldtypen werden Formate für Klassen definiert - das sind im Beispiel die Einträge im Style-Bereich, die mit einem Punkt (.) beginnen.

Das Formular selber, also das form-Element, erhält im Beispiel eine Hintergrundgrafik zugewiesen, die ein Tapetenmuster bewirkt, sowie einen hellgrauen, 6 Pixel dicken Rahmen. Ein Innenabstand von 20 Pixeln sorgt für ein saubereres Aussehen.

Für Tabellenzellen (td) und die Formularelemente input, select und textarea wird eine Schriftgröße von 13 Pixeln, die bevorzugte Schriftart Verdana und Fettschrift bestimmt. Für die drei Formular-Elementtypen wird ferner eine blaue Textfarbe festgelegt.

Eingabefelder und Eingabebereiche mit der Klasse Eingabe (die einleitenden HTML-Tags haben dazu das Universalattribut class= notiert) erhalten eine hellgelbe Hintergrundfarbe, eine feste Breite von 300 Pixeln, und der Rahmen um die Felder erhält die gleichen Eigenschaften wie der um das Formular.

Auswahlelemente erhalten alle ein helles Zyan-Blau als Hintergrundfarbe. Auswahllisten der Klasse Auswahl ebenfalls eine feste Breite von 300 Pixeln. Bei den Auswahlelementen dieser Klasse wird versucht, einen hellgrauen Rahmen der Dicke 1 Pixel zuzuweisen.

Buttons schließlich, die im Beispiel für die beiden Buttons zum Absenden und Abbrechen benötigt werden, bekommen eine graue Hintergrundfarbe und weiße Schrift zugewiesen und sollen 200 Pixel breit sein. Auch die Buttons erhalten wieder den dicken hellgrauen Rahmen.


	Formulare verarbeiten
	Buttons zum Absenden oder Abbrechen

SELFHTML/Navigationshilfen

HTML/XHTML

Formulare