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 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.

Nützliche Website zu HTML-Formularen

Wenn Sie ein Kontaktformular erstellen möchten, schauen Sie mal auf der folgenden Website vorbei: 

Auf dieser seit Jahren von Michael Knothe gepflegten Website finden Sie nicht nur ein PHP-Programm zum Abschicken der Formulardaten, sondern auch diverse Vorlagen zur Erstellung des Formulars. Das so erstellte Formular entspricht der EU Datenschutz-Grundverordnung (DSGVO) und hat ein responsives Design.