Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

Schritt 1: Das Formular im HTML-Quelltext

Die Kontaktseite wartet bereits seit geraumer Zeit auf ein Kontaktformular, das sie jetzt bekommen soll.

ToDo: Ein einfaches HTML-Kontaktformular erstellen
  1. Öffnen Sie die Beispielseite kontakt.html im Editor.
  2. Fügen Sie im Textbereich unterhalb der h2-Überschrift Kontakt die folgenden Zeilen ein (der dort vorhandene Absatz kann weg):

    <form id="kontaktformular" name="kontaktformular" action="">
    <div>
      <label for="absender">Ihre E-Mail-Adresse:</label>
      <input type="text" id="absender" name="absender" />
    </div>
    <div>
      <label for="nachricht">Ihre Nachricht:</label>
      <textarea id="nachricht" name="nachricht" cols="20" rows="5"></textarea>
    </div>
    <div>
      <input type="submit" value="Abschicken" />
    </div>
    </form>

  3. Speichern Sie die Webseite und betrachten Sie sie im Browser.

Dieser Quelltext erzeugt ein Formular mit einem einzeiligen Eingabefeld für die E-Mail-Adresse, einem mehrzeiligen Bereich für den Text und einer Schaltfläche zum Abschicken des Formulars. Nicht
hübsch, aber alles da:

Abbildung 9.8: Das ungestaltete Formular
Abbildung 9.8: Das ungestaltete Formular

id und name mit identischen Werten

Fast alle Formularfelder haben sowohl eine ID (id="") als auch einen Namen (name="") mit identischen Werten. Die ID benötigen Sie für die Beschriftung mit label und zur Gestaltung per CSS, das Attribut name zur Auswertung der Formulardaten und für die Zeile JavaScript etwas weiter unten.

Beschriftung der Formularfelder mit label

Die Beschriftung der Formularfelder steht im Element label. Das Attribut for bezieht sich auf die ID des zu beschriftenden Formularfelds, wodurch eine logische Verbindung zwischen Beschriftung und Formularfeld hergestellt wird.

Ein netter Nebeneffekt dieser Vorgehensweise ist, dass der Benutzer auf die Beschriftung klicken kann, um das Formularfeld zu aktivieren. Besonders bei Optionsfeldern und Kontrollkästchen ist das sehr praktisch. Da der Mauszeiger sich aber nicht wie bei einem Link verändert, wenn er über dem Label schwebt, weiß das kaum ein Benutzer. Da werden Sie gleich bei der Gestaltung des Formulars ein klein wenig nachhelfen.

textarea ohne Leerstelle zwischen Anfangs- und Ende-Tag

Zwischen dem Anfangs-Tag <textarea ...> und dem Ende-Tag </textarea> sollte nichts stehen. Kein Leerzeichen, kein Zeilenumbruch, kein gar nichts. Viele Browser setzen den Cursor sonst beim Ausfüllen des Formulars nicht an den Anfang des Felds, sondern mitten hinein, was ziemlich nerven kann.

Details zu HTML-Formularen

Falls Sie das Kontaktformular erweitern möchten, finden Sie bei SelfHTML weitere Informationen: