Formulare

Zum versenden von Daten sind Formulare klasse. Es gibt verschiede Eingabefelder

Für Text z.B.

<input type="Text" name="vorname" value="" size="30" maxlength="50">

Um alle Eingabefelder zu versenden (sind ja im Normalfall mehr als eins), wird ein Formular um die Eingabefelder geschachtelt.

als Beispiel:

<form action="" method="" target="">

<input type="Text" name="vorname" value="" size="30" maxlength="50">

</form>

Damit er weiß, wohin er senden soll, muß das in die Form-Action dies vermerkt werden


<form action="mailto:deine@e-mail-adresse.de" method=post enctype="text/plain">

<input type="Text" name="vorname" value="" size="30" maxlength="50">

</form>

Und zu guter Letzt brauchen wir noch einen Submit-Button, daß losgesendet wird.


<form action="mailto:deine@e-mail-adresse.de" method=post enctype="text/plain">

<input type="Text" name="vorname" value="" size="30" maxlength="50">

<input type="Submit" name="absenden" value="absenden">

</form>

So, das wars. Damit sollte die E-Mail auf den Weg geschickt werden, sofern bei Sender das E-Mail-Programm sauber installiert ist. Das ist auch der Nachteil bei der Geschichte. Um ein Beispiel zu sehen, um diesen Nachteil zu umgehen, einfach in den Quellcode von www.feed-back.de reinschauen.


Bei folgenden Beispielen einfach in den Quellcode reinschauen. Dann dürfte der Aufbau klar sein.

die Elemente zur Formulargestaltung

Um im Internet eine Kommunikation mit dem Benutzer aufzubauen, werden Formulare verwendet. Dazu gibt es verschiedene Standardelemente, die die Kommunikation vereinfachen sollen.

Texteingaben

- einzeilige Textfelder, zur Eingabe von beliebigem Text

- Paßwortfelder, ähnlich dem einzeiligen Textfeld, allerdings werden gemachte Eingaben nur mit Sternen angezeigt

- mehrzeilige Textfelder. Wird mehr Text eingegeben, als das Textfeld darstellen kann, erscheint auf der rechten Seite ein Rollbalken, mit dem man den verdeckten Text sichtbar machen kann.

Auswahlfenster, über das ein vorgegebener Text ausgewählt werden kann. Eigene Eingaben sind nicht vorgesehen.

Auswahl-Kästchen

weiblich    männlich    keine Angaben   
runde Auswahl-Punkte, in den nur eines von den Angeboten möglich ist. Wird ein anderes angeklickt, wird die erste Selektion aufgehoben und das neu angeklickte wird markiert.

Bücher lesen Musik hören Filme sehen
Bei diesen Kästchen sind mehrere Selektionen möglich.

Schaltflächen

Über Schaltflächen sind Aktionen möglich. So z.B. daß Fragen übersprungen werden, bzw. die Eingaben abgeschlossen und versendet werden. Folgende Schaltflächen sind in Formularen zu finden:

Diese Schaltfläche ist normalerweise immer vorhanden. Formulare zeichnen sich noch aus, daß es "Absenden-Schaltfläche" zum Schluß erscheint. Die gemachten Eingaben werden abgeschlossen, gegebenenfalls überprüft und abgesendet.

Oft sieht man auch eine Schaltfläche, um die eingegebenen Informationen zu löschen. Von diesem Element ist abzuraten, da erfahrungsgemäß viele Benutzer versehentlich diese Schaltfläche anklicken, in der Annahme, daß sie ihre Daten versenden. Alle Daten werden gelöscht und nichts versendet. Wenn der Benutzer seinen Irrtum bemerkt, muß er nochmals alles eingeben. Besonders bei größeren Formularen wird er das beim zweiten mal weniger ausführlich machen, wenn er überhaupt noch dazu bereit ist.

Grundlegendes

Ein dem Standard entsprechender Gebrauch besonders bei den Auswahl-Kästchen ist wichtig, da es den Komfort erhöht, wenn es dem gewohnten und erwarteten Verhalten entspricht.

Wird ein nicht standardmäßiger Gebrauch erzwungen, was technisch problemlos machbar ist, kann es den Benutzer verwirren und von der eigentlichen Aufgabe abhalten - das Formular auszufüllen.

vorheriges Kapitel: flaue Bilder aufmotzen
nächstes Kapitel: Frames
flaue Bilder aufmotzenSeitenanfangFrames
eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2012 Axel Pratzner • www.html-seminar.de • Stand 15.01.2012
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de