Erweiterte Formulare

Auswahllisten

Mit Listen können wir große Mengen an Auswahloptionen kompakt darstellen. Ein Beispiel wäre das Bundesland aus dem unser Benutzer kommt.

Oops, an error occurred! Code: 20190423035535f37f67ef

Aus Platzgründen hab ich mir den Rest der Bundesländer gesparrt, aber ich  denke das Prinzip wird klar.


Das ganze bauen wir natürlich auch in unser Formular ein:

Oops, an error occurred! Code: 201904230355358eb336ac

Nun ist unser Formular fast schon komplett, aber ein entscheindendes Element fehlt noch. Dieses Element ist der Button zum Abschicken.

Submit Buttons

Einen Submit Button bauen wir mit folgendem Tag ein:

Oops, an error occurred! Code: 20190423035535a655095e

Wir müssen also als Attribut type "submit" angeben. Um die Beschriftung des Buttons zu ändern, müssen wir den Wert des Value Attributs bearbeiten.Ein Element habe ich in unserem Mailformular nicht verwendet, das ist das Passwortfeld.

Passwortfelder

Mit einem Passwortfeld kann man ein Feld einbauen in dem alle eingaben in Form von Sternchen dargestellt werden. Dadurch können zuschauer das eingegebene Passwort nicht lesen.

Tag für ein Passwortfeld:

Oops, an error occurred! Code: 201904230355355f0d5092

Ausserdem kann man noch versteckte Felder in ein Formular einbauen.

versteckte Formularfelder

Ein verstecktes Formularfeld dient zu reinen Datentransport. Bei PHP Skripten kann man z.B. soetwas manchmal finden:

Oops, an error occurred! Code: 20190423035535ff8b7e74

Damit kann der Programmierer später abfragen ob das Formular abgesendet wurde. Versteckte Felder können also nützlich sein um z.b. statusvariablen etc zu übermitteln. Man sollte sie jedoch niemals dazu nutzen Sicherheitsrelevante Informationen vom Server zum Client zu übertragen um diese nach dem abschicken des Formulars wieder zu nutzen. Denn der Quelltext ist beim Client lesbar und veränderbar.


In unserem Mailformular habe ich auf ein verstecktes Feld verzichtet.

Unser Formular ist jetzt soweit fertig und der Quelltext sieht wie folgt aus:

Oops, an error occurred! Code: 201904230355356ed5a429

Die aus diesem Feld generierte Mail würde so aussehen:

name=Timo Schmidt
meinung=Tolle Internetseite
kenntnisse=bilder
kenntnisse=frames
kenntnisse=tabellen
kenntnisse=formulare
geschlecht=maennlich
bundesland="Hamburg"

 

Navigation