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

SELFHTML/Navigationshilfen HTML/XHTML Formulare
	Formulare formatieren mit CSS
	Formulare und Formularelemente gestalten mit CSS

Formulare und Formularelemente gestalten mit CSS

Mit 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 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
Hintergrundfarben und -bilder

Das folgende Beispiel zeigt ein vollständiges, absendbares Formular, das mit 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 #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 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 Formularelementtypen 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