SELFHTML

Formulare formatieren mit CSS

Informationsseite

nach unten Formulare und Formularelemente gestalten mit CSS

 nach unten 

HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 Formulare und Formularelemente gestalten mit CSS

Mit Kapitel 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 Stylesheets müssen Sie zunächst wissen, wie man Kapitel 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:
Seite Schriftformatierung
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder

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

Beispiel:

Beispiel-Seite 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 #ddd; }
td, input, select, textarea { font-size:13px; font-family:Verdana,sans-serif; font-weight:bold; }
input, select, textarea { color:#00c; }
.Bereich, .Feld { background-color:#ffa; width:300px; border:6px solid #ddd; }
.Auswahl { background-color:#dff; width:300px; border:6px solid #ddd; }
.Check, .Radio { background-color:#ddff; border:1px solid #ddd; }
.Button { background-color:#aaa; color:#fff; width:200px; border:6px solid #ddd; }
</style>
</head>
<body>

<h1>Das hier kö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://de.selfhtml.org/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ä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ächste Groß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ü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 Seite zentral für eine HTML-Datei definiert in einem Style-Bereich im Dateikopf. Für die einzelnen Formularfeldtypen werden Seite 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 Formularelementtypen wird ferner eine blaue Textfarbe festgelegt.

Eingabefelder und Eingabebereiche mit der Klasse Eingabe (die einleitenden HTML-Tags haben dazu das Kapitel 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.

 nach oben
weiter Seite Formulare verarbeiten
zurück Seite Buttons zum Absenden oder Abbrechen
 

© 2005 Seite Impressum