<div class="content">
   <formclass="form" action="#" method="post">
   <fieldset>
   <legend>Kontakt zu uns</legend>
   <ol>
      <li>
      <label for="name">Name:</label>
      <input type="text" name="name"id="name" value="" />
      </li>
      <li>
      <label for="email">E-Mail-Adresse:</label>
      <input type="text" name="email" id="email"value="" />
      </li>
      <li>
      <label for="comment">Kommentar:</label>
      <textarea cols="32" rows="7"name="content" id="content"></textarea>
      </li>
      <li class="button">
      <input type="submit" name="submit"id="submit" value="Absenden" />
      </li>
   </ol>
   </fieldset>
   </form>
</div>

form {
   padding: 3px 0 0;
   margin: 10px auto;
   width: 550px;
 }

Hier werden die Außen- und Innenabstände definiert. Zudem wird für das Formular eine Breite von 550 Pixel festgesetzt.

fieldset {
   padding: 10px 20px 25px;
 }

ol {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }

li {
   float: left;
   padding: 10px;
 }

Eine Besonderheit gibt es noch hinsichtlich der Schaltfläche, die unterhalb des Formulars steht. Diese soll rechts ausgerichtet werden.

li.button {
   float: none;
   clear: both;
    text-align: right;
 }

Die Formularüberschrift

Widmen wir uns nun dem legend-Element. Darüber wird die Formularüberschrift definiert.





Die Definition für die Überschrift sieht folgendermaßen aus:

fieldset legend {
   font-weight: bold;
   font-size: 22px;
   margin: 20px 0 0 10px;
 }

Die Beschriftungen

label {
   display:block;
   cursor: pointer;
   font-weight: bold;
   line-height: 24px;
 }

Die Formularfelder gestalten

input, textarea {
   color: #3399FF
   border: 1px solid #3399FF;
   font: 13px Helvetica, Arial, sans-serif;
   padding: 8px 10px;
   width: 190px;
 }

Dabei handelt es sich ausschließlich um gestalterische Dinge. Besondere Beachtung ist auf die Rahmen zu richten. Sobald man nämlich in ein Feld den Cursor setzt, ändert sich die Rahmenfarbe. Das ist übrigens nicht nur ein ästhetischer Aspekt. Tatsächlich hilft das auch den Besuchern beim Ausfüllen des Formulars. So sehen sie immer gleich, in welchem Feld sich der Cursor gerade befindet.

Jetzt folgen einige Angaben zum mehrzeiligen Texteingabefeld.

textarea {
   width: 430px;
   overflow: auto;
 }

Den Senden-Button gestalten

Momentan kommt die Senden-Schaltfläche noch recht schmucklos daher. Das wird sich nun ändern. Das Ergebnis wird folgendermaßen aussehen:





Der Schaltfläche werden verschiedene Eigenschaften zugewiesen.

• Hintergrundfarbe

• Aussehen der Schrift

• Rahmen

• Abstände

Die dazugehörende CSS-Syntax stellt sich folgendermaßen dar:

input[type="submit"] {
   background-color: #3399FF;
   color: #fff;
   cursor: pointer;
   font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
   border: 1px solid #000;
   padding: 5px 10px;
   width: auto;
 }