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
Sie befinden sich: Startseite » HTML lernen – Website erstellen & strukturieren » Formulare <form>

Formulare

Zum Versenden von Daten sind Formulare klasse. Es gibt verschiedene Arten von Eingabefeldern, die entsprechende HTML-Befehle benötigen.

Ein Eingabefeld für ein Formularfeld zur einzeiligen Texteingabe hat folgenden Aufbau als HTML-Befehl:

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

Um die Inhalte der Eingabefelder (es werden im Normalfall mehr als eins sein) versenden zu können, wird der grundlegenden HTML-Befehl für Formular <form> um alle vorhandenen Eingabefelder geschachtelt.

als Beispiel:

<form action="" method="">
<input type="text" name="vorname" value="" size="30" maxlength="50">
</form>

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

<form action="mailto:deine@e-mail-adresse.de" method="post">
<input type="text" name="vorname" value="" size="30" maxlength="50">
</form>

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

<form action="mailto:deine@e-mail-adresse.de" method="post">
<input type="text" name="vorname" value="" size="30" maxlength="50">
<input type="Submit" name="absenden" value="absenden">
</form>

So, das war es. Damit sollte die E-Mail auf den Weg geschickt werden, sofern beim Besucher dessen E-Mail-Programm sauber installiert ist. Falls der Besucher in einem Internetcafé sitzt, wird es schon problematisch bzw. funktioniert es nicht. Das ist auch der Nachteil bei der Geschichte.

Bei nachfolgenden 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, welche die Kommunikation vereinfachen sollen.

Texteingaben

- einzeilige Textfelder, zur Eingabe von beliebigem Text

- Passwortfelder, ä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. das 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, dass es „Absenden-Schaltfläche“ zum Schluss 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, dass sie ihre Daten versenden. Alle Daten werden gelöscht und nichts versendet. Wenn der Benutzer seinen Irrtum bemerkt, muss 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.

Weiterempfehlen • Social Bookmarks • Vielen Dank

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:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

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

    Mehr Details