Klare Formulare

Grafische Buttons in Formularen

Allgemeines zu grafischen Buttons .
Server-seitige Image-Maps erfordern einen Mauszeiger! .
Mehrfache Absende-Buttons .
Das BUTTON-Element .
Was gegen grafische Buttons spricht .
Erläuternde Texte für Grafiken .

Allgemeines zu grafischen Buttons

Normalerweise wird mit

<input type="submit" value="Absenden">

der Absende-Button für Formularfelder erzeugt, wobei das value-Attribut den textlichen Inhalt des Buttons bestimmt. Aber Absende-Buttons müssen nicht unbedingt als textliche Buttons, sondern können auch mit Grafiken erzeugt werden, die zur individuellen Gestaltung von Formularen beitragen können. Obwohl solche Grafiken nicht unbedingt eine Barriere bedeuten - es müssen immer Alternativtexte mittels alt-Attribute angeboten werden - so können sie doch Probleme bereiten. Sie müssen dabei wissen, dass ein normaler Absende-Button beim Absenden die name- und value-Attribute der einzelnen Formularfelder an das verarbeitende Programm verschickt. Wenn Sie jedoch eine Grafik einsetzen, so wird diese wie eine Server-seitige Image-Map behandelt und es werden die x- und y-Koordinaten des Klicks auf der Grafik übermittelt. Das setzt natürlich voraus, dass der Benutzer eine Maus einsetzt!

Um barrierefreie grafische Buttons in verschiedenen nicht-visuellen Browsern zu gewährleisten, ist es daher wichtig, dass neben dem alt-Attribut ebenfalls ein name- und value-Attribut eingesetzt werden:

<input type="image" src="grafik/jetzt-gehts-los.gif" alt="Absenden" name="Absenden" value="Absenden">

Detaillierte Informationen zur barrierefreien Gestaltung von grafischen Buttons finden Sie auf [extern, englisch] http://www.cs.tut.fi/ ~jkorpela/ forms/ imagebutton.html

Server-seitige Image-Maps erfordern einen Mauszeiger!

Eben, wenn Sie diese Funktionalität zur Steuerung verschiedener Folge-Aktionen ausreizen, indem Sie echte Image-Maps in Ihren Formularen beschreiben, sollten Sie folgende Empfehlungen befolgen:

Setzen Sie mehrere Absende-Buttons ein, die alle einzeln aufgerufen werden und somit eine eindeutige Folge-Anweisung aufrufen.
Setzen Sie Client-seitige Image-Maps zusammen mit Scripts ein

Mehrfache Absende-Buttons

Mehrere Absende-Buttons sind durch mehrfache INPUT-Elemente des Typs submit (bzw. image) innerhalb eines Formulars möglich, wenngleich stets dieselbe Aktion (action-Attribut des FORM-Elements) ausgeführt werden muss. Um die verschiedenen Absende-Buttons eindeutig zu kennzeichnen, erfordern sie jeweils von einander unterschiedliche name- und value-Attribute:

<input type="submit" name="daten" value="Nur Daten erfassen"> <input type="submit" name="infos" value="Daten erfassen und Informationen zuschicken">

Um festzustellen, welcher Button nun verwendet wurde, kann in der Server-seitigen Anwendung zur Verarbeitung der Formularinhalte das name-Attribut abgefragt werden (das Absenden des Formulars liefert das Datenpärchen name und value aus). Dies ist auch mit unterschiedlichen Absende-Buttons des Typs image möglich.

Wenn Sie Ihr Formular mit mehr als einem Absende-Button testen wollen, dann geben Sie als Webadresse der verarbeitenden Anwendung http://www.tipjar.com/cgi-bin/test ein, etwa:

<form method="post" action="http://www.tipjar.com/cgi-bin/test"> ... </form>

Die Ergebnisse (name und value) des Tests werden dann in Ihrem Browser angezeigt.

Die Berücksichtigung mehrerer solcher Buttons ist im Übrigen seit HTML 2.0 möglich.

button

Die Einbindung grafischer Absende-Buttons kann auch mit dem BUTTON-Element erfolgen. Allerdings wird das in HTML 3.2-Browsern zum Teil überhaupt nicht angezeigt. Auch das INPUT-Element mit type="button" bereitet Probleme, da es als Eingabefeld dargestellt wird.

Was gegen grafische Buttons spricht

Ein Grund, der gegen den Einsatz von grafischen Absende-Buttons spricht ist die verminderte Identifzierung der Grafik als Absende-Button. Viele Besucher erkennen einen Absende-Button an dem grauen Rechteck mit Text. Wenn dieser auf einer Webseite durch Grafik ersetzt wird verringert dies den Wiedererkennungswert.

Grafiken, die als Absende-Buttons für Formulare eingesetzt werden, stellen ebenso Navigationselemente dar und sind daher kontrastreich mit angemessen großer Zeichengröße darzustellen. Aussagekräftige Texte und/oder Symbole sollten sie ebenfalls enthalten. Im Gegensatz zu textlichen Absende-Buttons können grafische Absende-Buttons nicht entsprechend der persönlichen Präferenzen größer skaliert werden.

Erläuternde Texte für Grafiken

Es ist eine Überlegung wert, ob grafische Buttons mit einem sogenannten Tool-Tipp versehen werden sollen, um die Wahrnehmbarkeit und Verständlichkeit zu erhöhen. Entsprechend der HTML 4.01-Spezifikation, ist es möglich, ein title-Attribut den meisten HTML-Elementen zuzuweisen, auch INPUT, um erläuternde oder ergänzende Hinweise zu vermitteln. Diese erscheinen als Text, wenn der Mauszeiger über dem jeweiligen Element gehalten wird. Auch Screen-Reader können diesen Text auslesen.

Wenn das title-Attribut fehlt, zeigt der Microsoft Internet Explorer ersatzweise den Inhalt des alt-Attributs als Tooltipp an. Ebenso nicht den Standards entsprechend zeigt Netscape 4 den Inhalt des name-Attributs an. Es ist deshalb günstig, für alle diese Attribute "sprechende" Worte zu nehmen, auch wenn diese gleich sind.

Es sollte für einen grafischen Absende-Button also verwendet werden:

alt-Attribut als "Ersatz" für die Grafik, wenn sie nicht darstellbar ist,
name-Attribut (Name des Formularfelds, das für die Weiterverarbeitung verwendet wird) mit einer sinnvollen Bezeichnung,
value-Attribut hat keine strukturelle Notwendigkeit (es wird für die Weiterverarbeitung nicht benötigt), ist aber syntaktisch zumindest nicht falsch. Es sollte mit dem gleichen Text wie das alt-Attribut belegt werden, weil es gelegentlich zur Identifizierung eines grafischen Buttons von Browsern herangezogen wird,
title-Attribut ist eine optionale Angabe, um Benutzern weitere Hinweise zur Folge-Aktion beim Abschicken eines Formulars zu geben. Während die drei erstgenannten Attribute typischerweise knapp ausfallen sollten (und im Falle von name sogar ein Wort ohne Leerzeichen und Bindestrich), darf das title-Attribut durchaus eine ausführliche Beschreibung enthalten.