Rumah >hujung hadapan web >html tutorial >Bagaimana untuk mengehadkan kotak input HTML untuk hanya menerima input angka?

Bagaimana untuk mengehadkan kotak input HTML untuk hanya menerima input angka?

PHPzke hadapan: 2023-09-01 13:37:021405semak imbas

Dalam artikel ini, kita akan belajar cara menyekat kotak input HTML supaya ia hanya menerima input angka.

Kami menggunakan untuk mengehadkan kotak input HTML supaya ia hanya menerima input angka

Sintaks

Berikut ialah sintaks untuk mengehadkan kotak input HTML untuk hanya menerima input angka.

<input type="number">

Contoh

Berikut ialah contoh program untuk mengehadkan kotak input HTML untuk hanya menerima input angka -

<!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>

Jika kita cuba memasukkan sebarang nilai selain daripada nombor, ia tidak akan dibenarkan. Oleh itu, ia hanya membenarkan nilai berangka.

Contoh

Berikut ialah satu lagi contoh program untuk mengehadkan kotak input HTML supaya ia hanya menerima input angka -

<!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>

Selepas mengehadkan kotak input kepada nombor, jika pengguna memasukkan teks dan tekan butang hantar, maka perkara berikut boleh dilihat "Sila masukkan nombor."

Kami juga boleh mengehadkan nilai medan input nombor.

Selepas mengehadkan kotak input kepada nombor, jika pengguna memasukkan nilai yang lebih besar daripada nilai had dan mengklik butang hantar, kandungan berikut akan dipaparkan: "Nilai mestilah kurang daripada atau sama dengan nilai had yang ditentukan (20) "

Contoh

Berikut ialah satu lagi contoh program untuk mengehadkan kotak input HTML supaya ia hanya menerima input angka -

<!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>

Jika anda menyusun dan menjalankan kod di atas, ia akan menunjukkan 4 kotak dan anda boleh menetapkan had dari nilai minimum 0 hingga nilai maksimum 5.

Atas ialah kandungan terperinci Bagaimana untuk mengehadkan kotak input HTML untuk hanya menerima input angka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html if using number this input

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Apakah video iframeArtikel seterusnya：Apakah video iframe

Artikel berkaitan

Lihat lagi