Die Auszeichnung von Formularen gehört zu den schwierigsten Aufgaben bei der Erstellung von Webseiten und – meiner Ansicht nach – auch zu denen, die am wenigsten Spaß machen. Es handelt sich dabei um eine technisch orientierte Arbeit, bei der Webautoren häufig durch die Arbeit der Programmierer eingeschränkt werden, die die im Hintergrund stattfindenden Prozesse definieren. Formulare sind häufig die Schnittstelle zwischen Nutzern und interaktiven Prozessen. Dadurch erfordern sie eine erhöhte Beachtung der Forderungen der Web-Ergonomie und Zugänglichkeit.

Analog zur Auszeichnung der Tabelle mit den Öffnungszeiten gehen wir auch hier Schritt für Schritt vor, damit Sie lernen, wie Webautoren bei der Auszeichnung komplexer Inhalte vorgehen. Beginnen wir mit dem Formularcontainer. Als Wert für das action-Attribut geben wir #top an; sendet ein Nutzer das Formular ab, springt er wieder nach oben an den Beginn der Seite. Wir wählen post als HTTP-Methode.

<form action="#top" method="post">
</form>

Schauen wir uns das Formular einmal genauer an (siehe Abbildung 8.4). Wir sehen drei Bereiche: »Persönliche Angaben«, »Angaben zur Reservierung« und »Ihre Nachricht«. Wir können Elemente vom Typ fieldset und legend verwenden, um das Formular aufzuteilen. Darunter folgt die Absenden-Schaltfläche, die wir in einem Absatz mit der ID submit einschließen.

<form action="#top" method="post" id="contactForm">
  <fieldset>
    <legend>Persönliche Angaben</legend>
  </fieldset>
  
  <fieldset>
    <legend>Angaben zur Reservierung</legend>
  </fieldset>
  
  <fieldset>
    <legend>Ihre Nachricht</legend>
  </fieldset>
  
  <p id="submit"><input value="Absenden" type="submit" /></p>
</form>

Wenn wir uns die Darstellung der Elemente innerhalb eines Fieldsets anschauen, kommen wir schnell zu dem Ergebnis, dass wir alle Steuerelemente und deren Beschriftung in Tabellen anordnen sollten. Diese Vorgehensweise lässt sich semantisch rechtfertigen, schließlich stehen Beschriftung und Steuerelement in einer Beziehung zueinander. Vor allem aber ist eine Tabelle sehr gut dafür geeignet, alle Elemente bei optimaler Skalierbarkeit in einer Flucht anzuordnen, wie es der Entwurf fordert. Andere Auszeichnungsformen sind natürlich denkbar, für den Einstieg allerdings zu schwierig zu implementieren.

Bei der Auszeichnung der Steuerelemente kommt nichts auf Sie zu, was Sie nicht bereits in Kapitel 5.10, »Formulare«, gelernt haben. Erlauben Sie mir dennoch einige Anmerkungen.

• Eine Person wird entweder mit »Herr« oder »Frau« angeredet, sinnvoll sind daher Optionsfelder, da Nutzer von Optionsfeldern gleichen Namens in einem Formular nur eines auswählen können.
• Bitte achten Sie auf den Bezug zwischen Beschriftung und Steuerelement. Wir verwenden beide Varianten, zum einen den direkten Bezug, beispielsweise bei der Anrede, zum anderen den indirekten Bezug über das for-Attribut.
• Jedes Auswahlmenü können wir auch als eine Liste von Optionsfeldern darstellen, übersichtlich wäre eine solche allerdings nicht. Die Auswahl des richtigen Steuerelements für einen bestimmten Zweck gehört zu den Aufgaben eines Webautors.
• Die Vorbelegung des Datums soll die Eingabe im gewünschten Format erleichtern. Wohlgemerkt: erleichtern, nicht sicherstellen. Dies erledigen Webautoren und Programmierer professioneller Websites mittels client- und serverseitiger Technologien. Häufig überprüfen Formulare bei der Eingabe oder beim Absenden mittels JavaScript, ob alle Daten den Vorgaben entsprechen und vollständig sind, und nach dem Absenden überprüft ein Script auf dem Server die Konsistenz der Daten.

<form action="#top" method="post" id="contactForm">
  <fieldset>
    <legend>Persönliche Angaben</legend>

    <table>
      <tbody>
        <tr class="odd">
          <th>Anrede</th>
          <td><label><input name="anrede" value="herr" checked="checked" type="radio" /> Herr</label>   <label><input name="anrede" value="frau" type="radio" /> Frau</label></td>
        </tr>
        <tr>
          <th><label for="name">Name</label></th>
          <td><input name="name" id="name" size="30" type="text" /></td>
        </tr>
        <tr class="odd">
          <th><label for="telefon">Telefon</label></th>
          <td><input name="telefon" id="telefon" size="30" type="text" /></td>
        </tr>
        <tr>
          <th><label for="e-mail">E-Mail</label></th>
          <td><input name="e-mail" id="e-mail" size="30" type="text" /></td>
        </tr>
      </tbody>
    </table>
  </fieldset>
  
  <fieldset>
    <legend>Angaben zur Reservierung</legend>
    
    <p>Falls Sie einen Tisch reservieren möchten, benötigen wir noch folgende Informationen. Bitte beachten Sie auch unsere <a href="oeffnungszeiten.html">Öffnungszeiten</a>.</p>
    
    <table>
      <tbody>
        <tr class="odd">
          <th><label for="date">Datum</label></th>
          <td><input name="date" id="date" size="30" value="zum Beispiel 24.12.2008" onblur="if(this.value == '') this.value='zum Beispiel 24.12.2008'" onfocus="if(this.value == 'zum Beispiel 24.12.2008') this.value=''" type="text" /></td>
        </tr>
        <tr>
          <th><label for="time">Uhrzeit</label></th>
          <td>
            <select name="time" id="time">
              <option>bitte wählen...</option>
              <option>12:00</option>
              <option>12:30</option>
              <option>13:00</option>
              <option>13:30</option>
              <option>14:00</option>
              <option>18:00</option>
              <option>18:30</option>
              <option>19:00</option>
              <option>19:30</option>
              <option>20:00</option>
              <option>20:30</option>
              <option>21:00</option>
              <option>21:30</option>
              <option>22:00</option>
              <option>22:30</option>
              <option>23:00</option>
              <option>23:30</option>
            </select>
          </td>
        </tr>
        <tr class="odd">
          <th><label for="persons">Personen</label></th>
          <td>
            <select name="persons" id="persons">
              <option selected="selected">1–2</option>
              <option>3–5</option>
              <option>6–10</option>
              <option>10–15</option>
              <option>mehr als 15</option>
            </select>
          </td>
        </tr>
        <tr>
          <th><label for="smoker">Raucherbereich</label></th>
          <td><input name="smoker" id="smoker" type="checkbox" /></td>
        </tr>
        <tr class="odd">
          <th><label for="beerGarden">Biergarten</label></th>
          <td><input name="beerGarden" id="beerGarden" type="checkbox" /></td>
        </tr>
      </tbody>
    </table>
  </fieldset>
  
  <fieldset>
    <legend>Ihre Nachricht</legend>
    
    <textarea name="nachricht" id="nachricht" cols="33" rows="8"></textarea>
  </fieldset>
  
  <p id="submit"><input value="Absenden" type="submit" /></p>
</form>

Abb. 8.38: Das unformatierte Kontaktformular

Damit haben wir die Auszeichnung des Formulars abgeschlossen. Es sieht jetzt so aus, wie in Abbildung 8.38 gezeigt. Kommen wir direkt zum Styling. Die gesamte Kochbar-Website enthält nur dieses eine Formular, alle Formatierungen können wir daher im Bereich der Regeln für allgemeine Elemente vornehmen.

Zunächst verschaffen wir den Fieldsets ein wenig Raum und gestalten ihre Rahmen und Namen.

/**
* @section Formulare
*/
fieldset {
  border: 1px solid #cbb8ba;
  margin: 1em 0;
  padding: 0 1em;
}
legend {
  color: white;
  background-color: #cbb8ba;
  padding: .3em 1em;
}

Abb. 8.39: Fieldset-Elemente teilen das Formular in mehrere Gruppen auf

Schauen wir uns an, was wir tun müssen, um die Steuerelemente zu gestalten.

• Wir korrigieren die horizontale Ausrichtung von Kontrollkästchen und Optionsfeldern, die derzeit ein wenig zu hoch positioniert sind.
• Für Texteingabefelder deklarieren wir einen anderen Rahmen und vergrößern die inneren Abstände.
• Dasselbe tun wir für textarea-Elemente. Zudem geben wir einen vertikalen äußeren Abstand an und vergrößern das Texteingabefeld auf die volle Breite. Am besten messen wir die genaue Breite im Entwurf pixelgenau ab. Die Alternative ist die Deklaration von width: 100%; zusammen mit border-left und border-right, allerdings führt das zu einer Überbreite (100 % + 2 px) und dies wiederum häufig zu Problemen, die wir vermeiden wollen.
• Den Text der Absenden-Schaltfläche formatieren wir fett und passen Farben und Abstände an.
• Da wir schon dabei sind: Lassen Sie uns die Beschriftungen gleich mit formatieren. Wir haben dafür gesorgt, dass Beschriftungen anklickbar sind, um das zugehörige Steuerelement zu aktivieren, folglich setzen wir einen entsprechenden Mauszeiger, der dieses Verhalten auch visualisiert. Ein wenig Padding sorgt für mehr Abstand zwischen den Beschriftungen und den dazugehörigen Steuerelementen. Bei den Optionsfeldern der Anrede ist gut zu sehen, dass das notwendig ist.

input[type="checkbox"],
input[type="radio"] { vertical-align: middle; }

input[type="text"] {
  border: 1px solid #cbb8ba;
  padding: 3px 10px;
}
input[type="submit"] {
  color: #2e050a;
  background-color: #f5f4f8;
  font-weight: bold;
  padding: 0 6px;
}
textarea {
  border: 1px solid #cbb8ba;
  margin: 1em 0;
  padding: 5px 15px;
  width: 535px;
}
label {
  cursor: pointer;
  padding-right: .5em;
}

Abb. 8.40: Formatierung der Steuerelemente

Nun formatieren wir die Tabellen, die die Beschriftungen und Steuerelemente ausrichten. Dabei nehmen wir alle Deklarationen generell für Tabellen innerhalb von Formularcontainern vor (Selektor form table).

Zunächst setzen wir die Breite auf 100% und verschaffen den Tabellen ein wenig mehr vertikalen äußeren Abstand.

/* Tabellen in Formularen */
form table {
  width: 100%;
  border-collapse: collapse;
  margin: .8em 0;
}

Anschließend kümmern wir uns um die Einfärbung der Tabellenzeilen. Der Entwurf sieht vor, dass die Zeilen abwechselnd hell und dunkel eingefärbt sind. Ungerade Zeilen sind hell, gerade Zeilen dunkel. Tja, wie wollen wir hier vorgehen? Wir könnten jeder Zeile eine Klasse vergeben, z. B. odd und even, oder nur jeder zweiten und diese dann mittels eines Klassenselektors im Stylesheet ansprechen. Allerdings bin ich der Ansicht, dass wir hier einen sehr guten Anwendungsfall für Progressive Enhancement haben: Warum setzen wir nicht die Struktur-Pseudoklasse :nth-child(n) ein? In Kapitel 6.5.5 habe ich beschrieben, wie wir sie verwenden können, um Tabellenzeilen unterschiedlich einzufärben. Hier gehen wir ein wenig anders vor: Wir deklarieren zunächst, dass die Browser alle Zeilen (form tr) dunkel einfärben sollen, und anschließend, dass gerade Zeilen (form tr:nth-child(odd)) hell sein sollen. Browser, die die Struktur-Pseudoklasse verstehen, färben die Zeilen nun abwechselnd hell und dunkel ein, alle anderen nicht. Nutzer älterer Browser werden nicht einmal merken, dass ihnen etwas entgeht, während bei Nutzern moderner Browser die Tabelle ein wenig hübscher aussieht.

form tr {
  color: #5e2021;
  background-color: #e8e7ee;
  border-bottom: 4px solid white;
}
form tr:nth-child(odd) {
  color: #5e2021;
  background-color: #f5f4f8;
}

Nun fehlen noch einige Deklarationen für die Zellen. Die Werte der Eigenschaft padding sind für Kopf- und Datenzellen die gleichen, also fassen wir sie in einer Regel zusammen. Anschließend deklarieren wir die Breite von th-Elementen und die horizontale Ausrichtung ihrer Inhalte.

form td,
form th { padding: 5px 5px 5px 15px; }

form th {
  width: 40%;
  text-align: left;
}

Abschließend formatieren wir den Absatz, der die Absenden-Schaltfläche enthält.

form p#submit {
  color: white;
  background-color: #cbb8ba;
  padding: 10px 15px;
  margin: 2.5em 0;
}