Default-Darstellung von Zahlenwerten in Formularen: Desktop-Browser im Vergleich
Kommentare

Die Eingabe verschiedener Zahlenwerte kann an vielen Stellen einer Website zum Einsatz kommen – allerdings werden sie je nach genutztem Browser unterschiedlich dargestellt, weil die entsprechende Spezifikation nicht definiert, welche UI-User-Agents genutzt werden sollten. Geoff Graham hat zusammengefasst, welche unterschiedlichen Ansätze die verschiedenen Browser beim UI zur numerischen Eingabe verwenden.

Default-Darstellung in Desktop-Browsern

Wenig überraschend bietet der Internet Explorer bei den verschiedenen Desktop-Browsern die simpelste Default-Darstellung. Dabei unterscheidet sich die Eingabe eines numerischen Werts in ein Formular optisch nicht von jedem anderem Formular-Text-Input. Tatsächlich gibt es beim Internet Explorer nur eine, wenngleich nützliche, UI-Modifikation: die Möglichkeit, die Eingabe auch wieder zu löschen.

Im Gegensatz dazu machen Firefox, Chrome, Opera und Safari von Spinner-Controls Gebrauch, die Pfeile zum Erhöhen beziehungsweise Reduzieren des Zahlenwerts bereitstellen. Während sie sich zwar leicht entfernen lassen – etwa mit dem appearance-Property im Firefox oder über den Shadow-DOM im Safari – können sie allerdings ebenfalls nicht oder nur schwer mit einem anderen Design versehen werden.

Trotzdem bringen sowohl Safari als auch Chrome ein wenig mehr Flexibilität beim Design der Spinner-Controls mit sich, indem die unsichtbare Box, die den Zahlenwert umgibt, im Shadow-DOM gestylt werden kann. Chrome zeigt zudem die Steuerung nur als Reaktion auf Hover an – eine Funktion, die sich auch in anderen Browsern leicht einfügen lässt.

Opera bietet meistes Styling bei Zahlenwert-Darstellung

Während die anderen Browser die Spinner-Controls innerhalb des Inputs platzieren, floaten sie im Opera-Browser außerhalb des Inputs. Gleichzeitig werden sie mit einer Begrenzung versehen, wodurch sie wie ein vollständiges User Interface wirken.

Ein weiterer Unterschied zwischen der Default-Darstellung in Opera und in anderen Browsern ist die Ausrichtung des Zahlenwerts. Während alle anderen Browsern den Input links ausrichten, richtet Opera ihn rechts aus; dies lässt sich allerdings bei Bedarf leicht mit CSS anpassen.

Der folgende Screenshot fasst die verschiedenen Aspekte der Default-Darstellung von Zahlenwerten in den einzelnen Browsern übersichtlich zusammen:

Vergleich Default-Darstellung Zahlenwerte in Formularen in verschiedenen Browsern

Besonders interessant ist ein solcher Vergleich vor allem, weil er Rückschlüsse auf die User Experience bietet. So ist es wahrscheinlich, dass zwei User vollkommen unterschiedliche Erfahrungen machen, wenn sie Formulare mit numerischem Input auf einer Website nutzen – einfach weil es keinen einheitlichen Browser-Default gibt.

Aufmacherbild: Numbers Heap. Numbers drawn by me. von Shutterstock / Urheberrecht: Ekaterina_Minaeva

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -