Formular Element

Formular-Elemente bzw. Formulare werden bei interaktiven Projekten verwendet. Sie ermöglichen sowohl Gästebucheinträge als auch Online-Einkäufe oder die Kontaktaufnahme und vieles mehr. Formulare dienen als Hilfe für die Eingabe von Daten, die durch spezielle Elemente, den Steuerelementen, erfolgen. Hierfür wird der Formularinhalt an einen Rechner mit dem entsprechenden Dienstprogramm übertragen.

Allgemeine Informationen zum Thema

Grundsätzlich stehen für die Übertragung von Daten zwei Möglichkeiten zur Verfügung:

• die GET-Methode und die
• POST-Methode

Bei der Verwendung der GET-Methode kommt es zur Versendung von Daten als Teil der URI (URI steht für „Uniform Resource Identifier“ und bezeichnet einen Identifikator, der aus einer Zeichenfolge besteht, die der Identifizierung einer physischen oder abstrakten Ressource dient). Eine URI kann beispielsweise so aussehen:

seite.php?Name=paul&Vorname=muster

Bei Verwendung der POST-Methode kommt es zur Übertragung der Daten als Datenstrom, wobei diese für den Anwender sichtbar bleiben.

Ob die GET- oder die POST-Methode die bessere Wahl ist, hängt von der Aufgabenstellung ab. So ist die GET-Methode zwar für größere Datenmengen nicht geeignet, sie hat aber gegenüber der POST-Methode den Vorteil, dass der Nutzer für die Seite, an die das Formular geschickt wurde, ein Lesezeichen setzen kann. Zudem ist eine Referenzierung des Ergebnisses auch von anderen Seiten aus denkbar.

Der Einsatz der GET-Methode ist sinnvoll, wenn das Formular keine Nebeneffekte zeigt, also etwa, wenn ausschließlich Informationen oder Daten abgefragt werden, die mit dem Dienstprogramm aber nicht verändert werden.

Die POST-Methode bietet sich an, wenn relevante Daten vom Dienstprogramm wegen der Formulardaten verändert werden sollen oder, wenn mit dem Formular große Datenmengen übertragen werden sollen. Dies können zum Beispiel Anmeldungen oder Nutzeridentifizierungen zum Heraufladen von Daten sein.

Formularelemente in HTML

Folgende Formularelemente kommen bei HTML zum Einsatz:

• mehrzeilige und einzeilige Textfelder für die Eingabe (also INPUT mittels des Attributes type="text" und mit dem Attribut type="password", das für TEXTAREA Passwörter verwendet wird)
• Elemente, die für Datei-Uploads verwendet werden (also INPUT mittels dem Attribut type="file")
• Auswahllisten (OPTION und SELECT)
• der Sonderfall, Auswahllisten mit einer Mehrfachauswahl (also SELECT mit Hilfe des multiple-Attributs und OPTION)
• Radiobuttons für die Auswahl Entweder-Oder (<input type="radio">)
• Checkboxen für die Auswahl Entweder-Oder (<input type="checkbox">)

Hinzu kommen Schaltflächen-Elemente (also Buttons) zum Löschen von Formularen oder zum Übergeben von Daten an den Server:

• input type="reset"
• input type="submit"
• input type="button"
• input type="image"
• button

Um der Barrierefreiheit gerecht zu werden, sind die hier aufgezählten Elemente neutral. Beim Einsatz mit Web-Formularen stellen sie also keine Hindernisse dar. Auf zwei Ausnahmen muss aber hingewiesen werden:

• <input type="reset">: Damit wird das Zurücksetzen eines Formulars erlaubt. Der Schaden, der durch das Zurücksetzen in den leeren Zustand erzielt wird, ist größer als der Nutzen. Das gilt insbesondere, wenn vor der eigentlichen Aktion „Abbrechen“ aktiviert wird, was bei einem unachtsamen Druck auf die Entertaste schnell passieren kann. Dadurch werden unter Umständen alle bisher getätigten Eingaben gelöscht. Da die Platzierung des Buttons „Abbrechen“ je nach Betriebssystem an unterschiedlichen Stellen möglich ist, erhöht dies die Gefahr, dass man den Button versehentlich drückt.
• <select multiple="multiple" size="10">: Die Arbeit mit diesen Feldern wird erschwert, weil nicht sofort erkennbar ist, dass hier unterschiedliche Optionen ausgewählt werden können, was eine kognitive Barriere bedeutet. Außerdem ist die Bedienung nicht intuitiv und kann nicht als gelernt vorausgesetzt werden, die Bedienung über die Tastatur ist im Ernstfall nicht möglich

Das select-Element bei HTML

Für die Listenauswahl bietet HTML das select-Element an. Dabei kann der Anwender durch ein Attribut bestimmen, ob eine längere Liste mit sichtbaren Einträgen verwendet wird oder eine Dropdown-Liste.

Die Liste ist folgendermaßen aufgebaut:

• <select>…</select>: Damit wird die Liste eingeschlossen.
• <option>…</option>: Die einzelnen Listeneinträge werden markiert.
• Text zwischen <option> und </option>: Der Text dazwischen ist der Text, der dem Anwender als Listeneintrag angeboten wird.
• Weitere Werte sind „value=“ („value=“), <select> (<select></select>) und „name=“ („name=“). „value=“ ist der Wert, der beim Absenden der Formulardaten als ausgewählter Listenwert an das Script übertragen wird, das verarbeitet wird. Das <select>-Element bekommt bei „name=“ den Namen des Parameters, mit dem an das verarbeitende Script die Listenauswahl übergeben wird.
• Hinzu kommt das Attribut „size=“, das das Aussehen der Liste bestimmt. Ist der Wert 1, handelt es sich beim Ergebnis um eine Dropdown-Liste. Liegt der Wert höher als 1, zeigt sich das Ergebnis als eine Liste, die so viele sichtbare Einträge hat, wie es im Wert angegeben wurde. Wenn die Liste mehr Einträge enthält als bei „size=“ angegeben wurde, kann dem Anwender durch den Browser automatisch eine Scrollliste angezeigt werden.

Formulare und weitere Nutzungsmöglichkeiten

Zahlreiche weitere Möglichkeiten erweitern die Formular-Funktion. So stehen beispielsweise folgende Möglichkeiten zur Verfügung:

• Formulare als Mail
• Versand von Formularen per Mail
• Optische Verbesserung von Formularen mit CSS
• Formular-Eingabe-Felder
• Mehrzeilige Textfelder
• Mehrzeilige Eingabebereiche
• Checkboxen und Radiobuttons
• Definition von versteckten Elementen in Formularen.

Bedeutung für das Development

Das Internet hat sich im Laufe der Zeit stark verändert und weiterentwickelt. Während es zu vergangenen Zeiten meist ausreichte, eine Datei an den Server zu schicken, benötigen Webanwendungen heute Datums- und Zeitangaben, Farbwerte, Telefonnummern und Bereichswerte. Hinzu kommen die Anforderungen, die durch die Nutzung von Tablets und Smartphones entstanden sind. Webentwickler sollten sich daher mit Formularen und Formular Elementen intensiv auseinandersetzen.

Weblinks

• 7 HTML/CSS
• HTML/Formulare/form
• form