HTML5-Zahleneingabetyp

Der Nummer Dieser Eingabetyp wird zur Angabe eines numerischen Werts verwendet. Es wird verwendet, um die Zahl zu erfassen, entweder eine Ganzzahl oder eine Gleitkommazahl. Alle bekannten Browser verwenden dies als Spinner, der auf der rechten Seite des Textfelds über einen Aufwärts- und Abwärtspfeil verfügt, um den Zahlenwert zu erhöhen oder zu verringern. Wenn wir type=“number“ im Typattribut des Tags angeben, wird ein Zahleneingabefeld erstellt.

Der Nummer Der Eingabetyp hat folgende Attribute:

  • Wert: Der Anfangswert, wenn eine Seite zum ersten Mal geladen wird.
  • Schritt: Gibt an, wie stark der Wert geändert werden soll, wenn Sie auf die Aufwärts- oder Abwärtspfeile des Steuerelements klicken. Der Standardwert ist 1.
  • Mindest: Stellt den kleinsten Wert der Zahl dar.
  • max: Stellt die größte Zahl der eingegebenen Zahl dar.

Browser-Unterstützung

Der Nummer Der Eingabetyp wird von Browsern wie Google Chrome 8.0, Opera, Safari, IE unterstützt.

Syntax von Nummer Eingabetyp

<input type="number" name="some-name" min="0" max="20" step="2"/>

Beispiel für einen HTML5-Eingabetyp

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
       <title>number input type</title>
</head>
<body>
     <form>
          <input type="number" min="2" max="15" step="1" value="0" name="myNumber">
     </form>
</body>
</html>

Wie im obigen Programm gezeigt, haben wir den Eingabetyp „Zahl“ verwendet, der einen numerischen Wert angibt, der entweder eine Ganzzahl oder eine Gleitkommazahl ist. Es gibt Attribute an, nämlich min, um die kleinste Zahl darzustellen, und max-Attribut, um die größte Zahl anzugeben Das Schrittattribut gibt an, wie stark der Wert geändert werden soll, wenn Sie auf die Aufwärts- oder Abwärtspfeile des Steuerelements klicken. Das Wertattribut gibt den Anfangswert an, wenn die Seite zum ersten Mal geladen wird, und das Namensattribut gibt den Namen des Formularteils an.

HTML5-Eingabetyp-Demo

  • Speichern Sie die Datei als number_example.html in Ihrem System.
  • Öffnen Sie einfach die Datei im Browser. Sie sehen das folgende Bild im Browser. Beachten Sie, dass der Browser die HTML5-Spezifikation unterstützen muss.

Wenn der Ausführungsprozess erfolgreich abgeschlossen ist, erhalten wir die folgende Ausgabe:

HTML5-Zahleneingabetyp

Wenn wir das Programm ausführen, erhalten wir eine Zahl von 2 bis 15, da wir die Mindestzahl auf 2 und die Höchstzahl auf 15 festgelegt haben. Die Zahl erhöht oder verringert sich um eine Zahl, da wir den Schrittwert auf 1 festgelegt haben.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen