Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Formulare in HTML-Webseiten – der HTML-Befehl <form>

Alle Formularfelder (die wir erst den folgenden Kapiteln kennenlernen) werden in den grundlegenden Aufbau für Formulare zwischen den HTML-Befehl <form> und den abschließenden HTML-Befehl </form> gepackt.

<form>
<!--
Einzeiliges Feld für Nachnamen
Mehrzeiliges Eingabefeld für Anfragegrund
…
Absendebutton
-->
</form>

Verarbeitung der vom Formular übermittelten Daten

Um gleich vornweg die Illusion zu nehmen, dass durch ein reines HTML-Formular viel passiert hier gleich der Hinweis. HTML ist für die Struktur zuständig. Die Verarbeitung der durch das HTML-Formular übermitteln Daten benötigt dann auf dem Server PHP oder eine andere Programmsprache, die dann mit den Daten irgendetwas anstellt. Daher kann in HTML nur gezeigt werden, wie man korrekt Formulare aufbaut. Die Verarbeitung kann man sich im PHP-Kurs (www.php-kurs.com) dann ansehen. Aber zurück zum Aufbau über HTML – denn dies ist grundlegend wichtig (sonst benötigt man auch keine Möglichkeit zur Weiterverarbeitung).

<form und seine Attribute

Schauen wir uns den exakten Aufbau von <form und die möglichen Attribute an. Grundsätzlich kann man <form ohne jede Attribute verwenden. Werden keine Attribute angegeben, wird ein bestimmtes Standardverhalten erzeugt.

<form action=""> - was passiert nach dem Absenden?

Was passiert eigentlich nach dem Absenden eines Formulars. Haben wir nichts angegeben, wird die gleiche URL aufgerufen und dieser die Formulardaten übermittelt. Möchten wir aber, dass die Formulardaten einer anderen URL übermittelt werden, dann müssen wir diese URL über ein Attribut angeben.

Wir können über action="" die URL mitgeben, wie nach dem Absenden des Formulars aufgerufen wird. Im folgenden Beispiel wird die URL mit „auswertungsprogramm.php“ aufgerufen.

<form action="auswertungsprogramm.php">
<!--
Einzeiliges Feld für Nachnamen
Mehrzeiliges Eingabefeld für Anfragegrund
…
Absendebutton
-->
</form>

Übertragungsmethode get/post

Neben dem Ziel kann auch die Methode der Übertragung festgelegt werden. Hierzu muss man wissen, dass die Daten aus dem Formular entweder über die URL übermittelt werden können (was dann der Besucher auch sieht) oder im Hintergrund über „post“. Geben wir hier keine Angabe an, wird als Standard „get“ verwendet.

<form action="auswertungsprogramm.php" method="post">

Oder einfach nichts angeben oder „get“:

<form action="auswertungsprogramm.php" method="get">

Nichts angeben bedeutet, dass selbst das Attribut „method“ nicht angegeben wird. Dieses darf nicht leer sein!

Als Hinweis: „get“ ist die unsichere Methode, was 2 Gründe hat:

  • Die Datenmenge bei „get“ ist begrenzt
  • Der Websitebenutzer kann einfach in die URL und die Daten ändern und nochmals übertragen lassen, was zu Chaos im Auswertungsprogramm führen kann

enctype nur Text oder zusätzlich mit Dateianhänge

Als drittes Attribut gibt es enctype. Haben wir nur Textfelder, können wir dieses Attribut einfach komplett weglassen. Als Standard wird von nur Textfeldern ausgegangen. Ansonsten wäre die Angabe:

<form action="" method="post" enctype="text/plain">

Es gibt die Möglichkeit auch Dateien zu übertragen: Dann muss hier der enctype angegeben werden!

<form action="" method="post" enctype="multipart/form-data">

Das wird man spätestens beim Erstellen des PHP-Auswertungsprogramms dann einstellen!

Mehrere Formulare auf einer Website

Wenn man an Formulare denkt, fällt einem sehr oft als Erstes ein Kontaktformular ein. Das ist durchaus sehr üblich, aber bereits ein kleines Suchfeld ist ein Formular. Ein Formular kann bereits aus nur einem Feld bestehen, wenn dieses die gewünschte (in dem Fall gesuchte) Information überträgt.

Es kann also mehrere verschiedene Formulare auf einer Webseite nebeneinander existieren wie im genannten Beispiel:

  • ein Eingabefeld für die Suche
  • Für das Kontaktformular beispielsweise ein mehrzeiliges Textfeld für Anfragegrund und ein Textfeld für die E-Mail-Adresse

Um jetzt die verschiedenen Formulare voneinander abzugrenzen, werden alle zusammengehörige Formularfelder zwischen den HTML-Befehl <form und </form gepackt:

Beispiel:

<form>
<!-- alle Felder für Suchfunktion -->
</form>

<p>Zwischen den verschiedenen Formularen kann irgendein Text etc. kommen</p>

<form>
<!-- alle Felder für Kontaktformular -->
</form>

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe