Wie kann ich das HTML-Eingabefeld so beschränken, dass es nur numerische Eingaben akzeptiert?-HTML-Tutorial-php.cn

Wie kann ich das HTML-Eingabefeld so beschränken, dass es nur numerische Eingaben akzeptiert?

PHPz

Freigeben： 2023-09-01 13:37:02

nach vorne

1409 Leute haben es durchsucht

Wie kann ich das HTML-Eingabefeld so beschränken, dass es nur numerische Eingaben akzeptiert?

In diesem Artikel erfahren Sie, wie Sie ein HTML-Eingabefeld so einschränken, dass es nur numerische Eingaben akzeptiert.

Wir verwenden den , um ein HTML-Eingabefeld so einzuschränken, dass es nur numerische Eingaben akzeptiert. Dadurch erhalten wir ein numerisches Eingabefeld.

Syntax

Im Folgenden finden Sie die Syntax, um das HTML-Eingabefeld so einzuschränken, dass nur numerische Eingaben akzeptiert werden.

<input type="number">

Nach dem Login kopieren

Beispiel

Das Folgende ist ein Beispielprogramm, um das HTML-Eingabefeld so zu beschränken, dass es nur numerische Eingaben akzeptiert -

<!DOCTYPE html>
<html>
<center>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      input[type=number] {
         width: 10%;
         padding: 12px 20px;
         margin: 8px 0;
         box-sizing: border-box;
         border: 2px solid mediumseagreen;
         border-radius: 4px;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <form action = "" method = "get">
      Enter your Mobile number -
      <input type="number"> <br><br>
      Enter your area Pincode -
      <input type="number"> <br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</center>
</html>

Nach dem Login kopieren

Wenn wir versuchen, einen anderen Wert als eine Zahl einzugeben, ist dies nicht zulässig. Daher sind grundsätzlich nur numerische Werte zulässig.

Beispiel

Im Folgenden finden Sie ein weiteres Beispielprogramm, um ein HTML-Eingabefeld so einzuschränken, dass es nur numerische Eingaben akzeptiert -

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form action = "" method = "get">
      Phone Number:
      <input type="number" name="num" min="1" max="20"><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

Nach dem Login kopieren

Wenn ein Benutzer nach der Beschränkung des Eingabefelds auf eine Zahl Text eingibt und auf die Schaltfläche „Senden“ klickt, wird Folgendes angezeigt: „Bitte geben Sie eine Zahl ein.“

Wir können auch den Wert des Zahleneingabefelds begrenzen.

Wenn der Benutzer nach der Beschränkung des Eingabefelds auf Zahlen einen Wert eingibt, der größer als der Grenzwert ist, und auf die Schaltfläche „Senden“ klickt, wird der folgende Inhalt angezeigt: „Der Wert muss kleiner oder gleich dem angegebenen Grenzwert sein (20)“ „

Beispiel

Im Folgenden finden Sie ein weiteres Beispielprogramm, um ein HTML-Eingabefeld so einzuschränken, dass es nur numerische Eingaben akzeptiert -

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form action = "" method = "get">
      <h3>Select the quantity, and we cannot deliver more than 5.</h3><br>
      Pizza<input type="number" name="num" min="0" max="5"><br>
      Burger<input type="number" name="num" min="0" max="5"><br>
      Garlic Bread<input type="number" name="num" min="0" max="5"><br>
      Pepsi<input type="number" name="num" min="0" max="5"><br>
   </form>
</body>
</html>

Nach dem Login kopieren

Wenn Sie den obigen Code kompilieren und ausführen, werden 4 Felder angezeigt und Sie können den Grenzwert vom Mindestwert 0 bis zum Höchstwert 5 festlegen.

Das obige ist der detaillierte Inhalt vonWie kann ich das HTML-Eingabefeld so beschränken, dass es nur numerische Eingaben akzeptiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!