Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

Schritt 2: Das Formular per CSS gestalten

Mit ein paar einfachen CSS-Regeln gestalten Sie das Formular ein wenig ansprechender. Die Erklärung der einzelnen Definitionen folgt nach dem ToDo.

ToDo: Das Kontaktformular per CSS gestalten
  1. Öffnen Sie das Stylesheet bildschirm.css und fügen Sie ganz unten in Abschnitt 4 für sonstige Styles die folgenden Zeilen hinzu:

    /* Das Kontaktformular */
    form {
      background-color: #eee;
      width: 370px; /* Breite des Formulars */
      padding: 20px;
      border: 1px solid #8c8c8c;
    }
    label { /* Beschriftung auf eigener Zeile */
      display: block;
      cursor: pointer; /* Mauszeiger wird zur Hand */
    }
    input#absender,
    textarea {
      width: 300px;
      border: 1px solid #8c8c8c;
      margin-bottom: 1em;
    }
    textarea {
      height: 7em;
    }
    input:focus,
    textarea:focus {
      background-color: #d9d9d9;
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseite im Browser.

So sieht das Formular jetzt aus:

Abbildung 9.9: Das gestaltete Formular
Abbildung 9.9: Das gestaltete Formular

Und hier die CSS-Regeln im Überblick:

  • Als Selektor für das Formular nehmen Sie den Typ-Selektor form. Gestaltet werden Hintergrundfarbe, Breite, Polsterung und Rahmenlinie. Alles inzwischen schon fast alte Bekannte.
  • In der zweiten Regel wird das Inline-Element label zum Block-Element befördert. Dadurch rutscht das Formularfeld in eine neue Zeile, und Sie haben für die Beschriftung so viel Platz, wie Sie benötigen.
  • Die Deklaration cursor: pointer; bewirkt, dass der Mauszeiger wie bei einem Hyperlink zur Hand wird, wenn er über der Beschriftung schwebt. So merkt der Benutzer leichter, dass er klicken kann, um den Cursor in das Formularfeld zu platzieren.
  • Das Eingabefeld input#absender für die E-Mail-Adresse und das Kommentarfeld textarea werden gemeinsam formatiert: 300 Pixel breit, mit einer dünnen Rahmenlinie und einem Außenabstand nach unten von 1em.
  • Das Kommentarfeld textarea bekommt in der nächsten Regel zusätzlich noch eine Höhe von 7em, sodass es bei einer Vergrößerung der Schriftart ebenfalls mehr Platz bietet.
  • Die letzte Regel weist den Formularfeldern mit der Pseudoklasse :focus eine Hintergrundfarbe zu, wenn der Benutzer etwas in das Formularfeld schreibt. Das funktioniert zwar nicht in allen Browsern, verursacht bei Nichtfunktionieren aber keinerlei nachteilige Effekte.
Nach oben