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 Begriffe, die umgangssprachlich als Zahlen bezeichnet werden, eigentlich aber Zeichenketten sind, die eben nur aus Ziffern gebildet werden. So können …

  • Hausnummern nicht nur Ziffern, sondern auch Buchstaben enthalten, z.B. 17A oder sogar Hausnamen
  • Postleitzahlen eine führende Null enthalten, wie z.B. 01099 Dresden, die aber eben nicht gestrichen werden können.
    Im UK bestehen die post codes eh aus Buchstaben- und Ziffernkombinationen.
  • Telefonnummern 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.

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.

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.

Farbig oder Schwarzweiß?

Einfacher Schieberegler 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.

Bewertungsfunktion

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

Bewertungsfunktions 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">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>  
</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.

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]

farbige Schieberegler

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.

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: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#orient 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=99115“