HTML lernen - Formulare - Das Grundgerüst

Im Web gibt es eine Vielzahl an Formularen. Egal, ob Sie sich irgendwo registrieren, einen Gästebucheintrag hinterlassen oder eine Kontaktanfrage an den Webmaster senden wollen, überall kommen HTML-Formulare zum Einsatz.

Hinweis: Damit diese Formulare allerdings auch einen Nutzen haben und nicht einfach nur abgesendet werden können und nichts geschieht, wird eine weitere Programmiersprache, wie z.B. PHP, Perl, Python (erlauben das Verarbeiten und Speichern von Formulareingaben) oder JavaScript (erlaubt Seitenmanipulationen mit Hilfe von Formularen), benötigt. Da diese Programmiersprachen erst nach dem Erlernen von HTML oder CSS näher betrachtet werden sollen, dient dieses Kapitel lediglich der Vollständigkeit aller HTML-Codes und -Elemente.

Der form-Tag

Um ein Formular, das später auch abgesendet werden kann, zu erstellen, wird der form-Tag benötigt. Dieser stellt im Grunde das Grundgerüst des Formulars dar. Innerhalb des form-Codes müssen alle Formularfelder zu finden sein, die zu diesem Formular gehören.

Auf einer Website können mehrere Formulare sein, deswegen begrenzt form des jeweilige Formular.

Beispiel:

<form>
 Formular 1 mit Formularfeldern...
</form>
<br>
<br>
<form>
 Formular 2 mit Formularfeldern...
</form>

Hinweis: Innerhalb des form-Codes dürfen nahezu alle HTML-Codes, wie z.B. Links, Bilder Absätze, usw. stehen.

Attribute des form-Tags

• action: Dieses Attribut ist bei Formularen, die auch wirklich abgesendet werden sollen und nicht mit JavaScript bearbeitet werden, wichtig. Es gibt den Pfad zu der Datei an, die die gesendeten Daten verarbeiten und eventuell speichern soll.
  Achtung: Beachten Sie dazu das Kapitel "Dateipfade", das wir bereits weiter vorne in diesem Tutorial betrachtet haben!
  Hinweis: Hier kann auch mailto:meine@emailadresse.de angegeben werden. Dann versucht das Formular über Ihr E-Mail-Postfach eine E-Mail mit den Formulareingaben an diesen Empfänger zu senden. Es sollten dazu noch method="post" enctype="text/plain" in den form-Tag eingefügt werden. Alle anderen Attribute und Werte sind hier überflüssig. in
• method: gibt die Sendemethode an. Hier gibt es nur zwei mögliche Werte: post für das POST-Verfahren und get für die Übermittlung der Daten über die Adresse. Mehr dazu erfahren Sie bei den "richtigen" Programmiersprachen.
• target: gibt an, wo sich die unter action angegebene URL öffnen soll. Werte für dieses Attribut sind _blank für ein neues Fenster, _top für das aktuelle Fenster, _self für das aktuelle Fenster, _parent für das aktuelle Fenster.
  Achtung: Momentan haben _top, _self und _parent noch keinen Unterschied für Sie. Dieser wird Ihnen erst später gezeigt.
  Hinweis: Wenn die Seite, die durch den Link geöffnet wird, im selben Fenster angezeigt wird, brauchen Sie target nicht anzugeben!
• enctype: Dieses Attribut ist in der Regel nur nötig, wenn man einen Dateiupload anbieten möchte, welcher auch wieder nur durch die "richtigen Programmiersprachen" bearbeitet werden kann. Für einen Dateiupload erhält enctype den Wert multipart/form-data