Formular Erklärung 01
    
 Home • Formulare • Formulare Quellcode 

 Formularbeispiel 01
01 02 03 04 05
Das Formular für den Anfang. Das Basisformular soll 4 Eingabefelder haben. 3 Texteingabefelder sind einzeilig, eines ist mehrzeilig. Ein Sende-Button soll den Versand per Email auslösen.
Basisformular 01 ohne Prüfungen - Erklärung des Aufbaus

In diesem Basisformular 01 wird erst einmal auf eine Prüfung gültiger Eingaben verzichtet. Lediglich der Aufbau eines simplen Formulars soll erläutert werden.

Später, in einem separaten Beispiel (Basisformular 02), wird eine Prüfung einzelner Eingaben hinzu gefügt.


Formularvorlagen finden Sie im Menü 5 Formularvorlagen


   Der Aufbau

Diese Elemente soll das Formular haben:
  • 3 einzeilige Felder (<input>)
  • 1 mehrzeiliges Feld (<textarea>)
  • 1 Sende-Knopf (Submit-Button)
Zwischen den eigentlichen <form>-Tags werden die HTML-Tags für die Elemente eingetragen. 
<form>

<input type="text">
<input type="text">
<input type="text">
<textarea></textarea>
<input type="submit" value=" senden">

</form>
Angaben für die Größe werden eingetragen 
<form>

<input type="text" size="30" value="">
<input type="text" size="30" value="">
<input type="text" size="30" value="">
<textarea cols="30" rows="4" ></textarea>
<input type="submit" value=" senden">

</form>
Im einleitenden <form>-Tag werden Informationen für die auszulösnde Aktion (Versand per Email), die Methode und Angaben für die Textverschlüsselung eingetragen. 
<form action="mailto:JuppZupp@abc.de" method="post" enctype="text/plain">

<input type="text" size="30" value="">
<input type="text" size="30" value="">
<input type="text" size="30" value="">
<textarea cols="30" rows="4"></textarea>
<input type="submit" value=" senden">

</form>
Vor den Eingabefeldern soll ein Text angezeigt werden, der andeutet welche Einträge erwartet werden. 
<form action="mailto:JuppZupp@abc.de" method="post" enctype="text/plain">



Vorname

Nachname 

Email

Text



 <input type="text" size="30" value="">

 <input type="text" size="30" value="">

 <input type="text" size="30" value="">

 <textarea cols="30" rows="4"></textarea>

 <input type="submit" value=" senden">




</form>
Um Text und Formularelemente fein säuberlich und geordnet anzuzeigen, kann man das alles mit CSS formatieren oder innerhalb einer Tabelle plazieren. Die HTML-Tags dazu zeige ich der Übersichtlichkeit halber hier nicht an, sind aber in der Textdatei für den Quelltext vorhanden.


   Das Formular

  • 3 Textfelder sind einzeilig
  • Ein Eigabefeld wird mehrzeilig angezeigt.
  • Ein Submit-Button löst den Versand duch Email aus

Vorname:  
Nachname:  
E-Mail: 
Text: 
 
 

Bitte bedenken sie, das man den Besucher mit unnötigen Pflicht-Eingaben beim Ausfüllen eines Formulars abschreckt. Die Abfrage einer Adresse oder der Telefonnummer sollte man nur erzwingen, wenn die Daten auch wirklich benötigt werden (z.B. als Versandanschrift).


   Empfänger-Emailadresse

Das einleitende Form-Tag für ein Formular das per Email versand werden soll, hat das Attribut 'action=mailto:'. Dort wird die Efänger-Emailadresse notiert: 
<form action="mailto:JuppZupp@abc.de" method="post" ...
Der Versand per Email wird ausgelöst sobald der Sende-Button (Submit-Button) angeklickt wird. Damit die Post auch ankommt müssten sie im Formular natürlich auch die entsprechende Empänger-Emailadresse notieren.

Der Eintrag JuppZupp@abc.de muss durch die echte Emailadresse des Empängers ersetzt werden, sonst kommt die Post bei Jupp Zupp an.


Ein Formular kann nur dann aus einem HTML-Dokument abgesandt werden, wenn der Mail-Client des benutzten Browsers entsprechend konfiguriert ist.

Für den Fall, dass der Absender Schwierigkeiten mit dem Formularversand hat, sollten sie als Alternative eine Emailadresse anzeigen. Zum Spamschutz vorzugsweise als geschützen Textstring oder als Grafik.

Siehe auch: Spiderschutz Textdarstellung     Formulare sinnvoll einsetzen


Mit diesem Formular möchte ich lediglich den Aufbau erklären. Nutzen sie es bitte nicht für ihre Seite. Es bietet keinerlei Schutz vor Email-Spidern und Absendung durch Roboter. Formulare für den Einsatz finden sie Menü 2



   Schutz vor Email-Spidern

Diese Art der Notierung der Emailadresse in einem Formular bietet absolut keinen Schutz vor Spam-Robots, die im Quelltext von Webseiten nach Emailadressen suchen.

Siehe dazu: Basiswissen Spam

Das übliche einleitende Form-Tag zeigt die Emailadresse als zusammenhängenden Text.
<form action="mailto:IhreAdresse@web.de" method="post" ...
Das macht es den Email-Sammlern zu leicht!