 Formulare Erklärung 1 - <form>-Tag + Attribute
Die Erklärung zu Formularen habe ich auf 2 separate Seiten aufgeteilt. Auf (dieser) ersten Seite beschäftige ich mich mit dem Grundgerüst eines Formulars und den Attributen des <form>-Tags.
Das Grundgerüst
Innerhalb des Grundgrüsts eines Formulars können sie verschiedene Formularelemente notieren. Das <form>-Tag selbst bietet darüber hinaus die Möglichkeit, unterschiedliche Attribute einzutragen. Deren Einsatz ist immer abhängig von der Verwendung und auch von der Art der Weiterverarbeitung, genauer von der Aktion, die beim Klicken des Absende-Buttons ausgeführt werden soll.
<form attribut attribut attribut >
hier stehen die Formularelemente
</form>
Mit einem Formular wollen sie die eingetragenen Informationen entweder
a) an Ort und Stelle verarbeiten (z.B. Berechnungen durchführen)
b) an Ort und Stelle mittels Emailprogramm versenden
c) oder zum Server schicken und dort weiter verarbeiten lassen
'An Ort und Stelle' bedeutet hier, dass die Aktionen auf dem Computer ausgeführt werden, der die Seite gerade anzeigt. (Die Fachleute sagen 'clientseitig')
Attribute im <form>-Tag
Was mit den Formularinhalten geschehen soll wenn der 'Sende-Button' angeklickt wird ist im Attribut 'action' (Aktion) festgelegt. Wie die Formularinhalte verarbeitet werden sollen ist im Attribut 'method' (Methode) festgelegt.
<form action="" method="" ... >
Welche Attribut-Werte eingetragen werden ist also abhängig von der gewünschten Aktion die beim Senden ausgeführt werden soll und der Methode dieser Aktion. Was die unterschiedlichen Attribut-Einträge bedeuten, habe ich weiter unten zusammengefasst.
Vorweg erst einmal die Beispiele für Attributeinträge bei Formularen zur lokalen Weiterverarbeitung (z.B. Berechnungen) und Formularen zur Übermittlung von Daten (z.B. bei einem Kontaktformular):
1) Formular für Entgegennahme von Benutzereinträgen
<form action="javascript:Benzinverbrauch()">
Im optionalen Attribut 'action' kann ein Scriptaufruf eintragen werden.
2) Formular für den Versand als E-Mail
<form action="mailto:Emailadresse@xyz.de" method="post">
Als Wert für 'action' wird mailto: + Emailadresse eingetragen.
3) Formular für den Versand - PHP-Kontaktformular
<form action=""kontakt.php" method="get">
Für 'method' kann 'get' oder 'post' eingetragen werden.
4) Formular für den Versand als CGI
(CGI=Common Gateway Interface, Programm auf dem Server eines Providers)
<form action="../cgi-bin/suche.pl" method="get">
Für 'method' kann 'get' oder 'post' eingetragen werden.
Die ersten beiden Formulartypen leiten Aktionen ein, welche dann lokal ('an Ort und Stelle') ausgeführt werden (Berechnung, Prüfung, Ausgabe, Versand per Email-Client, ...). Die letzten beiden Formulartypen leiten vor Ort lediglich den Versand der Daten zum Server ein, wo dann die eigentlichen Arbeit geleistet wird.
Übersicht Formular-Attribute
action
Das action-Attribut legt fest, welche Aktion beim Anklicken des Sende-Buttons ausgeführt wird. Das action-Attribut hat bei Formularen oft die Funktion eines Verweises. Dort kann eine URL für eine Seite eingetragen sein, welche nach dem Versenden angezeigt werden soll. Der eingetragene Wert kann auch auf das Programm verweisen, welches die Formulardaten weiter verarbeiten soll. Das können z.B. CGI-Anwendungen / PHP-Scripte, E-Mail-Programme sein.
method
Das method-Attribut legt fest, nach welcher Methode das Formular weiter verarbeitet wird. Als Wert sind post oder get erlaubt.
post wird in einem HTML-Dokument verwendet, wenn der Inhalt eines Formulars mit einem Email-Client (Outlook, Pegasus,..) als E-Mail versendet werden soll. Die Einträge werden an das Emailprogramm übergeben.
post in einem CGI- / PHP-Dokument bedeutet, dass der Formularinhalt wie eine Benutzereingabe in der Komandozeile verarbeitet wird. Die Einträge werden an das Programm-Modul auf dem Server übergeben.
get in einem CGI- / PHP-Dokument bedeutet, dass der Formularinhalt auf dem Server durch eine CGI-Anwendung/CGI-Script oder durch den PHP-Interpreter weiter verarbeitet werden soll. Die Einträge werden an das Programm-Modul auf dem Server übergeben.
name
Im name-Attribut können sie einen Namen für das Formular festlegen. Über den Formularnamen kann man dann später das Formular oder einzelne Formularelemente über den Formularnamen ansprechen. Anschaulich: Das erste Eingabefeld im Formular mit dem Namen 'formular01'
id
Im id-Attribut können sie einen Indentifikator (identifier) für das Formular festlegen. So wie beim Formularnamen kann man so über die ID das Formular oder einzelne Formularelemente ansprechen. Anschaulich: Das erste Eingabefeld im Formular mit der ID 'Berechnungsformular05'
enctype
Oft vergessen: Der Eintrag enctype="text/plain"
Das enctype-Attribut bestimmt welcher Art die Daten des Formulars sind. Als Wert können sie hier die Media-Typen eintragen. Zum Versenden von E-Mails ist das normalerweise der Wert/Typ 'text/plain'. Damit wird festgelegt, das es sich um reinen Text handelt (engl. plain = rein, deutlich | sprich: pläin)
Beim Formular für Eingabe / Ausgabe und Weiterverarbeitung
Das Formular dient als Oberfläche für die Entgegennahme von Daten, die für die Weiterverarbeitung / Berechnung gedacht sind. Das Formular kann auch als Oberfläche für die Ausgabe von Daten gedacht sein, die durch ein Script ermittelt wurden.
- die vom Seitenbesucher eingetragenen Informationen sollen dem Script übergeben werden und / oder
- die vom Script ermittelten Werte sollen auf der Seite dargestellt / angezeigt werden.
In einem Formular das lediglich zur Ein- Und Ausgabe von Informationen innerhalb einer Seite gedacht ist, fällt in der Regel das Attribut 'method' ganz weg und das Attribut 'action' ist nur bei Bedarf einzutragen. Stattdessen wird immer, um das Formular direkt ansprechen zu können, entweder das Attribut 'name' oder das Attribut 'id' benötigt.
<form name="DatumsForm" ... >
hier stehen die Formularelemente
</form>
<form id="Formular01" ... >
hier stehen die Formularelemente
</form>
Beispiele
Formular für den Versand - Email und Text
Formular als Ein- / Ausgabebereich - Wochentag berechnen
|
WWW.WEB-TOOLBOX.NET
ZURÜCK