IT-Academy Logo
Sign Up Login Help
Home - Programmieren - HTML - HTML Formulare



HTML Formulare

Die wichtigsten Elemente eines HTML-Formulars kurz erklärt und mit Beispielen näher erläutert.


Autor: Patrick Bucher (paedubucher)
Datum: 20-01-2006, 15:09:52
Referenzen: selfhtml
Schwierigkeit: Fortgeschrittene
Ansichten: 8874x
Rating: 8 (1x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



HTML-Formulare

Praktisch auf jeder guten Website befinden sich interaktive Formulare. Dabei ist zu beachten, dass das Grundgerüst eines Formulars in HTML kodiert wird. PHP tritt erst dann in Kraft, wenn es um die Auswertung und Überprüfung der Formulareingaben geht.



Der Form-Tag

Ein Formular wird mithilfe des Form-Tags innerhalb des HTML-Bodys implementiert. Ein Formular ist durch die Tags <form> und </form> begrenzt, dazwischen können Formularelemente wie auch übrige HTML-Inhalte stehen.



Attribute

Für den Versand einfacher Textinhalte (also keine Dateien) spielen die beiden folgenden Attribute eine wichtige Rolle:

  • action

  • method

Das action-Attribut gibt an, in welcher Datei die Auswertung der Formulardaten abläuft. Wird action mit keinem Wert belegt oder gar leer gelassen, so werden die Formulardaten an die aktuelle Datei weitergegeben (diese wird dann neu geladen).

Das Attribut method kann den Wert „POST“ oder „GET“ haben. Diese beiden Methoden werden im nächsten Abschnitt noch genauer erläutert.

Ein Beispiel dazu:

<form action=“handler.php“ method=“GET“>
<!-- weitere Formularelemente -->
</form>



Versandmethoden

Um Formularinhalte zu versenden stehen zwei Methoden zur Auswahl:

  • GET

  • POST

Mit der GET-Methode werden die Formularinhalte einfach als Klartext an die URL angehängt.

Steht aber beim Formularversand die Sicherheit im Vordergrund, so ist die POST-Methode zu wählen, da ihre Daten für den Benutzer unsichtbar im body einer HTTP-Nachricht mitgegeben werden.



Formularelemente

Für ein HTML-Formular hat man einige Komponenten zur Auswahl. Dabei handelt es sich um Komponenten, die auch in Applikationen weit verbreitet sind. Es sind z.B. Folgende:

  • Textfelder

  • Buttons

  • Checkboxen

  • Radiobuttons

Weiter existieren noch einige spezielle Elemente, wie z.B. verstecke Felder oder Buttons mit einer fixen Funktion.

Die meisten Elemente werden mithilfe des input-Tags implementiert. Die Unterscheidung, um welche Komponente es sich nun tatsächlich handelt, findet im Attribut type statt:

<input type=“[Name der Komponente]“ [weitere Attribute]>

Der input-Tag muss nicht abgeschlossen werden, die obige Notation ist also vollkommen korrekt.

Eine sehr wichtige Rolle spielt das Attribut name. Es definiert den Namen der Komponente und somit auch den Variablennamen, unter welchem dann im PHP-Skript später der jeweilige Wert abgefragt werden kann. Es kann eine beliebige Zeichenkette sein, sie sollte aber eher kurz gehalten werden, Sonderzeichen sind unbedingt zu vermeiden!

In den folgenden Abschnitten wird genauer auf die einzelnen Elemente eingegangen.



Einzeilige Eingabefelder

Ein einzeiliges Eingabefeld wird mit dem input-Tag erstellt. Das Attribut type muss dabei den Wert „text“ haben.

Besondere Attribute:

Attribut

Beschreibung

Werte

size

Die Breite des Textfelds in Zeichen

Ein positiver, ganzzahliger Wert

maxlength

Die mögliche Anzahl an Zeichen, die eingegeben werden können

Ein positiver, ganzzahliger Wert

value

Gibt den Standardtext des Feldes an

Ein beliebiger String

readonly

Der Wert des Textfelds kann nur gelesen und nicht verändert werden, also sollte das Attribut value einen Wert haben

[leer] oder „readonly“



Dazu einige Beispiele:

<input type=“text“ name=“vorname“ size=“20“ maxlength=“35“>
<input type=“text“ name=“nachname“ size=“30“>
<input type=“text“ name=“adresse1“ maxlength=“50“ readonly value=“Hauptgasse“>
<input type=“text“ name=“adresse2“ readonly=“readonly“ value=“Dorfstrasse“>

Ein Sonderfall von einzeligen Textfeldern stellt das Passwortfeld dar. Es besitzt die gleichen Attribute wie das normale einzeilige Textfeld, jedoch muss das type-Attribut mit dem Wert „password“ belegt werden. Bei Passwortfeldern wird jedes eingegebene Zeichen maskiert.



Mehrzeilige Eingabefelder

Um sein Formular um mehrzeilige Eingabefelder zu erweitern, muss man auf den Tag textarea ausweichen. Im Gegensatz zum input-Tag muss der textarea-Tag wieder abgeschlossen werden. Sämtliche Zeichen die zwischen <textarea> und </textarea> stehen, werden direkt als Wert in das Textfeld geschrieben! Wird also der abschliessende Tag </textarea> vergessen, so steht der gesamte Rest der HTML-Datei in diesem Textfeld.

Der textarea-Tag hat folgende besondere Attribute:

Attribut

Beschreibung

Werte

rows

Höhe des Textfelds in Zeichen (bzw. Zeilen)

Ein positiver, ganzzahliger Wert

cols

Breite des Textfelds in Zeichen

Ein positiver, ganzzahliger Wert

readonly

Der Wert des Textfelds kann nur gelesen und nicht verändert werden

[leer] oder „readonly“



Einige Beispiele dazu:

<textarea name=“bemerkung“ cols=“20“ rows=“2“>Ihre Bemerkung</textarea>
<textarea name=“kommentar“ cols=“50“ rows=“10“></textarea>



Auswahllisten

Eine Auswahlliste ist ein wenig komplexer im Aufbau, da jeder Eintrag in einem eigenen Tag steht. Dieser Tag hat wiederum eigene Attribute. Die Auswahlliste kann zudem auch gleich also ComboBox dienen, dazu muss nur gerade ein Attribut gesetzt werden.

Auswahllisten werden mit dem Tag <select> realisiert und müssen mit </select> wieder abgeschlossen werden. Dazwischen stehen die Listenelemente, welche wiederum zwischen dem Tag <option> und </option> stehen müssen.

ComboBoxen werden heutzutage den Listen meistens vorgezogen, da sie Platz sparen und dabei die gleiche Funktionalität haben.

Die Attribute des select-Tags:

Attribut

Beschreibung

Werte

size

Die Höhe der Auswahlliste. Übersteigt die wirkliche Anzahl der Elemente diesen Wert, so wird ein Scrollbalken angezeigt. Ist der Wert 0 oder wird das Attribut ganz weggelassen, so wird eine ComboBox angezeigt.

Ein positiver, ganzzahliger Wert

multiple

Gibt an, dass in der Liste mehrere Elemente gleichzeitig ausgewählt werden können.

[leer] oder „multiple“



Die Attribute des option-Tags:

Attribut

Beschreibung

Werte

selected

Gibt an, dass das Element standardmässig ausgewählt ist

[leer] oder „selected“

value

Im Gegensatz zum angezeigten Wert innerhalb des Tags wird dieser Wert übergeben. Wird das Attribut nicht aufgeführt, so wird der Wert innerhalb des Tags verwendet.

Ein beliebiger String


Einige Beispielde dazu:

<!-- eine ComboBox -->
<select size=“1“ name=“vornamen“>
<option selected=“selected“>Elbin</option>
<option>Ardian</option>
<option>Liridon</option>
<option>Fatima</option>
</select>

<!-- eine normale Liste mit Mehrfachauswahl -->
<select multiple=“multiple“ name=“nachnamen“>
<option selected>Ivanovic</option>
<option>Bislimaj</option>
<option>Bastürk</option>
</select>

Erlaubt man in einer Liste die Mehrfachauswahl und will so möglicherweise mehrere Werte an ein PHP-Skript übergeben, so muss das name-Attribut am Ende unbedingt zwei eckige Klammern haben:

<!-- übergabe von mehreren Werten -->
<select size=“3“ multiple name=“strassen[]“>
<option selected=“selected“>Hauptgasse</option>
<option>Chrutzloch</option>
<option>Kreuzboden-Klapfhöhe</option>
</select>



Checkboxen

Checkboxen werden mit dem input-Tag realisiert. Dazu wird das type-Attribut auf „checkbox“ gesetzt.

Die Attribute:

Attribut

Beschreibung

Werte

checked

Gibt an, dass die Checkbox standardmässig aktiviert ist

[leer] oder „selected“



Beispiel:

<input type=“checkbox“ name=“intressen[]“ value=“Sport“ selected=“selected“>
<input type=“checkbox“ name=“intressen[]“ value=“Musik“ selected>
<input type=“checkbox“ name=“intressen[]“ value=“Filme“>

Im PHP-Skript enthält dann das Array „intressen“ sämtliche Werte (value-Attribut) der ausgewählten Eigenschaften.



Radio-Buttons

Radio-Buttons können wie Checkboxen zwei Werte einnehmen. Der Unterschied liegt darin, dass Radio-Buttons zu Gruppen zusammengeschlossen werden, in welchen jeweils nur ein Radio-Button aktiviert sein kann.

Man realisiert Radio-Buttons mit dem input-Tag, das Attribut type wird dabei auf „radio“ gesetzt.

Sie werden ebenfalls mit dem input-Tag realisiert.

Die Attribute:

Attribut

Beschreibung

Werte

checked

Gibt an, dass die Checkbox standardmässig aktiviert ist

[leer] oder „selected“



Beispiel:

<input type=“radio“ name=“option“ value=“auswahl1“>Option 1<br>
<input type=“radio“ name=“option“ value=“auswahl2“>Option 2<br>
<input type=“radio“ name=“option“ value=„auswahl3“>Option 3

Im PHP-Skript wird die Variable „option“ dann den Wert „auswahl1“, „auswahl2“ oder „auswahl3“ haben – je nachdem, welcher Eintrag ausgewählt wurde.

Damit nur eine der drei Optionen ausgewählt werden kann, müssen alle den selben Namen tragen!



Buttons

Will man die Formularinhalte an das PHP-Skript übermitteln, so muss dies durch den Klick auf einen Button geschehen. Mit Buttons kann man auch den gesamten Inhalt eines Formulars löschen oder eine beliebigen JavaScript-Code ausführen lassen.

Bei den Buttons unterscheidet man zwischen drei Typen:

  • submit-Buttons (<input type=“submit“...>) zum Abschicken der Formulardaten

  • reset-Buttons (<input type=“reset“ ...>) zum leeren des Formularinhalts

  • „normale“ Buttons (<input type=“button“ onClick=“[Aktion]“...>) zum Ausführen einer JavaScript Routine

Eine besondere Rolle spielt hier das value-Attribut. Dieses bestimmt nämlich die Beschriftung des Buttons.

Das Attribut name hat für den Button praktisch keine Auswirkungen, da man die Beschriftung des Buttons in einem PHP-Skript wohl eher nicht auslesen möchte (um die Beschriftung – also das Attribut value – in einem PHP-Skript zu verwenden, muss man den Namen der Formularkomponente kennen). Der Name sollte der Vollständigkeit halber aber trotzdem mit aufgeführt werden.

Einige Beispiele:

<input type=“submit“ name=“submitter“ value=“Abschicken“>
<input type=“reset“ name=“resetter“ value=“Formular leeren“>
<input type=“button“ name=“foo“ onClick=“javascript:bar()“ value=“FooBar“>



versteckte Felder

Um Werte „hinter dem Rücken“ des Users über verschiedene Seiten zu transportieren, kann man versteckte Felder verwenden.

Diese werden mit dem input-Tag realisiert, indem man das Attribut type mit dem Wert „hidden“ belegt.

Versteckte Felder besitzen keine weiteren besondere Attribute.

Beispiel:

<input type=“hidden“ name=“geheim1“ value=“versteckterWert“>



Dateiupload-Steuerelement

Damit man einem Formular nicht nur Texte, sondern auch Dateien übergeben kann, wurde ein spezielles Eingabeelement für Dateien entwickelt.

Dieses besteht aus zwei Elementen; einem Textfeld für die Angabe des absoluten, lokalen Dateipfades und einem Button, mit welchem man den nativen File-Dialog öffnen kann.

Dieses Steuerelement wird mit dem input-Tag realisiert, das Attribut type hat dabei den Wert „file“.

Damit in einem Formular Daten übertragen werden können, ist ein weiteres Attribut im Form-Tag nötig. Dabei handelt es sich um das Attribut „enctype“. Ein Formular für einen Dateiupload könnte also beispielsweise wie folgt aussehen:

<form enctype=“multipart/form-data“ action=“handler.php“ method=“POST“>
<input type=“file“ name=“uploader“>
<input type=“submit“ name=“submitter“ value=“abschicken“>
</form>



[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06246
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1154
Comments: 0