Formulare/Eingabe von Zahlen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

HTML5 bietet eine Vielzahl von neuen Eingabe-Typen für die Eingabe von Zahlen. Sie sind benutzerfreundlich, weil der Browser so nur Zahlen „durchlässt“. Bei mobilen Geräten wird dann ein Nummernfeld eingeblendet, das die Eingabe erleichtert. Falls ein älterer Browser diese nicht kennt, erscheint ein normales Eingabefeld vom type="text", das ebenfalls die Eingabe einer Zahl zulässt. Diese wird dann aber nicht vom Browser, sondern erst vom Server validiert.

<input type="number"> und <input type="range"> in HTML werden beide für numerische Eingaben verwendet, aber sie dienen unterschiedlichen Zwecken und bieten unterschiedliche Benutzererfahrungen.

type = "number"

Ein Eingabefeld mit <input type="number"> beschränkt die Eingabe auf Zahlenwerte, wenn gewünscht, auch mit Dezimalstellen.[1]

Browserunterstützung
caniuse.com

Anwendungsfälle sind Eingaben, bei denen …

  • der Benutzer einen genauen numerischen Wert eingeben muss, z. B. ein Alter, eine Menge, einen Preis oder eine andere Zahl, bei der Präzision wichtig ist.
  • der Bereich der akzeptablen Werte breit ist oder nicht fortlaufend ist, so dass der Benutzer die genaue Zahl eingeben kann, die er möchte.
  • Nutzern die Möglichkeit geboten werden soll, den Wert mit Auf-/Ab-Pfeilen einzugeben oder anzupassen, was den Zugang für Nutzer mit Behinderungen erleichtert.

Berechnung des Body-Mass-Index

Zahleneingabe mit type="number" ansehen …
<form>
  <label for="groesse">
    Größe: 
    <input id="groesse" type="number" 
          min="100" max="220" step="1" value="175"
    inputmode="decimal">
    cm
  </label>
  <label for="masse">
    Masse: 
    <input id="masse" type="number" 
          min="30" max="225" step="0.5" value="75"
    inputmode="decimal">
    kg
  </label>
</form>

In diesem Beispiel werden zwei Zahleneingaben erwartet.

Folgende Attribute können verwendet werden:

  • max: legt Maximalwert fest.
  • min: legt Mindestwert fest.
  • step: legt fest, in welchen Stufen die Werte (durch eine Scrollbar) eingegeben werden dürfen.
  • value: Vorbelegung mit einem bestimmten Wert
  • inputmode: hilft mobilen Geräten, die richtige systemeigene Tastatur-(belegung) zu wählen.

Exkurs Zahlen vs Ziffern

Es gibt viele Dinge, die umgangssprachlich als Zahlen bezeichnet werden, eigentlich aber keine Zahlen sind und mit Zahlen nur das gemeinsam haben, dass sie zum Teil oder ganz aus Ziffern bestehen. So gibt es …

  • Hausnummern, die nicht nur Ziffern, sondern auch Buchstaben enthalten, z.B. 17A oder sogar Hausnamen
  • Postleitzahlen, die eine führende Null enthalten, wie z.B. 01099 Dresden, die aber eben nicht gestrichen werden kann.
    Im UK bestehen die post codes eh aus Buchstaben- und Ziffernkombinationen.
  • Telefonnummern, die Bindestriche und Leerzeichen enthalten; international hat sich anstelle der 0041 ein vorangestelltes +41 durchgesetzt
  • Auch eine IBAN besteht aus einer Kombination von zwei Buchstaben und je nach Land unterschiedlich vielen Ziffern.
  • die Reisepassnummer mit Prüfziffer und Ländercode in Buchstaben

Hier wäre ein Texteingabefeld mit einem pattern die geeignetere Methode.

Fazit: Zahlen stellen eine Menge oder einen Wert dar, der auch negativ oder eine Dezimalzahl sein kann und mit dem gerechnet werden kann.

Um Online-Formulare übersichtlich zu gestalten, kann man Abstände zwischen Zahlengruppen einfügen. Damit diese aber auch mittels „copy & paste“ ausgefüllt werden können, sind die strukturierenden Leerzeichen lediglich mit CSS eingefügt:

Empfänger
SELFHTML e.V.
IBAN
DE78830654080004043154
BIC
GENODEF1SLR

⇒ SELFHTML:Verein/Spenden

type = "range"

Das Eingabefeld <input type="range"> definiert einen Schieberegler (slider), mit dem der Benutzer einen Wert aus einem vordefinierten Wertebereich auswählen soll, indem ein Schiebeknopf (engl. thumb) entlang einer Skala (auch Schiene, engl. track) verschoben wird.[2]

Anwendungsfälle snd Eingaben, bei denen …

  • die Genauigkeit nicht entscheidend ist und der Benutzer aus einem Wertebereich auswählen kann, z. B. beim Einstellen der Lautstärke, der Helligkeit oder einer anderen Einstellung, bei der ein ungefährer Wert ausreicht.
  • du visuelles Feedback bieten möchtest, welcher Wert ausgewählt ist.
  • die Eingabe auf einen bestimmten Bereich beschränkt ist.

Da der Wertebereich vom Entwickler festgelegt ist, kann der Nutzer keine falschen Werte eingeben.

Oft finden sich solche Schieberegler nicht in Formularen, sonder auf Webseiten, bei denen Benutzereingaben gleich verarbeitet werden:

⇒ Formulare/Eingaben mit JavaScript auswerten

Schieberegler

Dieses Beispiel zeigt einen einfachen Schieberegler, dessen Wert gleich von einem kleinen Script übernommen wird:

Einfacher Schieberegler für Graustufen ansehen …
<figure>
  <img id="image" src="Autumn_Leaf.jpg" alt="Autumn leaves">
  <label for="grayscale">Verändere die Graustufen</label>
  <input id="grayscale" type="range" 
        min="0" max="100" value="30">
</figure>

Innerhalb des figure-Elements befindet sich ein Bild und ein Schieberegler.

  • max: legt den Maximalwert fest. (Standardwert ist 100)
  • min: legt den Mindestwert fest. (Standardwert ist 0)
    Diese Attribute hätten in diesem Beispiel weggelassen werden können!
  • value: Vorbelegung mit einem bestimmten Wert, an dem der Schieberegler eingestellt ist.

Der Wert des Schiebereglers wird mit JavaScript ausgelesen und mit JavaScript als Wert für den grayscale() Graustufenfilter verwendet: 

document.querySelector('#grayscale').addEventListener('input', grayscaleImage);

function grayscaleImage() {
	var imageElement = document.querySelector('#image');
	var grayscaleInputElement = document.querySelector('#grayscale');
	imageElement.style.filter = 'grayscale(' + parseInt(grayscaleInputElement.value) /
		parseInt(grayscaleInputElement.max) + ')';
	return false;
}

Der Schieberegler hat leider keine Anzeige des aktuellen Werts. Mit dem output-Element kann der aktuelle Wert z.B. in einer Sprechblase dargestellt werden.

Gestaltung mit CSS

Wie alle Eingabeelemente weicht die Darstellung der Schieberegler von Browser zu Browser mehr oder weniger stark ab. Das ist jedoch nicht weiter schlimm, da Nutzer ja nur das UI ihres Browsers kennen und im Allgemeinen nicht vergleichen. Deshalb ist der Versuch Cross-Browser-Schieberegler zu erstellen, oft nur ein Herumschrauben an letzten Details.[3] [4]

Mit accent-color kann die Skala der Schiebereglers sowie der Schiebeknopf (im Firefox nur im gedrückten Zustand) mit einem Handgriff eingefärbt werden. 

<input type="range" style="accent-color:gold">

Dies ist einfacher als das Ausblenden der Schiene mit appearance: none und Einfärben des Hintergrunds, wie es hier im Farbwähler erfolgt ist.

Schieberegler mit Sprungmarken

Die Skala des Schiebereglers kann mit datalist vorgeschlagene Werte als Sprungmarken erhalten. Zusätzlich zur Position des Schiebeknopfs soll der eingegebene Wert visualisiert werden:

Bewertungsfunktion mit Ergebnisausgabe ansehen …
<label for="content">Inhalt</label>
<input type="range" id="content" name="content" min="0" max="5" step="1" list="rating">
<output id="contentOutput" aria-live="polite"></output>

<label for="layout">Layout</label>
<input type="range" id="layout" name="layout" min="0" max="5" step="1" list="rating" >
<output id="layoutOutput" aria-live="polite"></output>

<datalist id="rating" style="--list-length: 6;">
  <option value="0">
  <option value="1">
  <option value="2">
  <option value="3">
  <option value="4">
  <option value="5">
</datalist>
  • list: legt fest, welche datalist für Vorschläge eingebunden wird.
    Sie erhält als Wert die id der Liste
  • step: legt fest, in welchen Stufen die Werte eingegeben werden dürfen.
    (Wenn als Minimalwert 0, als Maximalwert 1 und Step 1 eingegeben wird, hat man einen (zugegebenermaßen uneleganten) Kippschalter.)

Das output-Element erhält ein aria-live-Attribut, dessen Wert polite den Screenreader anweist, das Ergebnis bei der nächsten Gelegenheit anzugeben.

Der zweite Schieberegler erhält mit accent-color eine goldene Färbung.

Nicht so schön ist die fehlende Beschriftung an den Sprungmarken, die im nächsten Beispiel hinzugefügt werden soll.

Ursprünglich versuchte ich, den Inhalt des option-Elements sichtbar zu machen: 

  <option value="0">0</option>

Hier scheiterten jegliche Versuche, die Werte sichtbar zu machen.

So geht's:

Bewertungsfunktion mit beschrifteten Sprungmarken ansehen …
<input type="range" id="content" name="content" min="0" max="5" step="1" list="rating">
<datalist id="rating" style="--list-length: 6;">	
  <option value="0" label="0"></option>
  <option value="1" label="1"></option>
  <option value="2" label="2"></option>
  <option value="3" label="3"></option>
  <option value="4" label="4"></option>
  <option value="5" label="5"></option>
</datalist>

Jedes option-Element erhält ein weiteres label-Attribut, dessen Werte nun mit CSS entlang der Sprungmarken sichtbar gemacht werden: 

datalist {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

Nachteil dieser Methode: Jeder Schieberegler muss nun eine eigene Datalist erhalten.

to be done

Ein vertikaler Schieberegler

Gerade bei Größen und Höhenangaben ist es oft attraktiv einen vertikalen Schieberegler zu haben.

vertikaler Schieberegler ansehen …
input[type="range"].vertikal {
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 10px;
    height: 250px;
    background-image: repeating-linear-gradient(0deg, white, white 8%, black 8%, black 9%);
}

<form  oninput="x.value=parseInt(groesse.value)">
    <label for="groesse" id="n1">0cm</label> 
    <input class="vertikal" name="groesse" id="groesse" 
           type="range" min="0" value="80" max="250" 
           orient="vertical">
    <label for="groesse" id="n2">250cm</label>
    <output name="x" for="groesse">80</output>
</form>

Im Beispiel wird das Eingabefeld direkt angesprochen, wobei aber unterschiedliche Angaben für die jeweiligen Browser gemacht werden müssen:

  • Chrome und Opera werden über -webkit-appearance angesprochen
  • der Firefox benötigt ein proprietäres, nicht-standardisiertes Attribut orient="vertical" im HTML-Code.[5]

Im Firefox hat der Schieberegler durch den repeating-linear-gradient() ein Meterstab-ähnliches Hintergrundmuster bekommen. Für Chrome und Opera erforderte dies ein Ausschalten mittels -webkit-appearance: none;, was dann aber die vertikale Einstellung des Schiebereglers blockieren würde.

Eine weitere Möglichkeit wäre es, den Regler mit transform:rotate(270deg); zu drehen (270 Grad, damit der Nullpunkt unten ist.).

Da die Schieberegler unterschiedliche Maße haben (im IE war er viel breiter als in den anderen Browsern), ist aber in dieser Version das Positionieren viel schwieriger.

Schieberegler mit Mehrfacheingaben (multirange)

In HTML5.1 sollte neu ein Attribute multiple eingeführt werden, das Mehrfacheingaben ermöglicht.

Schieberegler mit zwei verschiebbaren Eingabepunkten 
<input type="range" multiple value="10,80">

Lea Verou hat einen kleinen Polyfill programmiert, mit dem es jetzt schon ausprobiert werden kann.[6]

Dies wäre ein guter Use Case für ein Web Component.



Weblinks

  1. ↑ MDN: <input type="number">
  2. ↑ MDN: <input type="range">
  3. ↑ Creating A Custom Range Input That Looks Consistent Across All Browsers von Alyssa Holland, 23.12.2021 (smashing magazine)
  4. ↑ Styling Cross-Browser Compatible Range Inputs with CSS von Daniel Stern Jun 2, 2020 (css-tricks)
  5. ↑ MDN: Non-standard attributes orient
  6. ↑ Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders (Lea Verou)
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Formulare/Eingabe_von_Zahlen&oldid=99139“