HTML verstehen Teil 9: Das Formular V

<select>-Tag: Dropdownfelder

Ein Formularfeld in das Sie keine Texte eingeben können, das sich aber gut zur Auswahl von Alternativen eignet ist das sog. Dropdownfeld. Es hat folgende Gestalt:

Hier können Sie sich das Coding des Feldes ansehen:

<select name=“waehrung“>
 <option value=“euro“>Euro </option>
 <option value=“dollar“>Dollar</option>
 <option value=“pfund“>Pfund</option>
</select>

Sieht kompliziert aus, oder?

Ein Dropdownfeld wird eingeleitet mit einem <select>-Tag und endet mit einem </select>-Tag! Innerhalb dieser Tags werden die sogenannten Optionen des Feldes angeben. Da das <select>-Tag zumindest ein name-Attribut hat, und die Optionen ein value-Attribut, ist klar was das Hintergrundprogramm beim Absenden des Formulars erhält: Hier in der Variablen waehrung den Wert der ausgewählten option also z.B. dollar

So kennen Sie vielleicht schon das Dropdownfeld. Man kann aber noch einiges andere dem Benutzer anbieten, was man aber ggf. ihm auch erläutern muss. So gibt es bei diesem Feld auch die Möglichkeit der Mehrfachauswahl

Wenn Sie in dem <select>-Tag angeben multiple=“multiple“ dann haben Sie die Mehrfachselektion eingeschaltet. Der Leser kann dann mit der alt oder strg Taste gedrückt und einem Klick mehrere Optionen auswählen. Hier werden nun alle Alternativen angezeigt. Sie können dies aber durch ein size-Attribut verkleinern.

Wenn Sie obiges Coding nehmen und so anpassen,

<select name=“waehrung“ multiple=“multiple“ >
 <option value=“euro“>Euro </option>
 <option value=“dollar“>Dollar</option>
 <option value=“pfund“>Pfund</option>
</select>

stellt sich das Feld anders dar:

Sie sehen, der rechte Rand des Feldes ist nicht eingabebereit, da alle Alternativen angezeigt wurden. Mit einer Angabe von size=“2″ würde sich das ändern! Probieren Sie es doch mal aus.

Sie können bei dem Text zwischen den <option>-Tags leider keine Tabelle angeben, wo Sie z.B. für die Auswahl noch einen erklärenden Text dazu schreiben könnten. Sie müssen sich mit Zeichen wie | oder Ersatzzeichen wie &rArr [&rArr;] begnügen. Die Möglichkeiten des Webs sind halt gegenüber den Betriebssystemen etwas eingeschränkt 🙁

[Hinweis für PHP-Programmierer]
Um eine Mehrfachauswahl in PHP im Hintergrund zu realisieren müssen Sie als name den Namen eines Arrayfeldes angeben: Also hier z.B. name=“waehrung[]“, dann wird beim Absenden die Array-Variable im $_POST[‚waehrung‘,0] bis $_POST[‚waehrung‘,3] geladen.

Zurück zur Auswahl…

Formulare mit CSS

Die Unterstützung des Formulars mit CSS ist eines der Highlights des CSS. Bei den Tags <input>, <select>, <textarea> können Sie mittels style-Attribut und CSS-Syntax die Felder gestalten:
Schauen Sie sich doch bitte hier dieses Beispiel bei Selfhtml an.
Das zugehörige Coding können Sie entweder durch klick auf den Text „zurück“ oder durch diesen Link anschauen.
Hier wird mit CSS Klassen gearbeitet, um nicht andauernd lange style-Attribute schreiben zu müssen.

Hier ein Bild dieses bei Selfhtml gezeigten Formulars!

Es würde den Rahmen sprengen, wenn ich hier noch weiter auf CSS weiter eingehen würde. „HTML-verstehen“ soll Sie ja nicht in CSS sondern in HTML einführen.
So überlasse ich auch die Formularprüfung mit Javascript der Zukunft, will aber noch ein Attribut, das in jedem der Formular-Tags vorkommen kann erwähnen.
Das id=“xxx“-Attribut!
Dieses Attribut dient sowohl CSS als auch Javascript um bestimmte Tags auf Ihrer Seite zu erkennen. So können Sie einem Formular im <form>-Tag eine id=“myform“ geben und sich in Javascript und in CSS darauf beziehen. Diese ID darf aber nur einmal auf einer Seite auftauchen, es muss also über die HTML-Seite eindeutig sein.
Dann können Sie z.B. mit der Javascriptanweisung document.getElementById(„myform“) das Form-Tag finden und mit der Javascriptsprache anpassen.

Formularprüfung mit Javascript

Bevor ich es vergesse! Ich habe Ihnen in Teil 1 zum Formular versprochen, dass ich Ihnen noch zeige, wie man ein Formular mit Javascript prüft. Ich brauche dazu gar nicht weit zu schauen.

Klicken Sie doch bitte mal auf das Buchbild der gratis-ebooks am rechten Rand! Sie kommen auf eine Seite mit dem OptIn-Formular für dieses eBook!
Jetzt öffnen Sie bitte den Quelltext dieser Seite und suchen (mit <strg>F) nach dem Wort „checkform“. Sie gelangen auf die Anzeige einer Anweisung „function checkform();“
Hier sehen Sie jetzt in Javascript dass der Vorname geprüft wird und eine Grobprüfung der Email. Durch die Angabe document.bestellung.vorname.value wird nun im Dokument – sprich Ihrer Seite – der Name „bestellung“ gesucht. Das ist der Name eines Formulars, das wir uns gleich anschauen. Dort wird weiterhin „vorname“ gesucht und der Wert genommen. Vorname ist das name-Attribut eines <input>-Tags. Somit haben wir den Wert, was in das Feld „vorname“ eingegeben wurde.
Falls dieser Wert leer ist, erfolgt eine alert-Fehlermeldung aus dem Javascript heraus. Es erscheint im Browser ein keiner Dialog mit einem Text. Sie sehen weiter, dass
2 mal ein Rücksprung erfolgt ein return false und ein return true. Ist true gegeben, war alles OK, und das Formular wird an den Server übertragen, andernfalls wird das Formular wieder angezeigt. Das ist die Logik die dahinter steht.

Suchen Sie jetzt weiter nach „checkform“, so finden Sie das Wort wieder bei einem <form>-Tag als onsubmit=“return checkform()“. Mit onsubmit wird das Javascript nach Betätigen des Submitbuttons gestartet!

Das ist schon alles!

Ende der Reihe

Mit diesem Ausflug in Javascript und CSS möchte ich diese Artikelserie „HTML-verstehen“ abschließen. Ich kann nur hoffen, dass ich Ihnen einiges zeigen konnte, damit Sie jetzt HTML besser verstehen und anwenden können. Damit „HTML-verstehen“ auch wiederfinden können habe ich oben einen neuen Menüpunkt eingestellt, wo sie auf die einzelnen Artikel „hinlinken“ können.

Es ging hier nicht um Vollständigkeit, sondern ich habe die Tags erklärt, die Ihnen als Marketer am häufigsten begegnen werden. Ich hoffe weiterhin, dass Sie nun befähigt sind, fehlerhafte Seiten wenigsten grob zu analysieren. Sprich „ich kappier’s nicht“ der Vergangenheit angehört. Vielleicht legen Sie sich ein paar dieser Artikel als Link auf den Desktop, um schnell Informationen zu finden. Denn es ist nichts schlimmer als stundenlang zu überlegen: „Wie war das“, wenn man weiß, wo’s steht

Sollte ich allerdings einige Tags vergessen haben, dann bitte ich Sie nochmals, schreiben Sie das in einen Kommentar, die Kommentare dieses Blocks sind Backlinks auf Ihre Seite denn sie haben kein rel=noindex!!

Bernd Klüppelberg

P.S. Wenn Sie Interesse an weitergehenden Artikeln über Themen wie Formular-Prüfung mit Javascript, Weiterführung in CSS, PHP für Einsteiger haben, dann sollten Sie mir gleich unten einen Kommentar schreiben. Ich plane einen Kurs, der sich mit diesen Themen beschäftigen könnte. Mit welchen, das liegt auch bei Ihnen!

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar