Ein Webformular für den Ausdruck aufbereiten

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Ein Formular, das online von Benutzern ausgefüllt werden kann, soll so aufbereitet werden, dass es auch ausgedruckt und manuell ausgefüllt werden kann, wie in folgender Abbildung gezeigt.

Ein Onlineformular

Abbildung: Ein Onlineformular.

Lösung

Legen Sie ein separates Stylesheet für den Ausdruck an. Dieses enthält einen Klassenselektor, mit dem die form-Elemente ausgewählt werden können. In der Stildefinition wird festgelegt, dass das Formular für den Ausdruck in schwarzer Schrift ausgegeben werden soll. Die einzelnen Felder erhalten einen unteren Rahmen von einem Pixel Breite. Dieser symbolisiert im Ausdruck die Bereiche, die der Benutzer ausfüllen soll. Für den folgenden HTML-Code eines input-Elements

<label for="vorname">Vorname</label>
<input class="fillout" name="vorname" type="text" id="vorname" />

verwenden wir die folgende CSS-Regel:

<style type="text/css" media="print ">
 .fillout {
  color: black;
  border-width: 0;
  border-bottom: 1px solid #000;
  width: 300pt;
 }
</style>

Für die Darstellung von Aufklappmenüs wird das select-Element komplett versteckt. Durch etwas zusätzlichen Markup-Code kann schließlich der untere Rahmen dargestellt werden:

<label for="bundesland">Bundesland:<label>
<select name="bundesland" size="1">
  <option selected="selected">Bitte auswählen</option>
  <option value="Ba-Wü.">Baden Württemberg</option>
  <option value="Bayern">Bayern</option>
  <option value="Berlin">Berlin</option>
  ...
  <option value="Thüringen">Thüringen</option>
</select>
<span class="postselect"> </span>

Im Stylesheet wird festgelegt, dass das Inline-Element span als Block-Level-Element dargestellt werden soll. Auf diese Weise ist es möglich, dem span-Element eine Breite zuzuweisen und es an der Unterseite mit einem Rahmen zu versehen, der denen für die input-Elemente in der vorangegangenen CSS-Regel gleicht:

<style type="text/css" media="print">
 select {
  display: none;
 }
 .postselect {
  display: block;
  width: 300pt;
  height: 1em;
  border: none;
  border-bottom: 1px solid #000;
 }
</style>

Für Elemente wie den Submit-Button, die in einer gedruckten Seite keine Verwendung haben, wird der Eigenschaft display der Wert none zugewiesen. Das druckfertige Formular sehen Sie in der nächsten Abbildung.

Gleiche Formular in Druckdarstellung

Abbildung: Das gleiche Formular in der Druckdarstellung.

Diskussion

Die Linien in einem Bestellformular zeigen dem Benutzer an, an welchen Stellen das Formular ausgefüllt werden soll. Mit der Eigenschaft border lassen sich diese Linien leicht in einem Browser erzeugen. Dadurch lassen sich Webformulare leicht online und offline nutzen.

Bei den select-Elementen ist das Vorgehen nicht ganz so geradlinig und weicht ein wenig vom idealen semantischen Markup ab. Trotzdem funktioniert das Ergebnis und wird auch weiterhin als gültiges HTML validiert. Stellen Sie dem select-Element hierfür ein span-Element nach:

<select name="bundesland" size="1">
  <option selected="selected">Bitte auswählen</option>
  <option value="Ba-Wü.">Baden Württemberg</option>
  <option value="Bayern">Bayern</option>
  <option value="Berlin">Berlin</option>
  ...
  <option value="Thüringen">Thüringen</option>
</select>
<span class="postselect"> </span>

Dann wird das select-Element per CSS-Regel versteckt:

select {
 display: none;
}

Schließlich definieren Sie das span-Element als Block-Element, damit die Eigenschaften für Höhe und Breite benutzt werden können. Sind diese Eigenschaften gesetzt, kann der untere Rahmen so eingestellt werden, dass er zu den übrigen Elementen des Formulars passt:

.postselect {
 display: block;
 width: 300pt;
 height: 1em;
 border: none;
 border-bottom: 1px solid #000;
}

Formularelemente mit Attribut-Selektoren unterscheiden

Sobald mehr Browser die Verwendung von Attributselektoren unterstützen, wird auch die Gestaltung von Formularen einfacher. Momentan unterstützen nur Mozilla, Firefox, Netscape Navigator 6+ und Opera 5+ Attributselektoren, der Internet Explorer leider noch nicht. Mit Attributselektoren kann man einfacher zwischen Formularelementen unterscheiden als mit Klassenattributen und deren Werten im Markup.

Im folgenden Beispiel wird die erste Regel nur auf input-Elemente für Text angewendet. Die zweite Regel versteckt den Submit-Button und das Auswahlmenü:

input[type="text"] {
 color: black;
 border-width: 0;
 border: 1px solid #000;
}
input[type="submit"], select {
 display: none;
}

Mehr Benutzerfreundlichkeit

Da der Abschicken-Button in der Druckversion des Formulars fehlt, benötigt der Benutzer zusätzliche Informationen, wie er Ihnen das Formular nach dem Ausdrucken und Ausfüllen zukommen lassen kann. Um das Formular um eine Postadresse zu erweitern, können Sie den folgenden Code verwenden:

<div id="print">
  <p>Bitte schicken Sie dieses Formular per Post an die folgende Adresse:</p>
  <address class="adr">
    <span class="org">
      <span class="organization-name">The White House</span>
    </span>
    <br />
    <span class="street-address work postal">1600 Pennsylvania Avenue NW</span>
    <br />
    <span class="locality">Washington, DC</span>
    <span class="postal-code">20500</span
    <br />
    <span class="country-name">USA</span>
  </address>
</div>

Beachten Sie, dass wir die zusätzlichen Anweisungen mit einem div-Element umgeben haben. Dessen Attribut class erhält den Wert print. Damit die Zusatzinformationen bei der Bildschirmdarstellung nicht mit angezeigt werden, setzen Sie den Wert der Eigenschaft display für den Medientyp screen auf none.

<style type="text/css" media="screen">
 .print {
  display: none;
 }
</style>

Im Stylesheet für die Druckausgabe ändern Sie die Darstellungsrolle für Elemente der Klasse print dagegen auf display: block:

<style type="text/css" media="print">
 .print {
  display: block;
 }
</style>

Siehe auch

Die Dokumentation zu Attributselektoren in der CSS 2.1-Spezifikation und die HTML 4.01-Spezifikation zum HTML-Tag label.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln