HTML und Formulare

Jeder kennt Formulare auf Websites. Ob man seine Adressdaten hinterlegt oder sich in einen Memberbereich einloggt. Ob man aus einer Liste etwas auswählt oder bei einer Liste Haken setzen kann – Formulare sind grundlegende Bestandteile von Websites. Über ein Formular sollen Daten, die Sie eingeben an den Webserver mitgeteilt werden. Dort werden diese Daten z.B. in einer MySQL-Datenbank gespeichert oder für die Weiterverarbeitung benutzt. Die Gruppe der Formularelemente bei HTML ist übersichtlich, erfüllen aber jeglichen Bedarf für die Erfassung oder Verarbeitung von Daten. Es handelt sich hier im folgende Formular Elemente:

  • Text
  • Radio
  • Checkbox
  • Password
  • Hidden
  • Button
  • Image
  • File
  • Submit
  • Reset

Im folgenden eine Kurzbeschreibung zu den Elementen.

Das Texteingabefeld

Das Texteingabefeld wird für den Eintrag von Namen, Strasse, Orten o.ä. benutzt.Bei dem Formular-Element „Text“ handelt es sich um ein Einzeiliges Feld.

Radio – die Optionsschaltfläche

Hierbei handelt es sich um einen sogenannten Radiobutton. Ein kleiner runder Kreis mit einer Punktmarkierung, wenn der Radiobutton gewählt wurde. Das es sich hierbei um eine optionale Schaltfläche handelt, kann immer nur ein Radiobutton in einer Gruppe aktiviert sein. Es ist also eine Auswahl: entweder oder. Ein Gruppe von Radiobuttons wird durch die Vergabe desselben Namens gekennzeichnet.

Checkbox – Auswahlfelder

Im Gegenteil zum Radiobutton können bei Checkboxen mehrere angehakt sein. Wenn die Checkbox angehakt ist, damit aktiv ist, wird der Wert (Value) an den Server übertragen. Wichtig in diesem Zusammenhang für die Weiterverarbeitung ist, dass nicht angehakte Checkboxen auch gar nicht an den Server übermittelt werden. Es werden immer nur die angehakten übermittelt. Das spielt bei der späteren Auswertung mit PHP bei den Checkboxen eine Rolle. Der Status der Checkbox – also aktiviert, deaktiviert – kann bereits beim Laden des Formulares gesetzt werden. Nochmals sei hier erwähnt, das mehrere Checkboxen einer Gruppe gleichzeitig angehakt werden können.

Passwort – verdeckte Eingabe

Wie der Name des Elements schon anzeigt handelt es sich um ein Eingabefeld für Text, dass aber die einzelnen Zeichen als Sternchen darstellt. Somit ist nicht erkennbar, welche Eingabe gemacht wird. Sinnvoll natürlich bei jeder Passworteingabe, zum Beispiel bei Login zu einem User-Bereich oder bei der Eingabe der Online Banking Pin.

Hidden – das Feld im Hintergrund

Bei dem Element Hidden handelt es sich um ein unsichtbares Feld, das zum Beispiel dazu benutzt werden kann bestimmten Informationen im Hintergrund weiter zu vermitteln, die der Anwender nicht sehen muss oder soll.

Image – Element zum Einbinden einer Bilddatei

Das Image Element holt sich eine Bilddatei aus hinterlegten Pfad. Das Bild kann zum Beispiel einen Button ersetzen.

File – Dateiübertragung

Mit dem File-Element lassen sich lokale Dateien übertragen. Dabei wird der Browserdiaolog mit allen Funktionen benutzt.

Submit – Schalter zum Absenden von Informationen

Inhalte eines Formulares werden mit dem Submit-Button übertragen. Dabei wird das im Formular hinterlegte Skript bei der auszuführenden Datei als Ziel genommen.

Reset – zurücksetzen von Formular-Elemente

Formularelemente wie zum Beispiel Textfelder oder Checkboxen können mit dem Reset-Button wieder auf ihren Grundzustand zurückgesetzt werden. Die Eingaben in Textfeldern werden zum Beispiel gelöscht.

Alle Elemente können, müssen mit Attributen versehen werden. Die Art der Attribute hängt vom Elementtyp ab. Jeder Elementyp besitzt ein Attribut „name“, das den Namen des Elements festlegt. Einige der Formularelemente haben das Attribut „value“, das zum Beispiel bei Radiobutton anzeigt, ob die Checkbox anklickt ist oder nicht. Das Attibut „checked“ bei Checkboxen zeigt, ob die Checkbox anklickt ist oder nicht. Beim Element „password“ lässt sich über das Attribut „size“ festlegen, wie lange die Zeichenkette sein darf die eingegeben wird.

Nachdem man sich die Formularelemente für seine Website zusammengestellt hat, lassen sich die Inhalte der Elemente mit PHP übertragen und auswerten. PHP ist hier recht umgänglich, denn es erkennt automatisch über das Attribut „name“, also über den Namen des Elements, eindeutig um was es sich handelt. Wer sich über die Verwendung und Eigenschaften von HTML Formularen weiter informieren möchte findest im Web dazu zahlreiche gute Tipps und Websites mit weiteren Erläuterungen. Am einfachsten geht’s mit Google: Elementtyp eingeben und auf den ersten SERPs fündig werden.