Bagaimana untuk mengehadkan kotak input HTML untuk hanya menerima input angka?-html tutorial-php.cn

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

PHPz

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

ke hadapan

1433 orang telah melayarinya

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

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!