Formulare
Vorwort zu Formularen
Formulare dienen einem Websitebetreiber zum Einholen von Informationen, oder dem Surfer zum Stellen von Fragen und abgeben von Kommentaren und um sich einzuloggen; es ist eigentlich das Mittel zur Kontaktaufnahme. Hier erstelle ich ein Formular und schreibe über die Möglichkeiten und Regeln zum Versenden.
Das Formular soll möglichst wenig Felder haben, am besten nur die, welche sowieso mit * als obligatorisch zum Ausfüllen gekennzeichnet würden.
Den Nutzern zuliebe soll die Notwendigkeit der Datenerfassung begründet, über deren Verwendung informiert, und der vertrauliche Umgang damit garantiert werden, und es sollte eine Möglichkeit zum Beantragen der Löschung der Daten gegeben werden.
Formular definieren
<form>...</form>
Ein Formular wird durch die <form>...</form> Tags definiert.
Alles was zu einem Formular gehört, bis und mit Absende-Button, gehört zwischen diese Tags.
Der Formularnamen und die ID, ermöglichen, das Formular per Javascript anzusprechen:
name="bananenformular" id="bananenformular"
Dann geben drei Attribute action="..." , method="..." und enctype="..."
im Start-Tag an, was mit den Daten im Formular geschehen soll, wenn man den Button zum Absenden gedrückt hat:
Versandwege
method= "get" / "post"
Bei method="get" werden die Daten als Umgebungsvariable
zwischen Transport und Verarbeitung festgehalten, dieser QUERY_STRING (Abfragezeile)
zeigt sich nach dem Absenden im Adressfeld des Browsers, er wurde mit einem ? an die Adresse angehängt.
Der Querystring ist in der Länge traditionell auf 255 Zeichen begrenzt.
In den Query-String kann hinein geschrieben werden - auch ohne Formular.
Der QUERY_STRING benutzt folgende Regeln:
- Die einzelnen Formularelemente inklusive ihrer Daten werden durch ein kaufmännisches und (&) voneinander getrennt.
- Name und Daten eines Formularelements werden durch ein Gleichheitszeichen (=) voneinander getrennt (als Variablenname=Wert), Werte nicht in Anführungszeichen.
- Leerzeichen in den eingegebenen Daten (z.B. bei mehreren Wörtern) werden durch ein Pluszeichen (+) ersetzt.
- Alle Zeichen mit den (erweiterten) ASCII-Werten 128 bis 255 (hexadezimal 80 bis FF) werden durch eine Hexadezimalzeichenfolge umschrieben, eingeleitet durch ein Prozentzeichen (%) und dahinter der Hexadezimalwert des Zeichens (z.B. wird der deutsche Umlaut ö im Zeichensatz ISO-8859-1 durch %F6 umschrieben).
- Alle Zeichen, die in diesen Regeln als Steuerzeichen vorkommen (also &, +, = und %) werden ebenfalls hexadezimal umschrieben, wie höherwertige ASCII-Zeichen.
Bei method="post" werden die Daten als Variablen versteckt versendet,
die Menge kann auch viel grösser sein; sollten als Resultat des Formulars
Einträge in einer Datenbank erstellt werden, dann ist dies die bessere Methode weil unsichtbar.
Auch bei E-Mail Formularen (veraltet) und Formularen mit Dateiupload muss die post Methode gewählt werden.
Versandziele
Also, was mit den Daten im Formular passiert wird am Anfang im <form>-Tag festgelegt (nicht etwa erst im Absende-Button)!
action="scripts/meinformularprozessor.php"
Als action="wert" wird also die URL eines Skrips angeben,
welches die Daten empfängt, kontrolliert und verarbeitet. Es sendet ev.
auch eine Antwortseite mit Empfangsbestätigung an den Absender-Browser.
Ein Perl-Script wird manchmal vom Host auf dem Server
in einem speziellen cgi-bin Ordner bereit gestellt (CGI = Common Gateway Interface,
Allgemeines Tor als Schnittstelle).
Einige Hosts stellen auch eine Mailer-Applikation zur Verfügung,
welches aber nicht unbedingt im CGI-bin zu finden ist sondern beim Host erfragt werden muss.
Es können aber auch PHP, Python oder andere Scriptsprachen verwendet werden:
action="scripts/meinformularprozessor.php"
Als action= könnte direkt ein E-Mail Versand ausgelöst werden,
das ist aber einfach zu misbrauchen, denn kein Script prüft die Daten; Spammer und
Hacker können solche Formulare relativ einfach kapern und neue Empfänger
anhängen oder Code in die Formular Felder eingeben!
<form name="buch_bestellung"
action="mailto:antwort@1000fragen.ch?subject=Irgend ein Betreff&body=Hallo"
method="post" enctype="text/plain">...</form>
sendet die Daten als E-Mail mit Betreff und dem Inhalt Hallo an die genannte Adresse.
enctype=
Das enctype="text/plain" (nur zum E-Mailversand) bedeutet,
dass die Daten in Klartext empfangen werden, also nicht in ASCII umkodiert,
das enc im enctype heiss nicht encrypt (Verschlüsselung) sondern encode (Kodierung).
Mit enctype="text/plain" kann PHP nicht anfangen, geht der Formularinhalt an
ein PHP Script, sollte enctype weggelassen werden.
Will man mit dem Formular das hochladen von Dateien ermöglichen, so ist
enctype="multipart/form-data" zwingend.
lang="de"
Das lang-Attribut ist optional, es dient zur Internationalisierung.
Attribute
checked, selected
Bei den Checkboxen, dem Radiobutton und den Optionen kann eine Auswahl bereits vorgegeben werden. Das Attribut im input-Tag heisst checked, bei XHTML checked="checked", im option-Tag entsprechend selected="selected". Diese Attribute sind bei den jeweiligen Feldern als Beispiele zu sehen.
disabled
Formularelemente können ausgegraut dargestellt werden, deren Benutzung,
das Drauf- und Reinklicken ist dann nicht möglich.
Durch ein Javascript kann ich je nach Auswahl in anderen Feldern Elemente also
unzugänglich bzw. zugänglich machen durch Hinzufügen oder Entfernen des Attributs disabled.
Es gibt nur den einen Wert, bzw. das eine Attribut
Diese Elemente können das Attribut disabled="disabled" enthalten:
<input>, <textarea>, <select>, <option>, <optgroup> und <button>
Je nach Browser wird so ein Element ausgegraut oder einfach unbenutzbar:
required, autofocus
In HTML 5 sind auch zusätzliche Attribute vorgesehen.
'required' soll beim Versuch ein Formular zu versenden in welchem ein
solches Feld leer gelassen wurde, den Versand verhindern und ein Hinweis zeigen.
'autofocus' soll beim öffnen eines Formulars den blinkenden Cursor zuerst in jenes Feld setzen.
(Ein Attribut, welches auf einer Seite nur einmal vorkommen kann.
Dieser Effekt wurde weiter oben mittels javaScript erzeugt.)
(Die Attribute sind natürlich nicht in Kombination mit 'disabled' nutzbar.)
Weitere neue Attribute werden hier besprochen, wenn sie von den meisten Browsern unterstützt werden (2014). Es könnten sein: autocomplete, form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget), height und width, list, min und max und step, multiple, pattern (regexp), placeholder, readonly.
Formatieren
Zur Formatierung der Formular-Felder sollten CSS herangezogen werden, die Möglichkeiten sind unzählig. Zum Ausrichten werden manchmal noch Tabellen verwendet, denn das Ausrichten ist kompliziert; wie es ohne geht - siehe Beispiel 1 und Beispiel 2 von Formularen mit CSS.
Nicht zu beeinflussen sind leider die 3D Defaulteffekte folgender Felder:
- Dropdown-Menue-Buttons mit Pfeil
- Durchsuchen ...Buttons zum Hochladen von Dateien
- Scrollleisten (IE proprietär schon)
- Checkbox und Radio- Buttons (Beispiel grafische Buttons*)
* Es gibt zwar die Möglichkeit (z.B. an Stelle der Checkbox und Radiobuttons) Bilder mit JavaScript verknüpften hidden-Felder zu verwenden, aber das hiesse die grafische Gestaltung über die Accessability (Anwenderfreundlichkeit beispielsweise für Blinde) zu stellen.
Vorcheck
Mit Javascript kann nicht auf schädlichen Inhalt geprüft werden, denn im Browser kann Javascript einfach ausgeschaltet werden - und schon findet keine Prüfung mehr statt.
Die Eingabefelder checken wir mit JavaScript noch im Browser. Das Formular
kann so bei Fehlerhaften Eingaben gleich nochmals zur Verfügung gestellt werden und zwar so,
dass nur die fehlerhaften Felder und nicht das ganze Formular neu ausgefüllt werden muss;
auf das betroffene Feld kann mit einem Alert, einem eingefügten Hilfetext
oder durch Hervorhebung mit Vorauswahl oder blinkender Corsorposition aufmerksam gemacht werden.
Zuletzt den Erhalt bestätigen! Ein Feedback zeigt, das alles richtig gemacht wurde.
>> Beispielformular mit Javascript-Checks
Sicherheit
Das empfangende Script auf der Zielseite muss unbedingt die Formular-Eingaben richtig prüfen,
bevor sie in die Datenbank eingetragen werden, oder bevor mit ihnen eine Datenbank abgefragt wird!
Auch vor dem Speichern in einer Datei oder der Ausgabe im Browser müssen die empfangenen Daten geprüft werden.
Siehe: Sicherheit im Teil PHP
Check den Code.