Formulare richtig gestalten mit HTML5

Viele Möglichkeiten: Formulargestaltung mit HTML5
Keine Kommentare

Formulare in HTML zu gestalten ist langweilig. Das ist zwar richtig, hilft aber nichts. Sie sind in nahezu allen Businessapplikationen vorhanden, in denen Nutzerdaten erfasst werden. Die Möglichkeiten der Formularauszeichnung mit HTML5 haben gegenüber früheren Versionen enorm zugelegt. So wird das Thema wenigstens aus technischer Sicht etwas spannender. Wir haben diese Möglichkeiten anhand von Beispielen zusammengestellt.

Formulare begegnen uns in Webapplikationen an den unterschiedlichsten Stellen. Mit nur ein oder zwei Eingabefeldern kommt die Anmeldemaske für einen Unternehmensnewsletter aus. Bei einem Kontaktformular müssen Sie als Entwickler schon etwas mehr Aufwand betreiben.

Eingabefelder bedeuten mehr Aufwand

Mehrere Eingabefelder sind ansprechend zu platzieren, es bedarf einiger Hinweise zu den erwarteten Daten und eine Verifikation der Nutzereingaben, bevor diese weiterverarbeitet werden können. Businessapplikationen „leben“ gewissermaßen von Daten und damit sind Formulare das Rückgrat derartiger Anwendungen. Je mehr Geschäftsanwendungen von der Offline- in die Onlinewelt transformiert werden, desto umfassender und komplexer müssen auch die Benutzerschnittstellen gestaltet werden. Nach der Eingabe der Daten sind diese zu validieren und zu verarbeiten. Die weitere Verarbeitung der Nutzereingaben kann dabei (zunächst) im Client (Browser) erfolgen, zum Beispiel mit der Programmiersprache JavaScript. Irgendwann werden die Daten jedoch zum Server übermittelt und dann dort verarbeitet. Auf dem Server kommt dann zum Beispiel die Programmiersprache PHP zum Einsatz. Auch der entgegengesetzte Weg der Daten, d. h. von der Datenbank über den Server bis zur Präsentation im Browser endet dabei oft in Formularfeldern. Hier gilt: Immer dann, wenn der Nutzer die Möglichkeit hat, Daten zu verändern, verwendet man Formularfelder, die entsprechend mit Daten aus der Geschäftslogik gespeist werden.

Aus technischer Perspektive interessieren uns die folgenden drei Themen:

  • Definition von Formularen in HTML5
  • Verarbeitung der Daten in JavaScript
  • Übermittlung der Daten aus dem Formular an den Server

Haben Sie schon einmal Formulare für Webapplikationen gestaltet, dann wissen Sie, dass man einen Eingabebereich stets mit dem HTML-Tag <form> startet und mit dem entsprechenden Tag </form> wieder schließt. Wir werden Ihnen zeigen, dass die Möglichkeiten von HTML5 bei der Formulargestaltung erheblich zugenommen haben. Eine genauere Auszeichnung der Eingabefelder macht es leichter, Nutzereingaben besser zu steuern und die Validierung der Daten zu vereinfachen. Das Thema Formulargestaltung hat aber nicht nur eine technische Dimension. Das User Interface einer Businessapplikation gestaltet man nicht nebenbei.

Es genügt nicht, einfach alle notwendigen Eingabefelder irgendwie linear von oben nach unten anzuordnen und darauf zu hoffen, dass der Nutzer zurechtkommen wird. Das Stichwort lautet User Experience und besagt, dass man sich umfassende Gedanken über die Gestaltung der Nutzeroberfläche machen muss. In unserem Fall betrifft es das Design der Eingabeformulare. Beste Voraussetzungen haben Entwicklungsteams, die einen Interfacedesigner im Team haben. Diese erstellen Prototypen, zum Beispiel in Form von Grafiken, die man als Entwickler Schritt für Schritt technisch umsetzen kann. Viele kleinere Softwareschmieden bzw. einzelne Entwickler haben diesen Luxus leider nicht. Sie sind daher auch für die Gestaltung der Formulare zuständig. In diesem Fall hilft es nur, sich selbst mit den grundsätzlichen Basics vertraut zu machen. Bevor wir die Technik bemühen, haben wir wichtige Facetten aus dem Bereich der UI-Patterns für Sie zusammengestellt. Das Ziel: bessere Formulare, die nicht an die letzte Steuererklärung erinnern.

Das magische Dreieck des UI-Designs

Schaut man sich einige Benutzerschnittstellen von Applikationen an, dann ist die tägliche Arbeit mit diesen Werkzeugen für die Anwender eine Zumutung. Überladene Seiten, eine unendliche Anzahl von Eingabefeldern, Beschriftungshinweise, gepaart mit weniger aussagekräftigen oder überflüssigen Bezeichnern. Die Anordnung der Elemente erscheint oft willkürlich. Das Eingabeformular wurde immer wieder mit Hilfe von Updates erweitert, um auch den x-ten Sonderfall darüber abdecken zu können. Selten wurde es bereinigt, entrümpelt oder komplett neugestaltet. Bei der Entwicklung einer neuen Applikation bzw. bei einem geplanten Relaunch einer bestehenden Webapplikation besteht auch die Möglichkeit, das User Interface komplett zu überarbeiten. Die Frage ist: Woran kann man sich orientieren? Gibt es allgemeingültige Hinweise? Natürlich gibt es gesicherte Erkenntnisse. Beispielsweise kann man bei der Gestaltung der Formulare auf erprobte Konzepte – in Form vom sogenannten User-Interface-Pattern – zurückgreifen. Einige wenige Gestaltungshinweise können bereits hilfreich sein, die richtigen Fragen während des Designprozesses zu stellen und sich an der ein oder anderen Stelle etwas mehr Zeit zu nehmen. Dabei kommt die Gestaltung der Benutzerschnittstelle dem Austarieren eines magischen Dreiecks gleich (Abb. 1).

Abb. 1: Das magische Dreieck des UI-Designs

Abb. 1: Das magische Dreieck des UI-Designs

Auf der einen Seite müssen wir es schaffen, möglichst viele Funktionen unterzubringen. Konkret in Bezug auf die Formulargestaltung bedeutet das, dass wir alle relevanten Eingabefelder platzieren müssen. Bei einem Kontaktformular mit den üblichen Eingabefeldern wie Name, Anschrift und E-Mail-Adresse ist das kein großes Problem. Anders sieht es bei Formularen aus, die Bestandteil von umfassenden und vor allem komplizierten Workflows sind. Denken Sie dabei an ein Antragsformular einer Behörde, das zunächst nur in Papierversion vorliegt und dann in das digitale Format übertragen werden soll. Das Formular deckt nicht nur den Standardfall ab, sondern muss auch Sonderkonstellationen erfassen und dafür besondere Abfragefelder vorsehen. Man findet im Papierformular hier sogar „Sprunganweisungen“ in der Form: „…haben Sie Frage Nr. 3 mit ‚ja‘ beantwortet, dann weiter mit Frage Nr. 4, ansonsten gehen Sie direkt weiter zu Frage 7.“ Diese Formulare auszufüllen ist bereits in Papierform grauenvoll. Es wird mit Sicherheit nicht besser, wenn wir sie eins zu eins in die digitale Form übertragen. Viele Abfragen und Hinweise müssen auf engstem Raum platziert werden. Die Bildschirmgröße ist dabei stets ein Engpassfaktor. Neben den Formularfeldern müssen Sie auch ergänzende Hinweise und Steuerelemente zur Navigation, wie Buttons zum Löschen, zum Weiterschalten usw. auf dem Bildschirm unterbringen. Das Ganze mag sich auf relativ großen Bildschirmflächen für Desktoprechner noch nicht zu einem ernsten Problem entwickeln. Spätestens jedoch, wenn die Webapplikation auf dem 5,5-Zoll-Screen eines Smartphones angezeigt werden muss, wird es ein Problem. Eine weitere Dimension unseres magischen Dreiecks ist die Verständlichkeit. Haben wir es geschafft, alle notwendigen Eingabefelder zu platzieren, und sind dabei mit dem verfügbaren Platz ausgekommen, dann leidet leider oft die Verständlichkeit. Mängel in diesem Bereich führen zwangsläufig zu Einschränkungen bei der User Experience.

IT Security Summit 2019

Sichere Logins sind doch ganz einfach!

mit Arne Blankerts (thePHP.cc)

Hands-on workshop – Hansel & Gretel do TLS

mit Marcus Bointon (Synchromedia Limited)


Trotzdem gilt es, einen Kompromiss aus den Dimensionen Funktionsvielfalt, Platzangebot und Verständlichkeit zu finden und den Schwerpunkt der Ausrichtung passend zu verschieben.

Abgucken und Auswählen

Was in der Schule nicht erlaubt war, ist hier ausdrücklich erwünscht. Haben Sie unbedingt ein waches Auge für gelungene Entwürfe von Benutzerschnittstellen. Was kann man sich abschauen? Haben Sie ein schön gestaltetes Formular gesehen, machen Sie einen Screenshoot und legen Sie sich einen Katalog für gute Entwürfe an. Hier gilt: Viel hilft viel. Nur wenn Sie aus einem großen Fundus aus Optionen schöpfen können, werden Sie schnell einen guten Formularentwurf hinbekommen. Im konkreten Anwendungsfall können Sie dann das passende Muster (Pattern) auswählen. Die Auswahl des richtigen Patterns ist i. d. R. ein gestufter Prozess. Hierbei wählt man über ein Stufensystem die passende Vorgehensweise für den jeweiligen Praxisfall aus (Abb. 2).

Abb. 2: Gestufter Auswahlprozess für das richtige UI-Pattern [1]

Abb. 2: Gestufter Auswahlprozess für das richtige UI-Pattern [1]

Die große Zahl der Möglichkeiten schrumpft auf diese Weise sehr schnell zusammen. In einem ersten Schritt ist zu entscheiden, ob die Bedienphilosophie grundsätzlich geeignet ist. Ein typisches Beispiel: Kann ich mit Texteingabefeldern arbeiten (Desktop) oder muss ich – wo immer möglich – eine Auswahlmöglichkeit aus vorgebeben Elementen bieten? Weitere Einschränkungen ergeben sich aus dem verfügbaren Budget und dem Beherrschen der Technik. Brechen wir auch diese Aussage auf die Gestaltung von HTML-Formularen herunter. Kennen die Entwickler bestimmte Frameworks oder Bibliotheken? Gibt es ein Budget, um externe Komponenten, zum Beispiel Buttons, Daten- und Texteingabeelemente käuflich zu erwerben oder diese in einem eigenen Prozess erstellen zu lassen? Die Menge der Optionen wird auf diese Weise bereits stark abnehmen. Nicht unwichtig ist der Zeitgeist. Welche Art der Präsentation ist angesagt, welche Form der Darstellung ist heutzutage in vergleichbaren Applikationen üblich? Ihre Anwendung muss sich in das Gesamtbild des Systems integrieren und sollte nicht aus dem „üblichen“ Designmustern herausfallen.

Best Practices

Aus dem Formular muss für jedes Eingabefeld hervorgehen, welche Daten der Nutzer an dieser Stelle eingeben soll. Mit anderen Worten: Wir benötigen ein Steuerelement, das der Datenerfassung dient, und müssen zum Beispiel mittels eines Labels für eine gute und aussagekräftige Beschriftung sorgen. Grundsätzlich gilt: Gut sichtbar sind identifizierende Datenfelder zu platzieren, zum Beispiel „Name“, „Rechnungsnummer“, „Kunden-ID“ usw. Eine separate Beschriftung kann man dann weglassen, wenn das Datenfeld selbstbeschreibend ist. Das könnte zum Beispiel bei einer Farbauswahl der Fall sein. Voraussetzung ist, dass es eindeutig ist. Zum Beispiel: Mit dem Farbauswahlfeld meint man die Schriftfarbe. Platzsparend ist es auch, die Beschreibung einzelner Textfelder als Wasserzeichen darzustellen. Dieses Feature wird durch HTML5 direkt unterstützt und man benötigt in diesem Fall kein extra Label. Datenfelder, die inhaltlich eine Einheit bilden, sollten auf dem Bildschirm auch räumlich nah zueinander platziert werden. Wo es sich anbietet, sollte man mit Visualisierungen arbeiten. Den Status eines Objektes kann man anstatt mit den Adjektiven gut, mittel und schlecht vielleicht eindrücklicher mit den Farbwerten grün, gelb und rot darstellen. Eine wichtige Frage ist auch die Länge von Texteingabefeldern. Die Größenangabe wirkt sich auch auf das Layout, d. h. die Anordnung der Elemente aus. Kleinere Textfelder kann man nebeneinander platzieren. Muss man dagegen mit längeren Texteingaben rechnen, könnten die Eingabefelder ggf. nicht mehr in eine Zeile passen und man muss diese umbrechen. Arbeiten Sie dazu mit realistischen Beispieltexten, die die minimale, typische und maximale Länge der Texteingaben repräsentieren.

Eingabeformulare werden dadurch unübersichtlich, dass man oft versucht, zu viele Einzelfälle in einer Darstellung abzubilden. Es entsteht Komplexität. Wie man damit umgehen kann:

  • Weglassen: Muss wirklich jeder Sonderfall über das Standarddialogfeld abgedeckt werden? Fragen Sie nach, vielleicht kann man ein Eingabeformular für den Großteil aller Szenarien entwerfen, das deutlich einfacher ist. Sonderfälle können dann über eine Zusatzfunktion, zum Beispiel über einen Button mit der Aufschrift „Weitere Optionen“, „Expertenmodus“, „Sonderfälle“ usw. abgedeckt werden.
  • Standardwerte: Geben Sie sinnvolle Werte vor, wenn davon auszugehen ist, dass diese Werte in den meisten Fällen korrekt sind. Nutzer ändern lieber in jeden zehnten Fall einen Standardwert, als dass sie bei jedem Datensatz immer wieder den gleichen Wert eingeben müssen.
  • Verbergen: Erweiterte Dateneingabemöglichkeiten, Sonderfälle und Zusatzeingaben können Sie auch erst auf Anforderung einblenden. Dieser Hinweis geht in eine ähnliche Richtung wie der Tipp zum Weglassen von selten vorkommenden Datenerfassungsoptionen.

Es ist kaum möglich, gute Eingabeformulare (auch digital) zu gestalten, wenn Sie sich mit dem Thema nicht auskennen. Sie müssen versuchen, möglichst weit in die Domäne Ihres Kunden einzudringen. Man sollte verstehen, welche Daten von den Nutzern erfragt werden müssen und welche typischen Eingabekombination auftreten. Ein gutes Hilfsmittel kann das Studium von Papierdokumenten sein, zum Beispiel von Formularen. Hier haben sich Fachleute bereits Gedanken gemacht, in welcher Reihenfolge die Datenfelder angeordnet sind. Dass man ein solches Papierformular nicht eins zu eins in die digitale Version übernehmen kann, darauf haben wir bereits hingewiesen. Ein Ausgangspunkt für die Bearbeitung sind diese Dokumente dennoch. Kommen Sie auf diese Weise nicht weiter, dann müssen Sie nachfragen. Wo? Natürlich bei den späteren Anwendern. Es gilt: Raus ins Feld! Kitzeln Sie Detailwissen heraus, fragen Sie nach typischen Anwenderdaten. Im Übrigen gilt es diese Informationen auch zu besorgen, wenn Sie die Aufgabe des Formulardesigns an externe Dienstleister weitergeben.

Ein konkretes Beispiel: Müssen Sie in Ihrer Applikation Zahlungsdaten bearbeiten, könnten Sie auf das bekannte Überweisungsformular zurückgreifen, wie es bei jeder Bank seit vielen Jahren verwendet wird (Abb. 3).

Abb. 3: Überweisungsformular als Basis für die Gestaltung von Banktransaktionen

Abb. 3: Überweisungsformular als Basis für die Gestaltung von Banktransaktionen

Das Formular, die notwendigen Eingaben und die Reihenfolge sind dem Nutzer bestens vertraut. Es bedarf keinerlei Erläuterungen. Bei Notwendigkeit können Sie es direkt in HTML5 und CSS3 nachbauen. Vor einer technischen Umsetzung empfiehlt sich die Erstellung von Prototypen. Diese sind mit dem Kunden/späteren Nutzer abzustimmen. Einige Hinweise dazu lesen Sie im kommenden Abschnitt.

Prototypen

Eine konsequente agile Entwicklung bezieht den Nutzer frühzeitig in die Planung ein. Das geschieht am besten mit Hilfe von Prototypen. Diese dienen dazu, frühzeitig eine erste Vorstellung vom Aussehen der Webapplikation, d. h. vom Design des User Interface zu bekommen. Ebenso dient ein Prototyp dazu, dass sich die Beteiligten gemeinsam über die Bedienung und das Aussehen abstimmen. Später enttäuschende Kundenrückmeldungen in Form von „Das haben wir uns aber anders vorgestellt!“ können Sie damit weitgehend vermeiden. Um Prototypen zu erstellen, gibt es unterschiedliche Herangehensweisen, Hilfsmittel und Softwaretools. Sie haben u. a. die folgenden Möglichkeiten:

  • Handskizzen
  • Arbeit mit Schablonen (Bezug zum Beispiel von https://www.uistencils.com/)
  • Storyboarding mit PowerPoint
  • Spezielle Offline- oder Onlinetools, wie Balsamiq oder Pencil
  • Apps, um interaktive UI-Prototypen zu generieren (zum Beispiel https://proto.io/)

Mit Hilfe von Prototypen, gleichgültig welche Methode Sie verwenden, möchten Sie das UI im Allgemeinen und Formulare im Speziellen an den konkreten Bedürfnissen des Nutzers ausrichten. Das bezeichnet man als User-Centered-Design. Der Nutzer wünscht sich die Bedienung eines Programmes so intuitiv, angenehm und unkompliziert wie nur möglich. Beim User-Centered-Design steht der Benutzer im Mittelpunkt aller Entwicklungen und Überlegungen. Es gilt die Regel, erst die künftigen Nutzer genau zu identifizieren und sich dann in deren Situation zu versetzten. Die Frage lautet: Welche Personen sollen die Webapplikation verwenden?

Im nächsten Abschnitt kommen wir zu den technischen Möglichkeiten, um Formulare mit Hilfe von HTML5 zu erstellen.

Definition von Formularen in HTML5

Schon immer werden Formulare in HTML mit Hilfe des Tags <form> eingeleitet. Es gibt aber viel mehr zu wissen und zu entdecken als dieses einleitende HTML-Element. Eine kompakte Übersicht der wichtigsten Elemente zur Formulargestaltung könnte folgende Einträge aufweisen:

  • form: Bereich für ein Formular definieren
  • fieldset: Gruppieren von Formularelementen
  • legend: eine Überschrift für ein fieldset-Element definieren
  • label: ein Textlabel zu Formularelementen ergänzen
  • datalist: eine Liste mit Werten als Vorschläge definieren
  • input: Standardfeld für die Dateneingabe
  • button: Schaltfläche für das Versenden der Formulardaten
  • option: Element einer Drop-down-Liste
  • textarea: dient der Eingabe von mehrzeiligem Text

Auf weitere Elemente gehen wir im Laufe des Artikels noch ein. Das Formular wird mittels <form>-Tag eingeleitet. Das sieht bekanntermaßen wie folgt aus:

<form action="/php/datainput.php" method="post" 
        <!--- Es folgen die Formularelemente->
</form>

Hinter dem Attribut action geben Sie an, wohin (URL) die Daten nach Absenden des Formulars gesendet werden sollen. Das Attribut method spezifiziert die Art der Datenweitergabe, d. h. entweder get oder post. Die Attribute action und method benötigen Sie bei einer serverseitigen Verarbeitung der Daten, zum Beispiel mittels der Sprache PHP. Wollen Sie die Daten direkt im Client verarbeiten, zum Beispiel mittels JavaScript, sind diese Angaben nicht notwendig. Wir kommen auf die Möglichkeiten der Datenverarbeitung noch zurück.

Sehen wir uns jetzt die doch recht vielfältigen Möglichkeiten für die Definition von Dateneingabefeldern an. Das Standardeingabefeld ist <input>. Ein einfaches Textfeld für die Erfassung eines Namens sieht dann wie folgt aus:

<input type="text" name="lastName" maxlength="40" size="50" placeholder="Nachname" />

Das wenig überraschende Ergebnis sehen Sie in Abbildung 4.

Abbildung 4: Mittels „&lt;input&gt;“ definieren Sie ein Eingabefeld

Abbildung 4: Mittels „<input>“ definieren Sie ein Eingabefeld

Das HTML-Element <input> bietet eine Reihe von Optionen, die man über das Attribut type anpassen kann. Tabelle 1 gibt Ihnen einen Überblick.

Wert des Attributs type im „<input>“-Tag Beschreibung
text einzeiliges Textfeld
submit/reset/button erzeugt einen Abbrechen-/Reset-/sonstigen Button
password einzeiliges Textfeld mit verdeckter Eingabe (*****)
checkbox Checkboxen als Eingabefelder
color Auswahldialog für Farben
datetime Auswahl von Datum, Uhrzeit und Zeitzone
email Erfassung einer E-Mail-Adresse
file ermöglicht ein Dateiupload, i. d. R. über eine eigene Schaltfläche
month Eingabe von Monat und Jahr
 number  Textfeld für Zahlen
range  Textfeld für Zahlen; Begrenzung auf einen Bereich
 radio  Definition von Radiobuttons
 search  Suchfeld
 tel  Eingabefeld für Telefonnummern
 time  Eingabe der Uhrzeit
 url  Erfassung der URL
week Eingabefeld von Jahr und Kalenderwoche

Tabelle 1: Spezifizierung des „<input>“-Tags über das Attribut „type“ [2]

Mit HTML5 haben die Möglichkeiten im Zusammenhang mit dem <input>-Tag zugenommen. Interessante Attribute sind insbesondere placeholder, required und max/min. Mit placeholder wird ein Text definiert, der als Platzhalter angezeigt wird. Die Anzeige erfolgt so lange, bis der Anwender auf das Feld klickt. Durch required können wir angeben, dass ein Feld einen Wert enthalten muss. Mit max/min legen Sie einen maximalen bzw. minimalen Wert für das Eingabefeld fest. Mehrzeilige Texteingabefelder kann man mit dem Tag <textarea> erstellen. Dabei kann man die Anzahl der Zeilen mit dem Attribut rows und die Anzahl der Zeichen pro Zeile mit dem Attribut cols angeben. Wichtig: Ein Zeilenumbruch wird nicht in den Daten gespeichert, sondern ist nur visuell für den Betrachter sichtbar. Sehr häufig werden Auswahlfelder (Drop-down-Listen) eingesetzt. Ein Auswahlfeld wird mit einem <select>-Tag platziert. Die einzelnen Optionen werden durch <option> ausgewiesen. Listing 1 zeigt ein Beispiel.

<select name="Altersgruppe">
  <option value="val1">unter 18 Jahre</option>
  <option value="val2">18 bis 35 Jahre</option>CSS</option>
  <option value="val3">36 bis 59 Jahre</option>
  <option value="val4">älter als 59 Jahre</option>
</select>

Für die Bezeichnung von Eingabefeldern kann man <label> verwenden. Dabei können Sie das <label>-Element einem konkreten Eingabefeld zuordnen. Über das Attribut for geben Sie das Zielelement mit Hilfe des Namens an. Ein weiteres Beispiel:

<label for="lastName">Der Nachname:</label>
<input type="text" name="lastName" maxlength="40" size="50" placeholder="Nachname" />

Um Schaltflächen auf einem Formular darzustellen, verwenden Sie das <button>-Element oder innerhalb von

setzen Sie das Attribut typ auf die Werte submit, reset oder button. Sie sehen, die Möglichkeiten rund um das <input>-Tag sind in HTML5 sehr vielfältig.

In umfassenden Formularen ist es möglich, mehrere Elemente zu einer Gruppe zusammenzufassen. Dazu platziert man die zusammengehörigen Elemente innerhalb von <fieldset>…</fieldset>. Über das Attribut legend können wir eine Beschreibung für eine Datengruppe festlegen. Das Element <fieldset> dient dabei zur logischen Gruppierung von Daten, zum Beispiel kann man damit alle Adressdaten eines Kunden zusammenfassen. Zur optischen Gestaltung ist auch bei Formularen CSS zu verwenden. Trotzdem zeichnen die meisten Webbrowser einen Rahmen um Eingabefelder, die mittels <fieldset> zu einer logischen Einheit zusammengefasst werden. Ein Beispiel zeigt das folgende kurze Listing 2. Das Ergebnis sehen Sie in Abbildung 5.

<form action="/php/datainput.php" method="post">
    <fieldset>
      <legend>Kontaktdaten</legend>
      <input type="text" size="50" placeholder="Vornname" /><br>
      <input type="text" size="50" placeholder="Nachname" /><br>
      <input type="email" size="50" placeholder="E-Mail-Adresse">
    </fieldset>
    <input type="submit">
    <input type="reset">
  </form>
Abb. 5: Mittels „<fieldset>“ werden Eingabefelder logisch gruppiert

Abb. 5: Mittels „<fieldset>“ werden Eingabefelder logisch gruppiert

Ein gestalterisches Mittel, um den Fortgang der Datenerfassung in einem Formular zu dokumentieren, ist ein Fortschrittsbalken. Diesen können Sie über das Element <progress> einfügen. Über das Attribut value zeigen Sie den Fortschritt auf der Skala an:

<progress value="40" max="100"></progress>

Dazu ist natürlich auch der Maximalwert, zum Beispiel max=“100“ zu definieren. Ein solcher Fortschrittsbalken bietet sich dann an, wenn Sie die Datenerfassung auf mehrere Seiten verteilen müssen. Mittels eines Buttons (zum Beispiel „Weiter“) kann der Anwender dann zum nächsten Schritt (Formular) wechseln. Um den Nutzer zu motivieren, kann man nach jedem Abschnitt den Fortschritt der Dateneingabe mit Hilfe eines solchen Balkens darstellen. Der Wert des Attributes value wird dabei beispielsweise mit jedem Klick auf den Button „Weiter“ über JavaScript aktualisiert.

Wir haben eingangs deutlich gemacht, dass es ein gutes Mittel ist, bestimmte Details in einem Eingabeformular zunächst auszublenden. Die Ziele sind mehr Übersichtlichkeit und damit weniger Komplexität für den Nutzer. HTML5 bietet dazu das Element <details>. Ergänzende Informationen in einem Formular können damit erst bei Bedarf aufgeklappt werden.

Übermittlung der Daten aus dem Formular an den Server

Für PHP-Programmierer ist es ein alter Hut: Die Daten aus einem HTML-Formular werden über das Attribut method mittels post oder get an den Server übermittelt und dort zum Beispiel mit PHP weiterverarbeitet. Das sieht wie folgt aus:

form action="/php/datainput.php" method="post"

Alternativ kann man auch get angeben. Die POST-Methode wird dabei für größere Textmengen verwendet. Dabei werden die Daten in einem Block aus Name-Wert-Paaren übertragen. Die Daten sind in dem URL nicht sichtbar. Eine Beschränkung der Menge der zu übertragenden Daten gibt es nicht. Bei Verwendung der Methode GET werden die zu sendenden Daten als Parameter an den URL über ein „?“ angehängt. Mittels des =-Zeichens werden Namen und Werte getrennt und ein &-Zeichen dient dazu, mehrere Name-Wert-Paare aufeinander folgen zu lassen. Die GET-Methode ist damit eher für geringere Datenmengen geeignet. Der Vorteil: Der Nutzer kann eine konkrete Datenabfrage mittels GET an den Server übermittelt wird, als Bookmark speichern. Auf die Verarbeitung der Formulardaten in PHP gehen wir jetzt nicht gesondert ein.

Verarbeitung der Daten in JavaScript

Statt die Daten direkt zum Server zu senden und sie dort beispielsweise mittels PHP zu verarbeiten, können wir sie auch (zunächst) im Client auswerten. Das passiert dann üblicherweise mittels JavaScript. Diese Vorgehensweise nutzt man häufig, um Dateneingaben noch vor der Übermittlung an den Server zu validieren. Sehen wir uns das an einem kleinen Beispiel an. Zunächst ein Auszug aus dem HTML-Dokument. Dargestellt ist die Definition des Formulars (Listing 3).

<form action="/php/datainput.php" method="post">
  <legend Kontaktdaten></legend>  
  <input id="inputFirstName" type="text" size="50" placeholder="Vornname" /><br>
  <input type="text" size="50" placeholder="Nachname" /><br>
  <input type="email" size="50" placeholder="E-Mail-Adresse"><br>
  <input type="submit">
  <input type="reset">
</form>
…
<p id="notes"></p>
…
<script src="script.js"></script>

Interessant ist das Eingabefeld „Vorname“, das wir über das id-Attribut adressierbar gemacht haben. Die Verarbeitung der Daten findet in JavaScript statt. Wir haben dazu in HTML eine JavaScript-Datei eingebunden. Der Code in JavaScript sieht wie in Listing 4 aus.

document.getElementById("inputFirstName").onblur=function(){
  var content=this.value;
  if (content==""){
    document.getElementById("notes").innerHTML="Bitte einen Vornamen angeben";
  }
  else
    document.getElementById("notes").innerHTML="";

Wir greifen über getElementById(…) auf das betreffende Input-Feld zu. Das Ereignis onblur aktiviert einen Event Handler, wenn ein Element den Fokus verliert, d. h. verlassen wird. Das Ereignis onblur ist sozusagen das Gegenteil von onfocus. In diesem Fall prüfen wir, ob der Nutzer einen Text eingegeben hat. Ist dies nicht der Fall, geben wir eine Meldung aus. Hat der Nutzer eine Eingabe getätigt, löschen wir die Meldung. Das war ein simples Beispiel, wie Eingabedaten aus einem HTML-Formular bereits im Client verarbeitet werden können. Der Zugriff erfolgt erwartungsgemäß über den DOM-Baum (Document Object Model) der Webseite.

Wir haben Ihnen jetzt die wichtigsten HTML-Elemente zur Definition von Formularen vorgestellt. Bitte beherzigen Sie dabei folgende technische Grundsätze:

  • Definition: In HTML werden die Formularelemente definiert. Wenn möglich, werden hier über Attribute, wie zum Beispiel required (Eingabe zwingend) oder min/max (Wertebereich definieren), die Grundlagen der Datenvalidierung gelegt
  • Styling: Das erfolgt ausschließlich in CSS. Gruppierende Elemente in HTML wie <fieldset> dienen ausschließlich der logischen Strukturierung
  • Datenvalidierung und Verarbeitung im Client: Greifen Sie mittels JavaScript auf den DOM-Baum der Webseite zu und lesen Sie die Daten direkt aus den Formularfeldern aus
  • Übermittlung zum Server: Die Daten des Formulars werden mittels POST oder GET an den Server übermittelt und können dann dort zum Beispiel mit PHP verarbeitet werden

Nach diesen technischen Abhandlungen sehen wir uns abschließend noch einige Hilfen aus dem Web an, um Standardformulare schneller zu erstellen.

Formulargeneratoren

Individuelle Formulare kann man nur manuell erstellen. Die notwendigen HTML-Elemente haben wir Ihnen gerade erläutert. Ansprechend wird das Design erst durch das passende CSS. Für Standardaufgaben, zum Beispiel ein Kontaktdatenfeld oder ein Adressformular, kann ggf. der ein oder andere Formulargenerator aus dem Internet hilfreich sein. Es gibt kostenfreie und kostenpflichtige Angebote. Beispielsweise finden Sie hier einen Generator für ein Kontaktformular (Abb. 6).

Abb. 6: Generatoren können bei der Erstellung von Standardformularen helfen [6]

Abb. 6: Generatoren können bei der Erstellung von Standardformularen helfen

Als Ergebnis kann man sich das generierte Formular herunterladen. Konkret den HTML-, den CSS-, den JavaScript- und den PHP-Code. Sofern der Quellcode einigermaßen sauber generiert wird, sind Formulargeneratoren eine hilfreiche Sache. Wir raten aber grundsätzlich dazu, den Code nochmals manuell nachzuarbeiten. Probieren Sie den ein oder anderen Generator aus.

Fazit

Der Artikel hat die Gestaltung von Formularen für Webapplikationen betrachtet. Sie haben gesehen: Vor der technischen Umsetzung muss man sich Gedanken über die Auswahl und Anordnung der Elemente machen. Hier ist eine intensive Zusammenarbeit zwischen Designer bzw. Entwickler und den Fachleuten notwendig. Orientierung bei der Formulargestaltung geben Designpatterns, und ein hilfreiches Arbeitsmittel sind Prototypen. Technisch bietet HTML5 viele Möglichkeiten, ansprechende Dateneingabeformulare für jede Art von Webapplikation umzusetzen.

 

Links & Literatur

[1] Wolf, Jürgen: HTML5 und CSS3. 2. Auflage, Rheinwerk Verlag, Bonn, 2016.
[2] Weigelt, Roland: User Interface Patterns – Kochrezepte für die Gestaltung von GUIs. Folien zum Vortrag auf der Developer Week, 2018, roland-weigelt.de

 

PHP Magazin

Entwickler MagazinDieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.

Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -