Bagaimana untuk menggunakan medan jenis input dengan langkah-langkah dalam HTML?-html tutorial-php.cn

Bagaimana untuk menggunakan medan jenis input dengan langkah-langkah dalam HTML?

WBOY

Lepaskan： 2023-09-05 23:49:06

ke hadapan

1067 orang telah melayarinya

Bagaimana untuk menggunakan medan jenis input dengan langkah-langkah dalam HTML?

Dalam artikel ini, kami akan menggunakan medan jenis input dengan langkah-langkah dalam HTML.

Kami menggunakan atribut langkah untuk menentukan selang antara nombor dalam elemen . Sebagai contoh, jika langkah kita = "2", nombornya boleh menjadi -4, -2, 0, 2, 4, dsb.

Saiz langkah menetapkan selang langkah apabila anda mengklik butang nudge atas dan bawah dalam medan input dan gerakkan peluncur ke kiri atau kanan dalam julat tertentu. Jika tiada langkah disertakan secara eksplisit, nilai lalai untuk nombor akan ditetapkan kepada 1 dan untuk jenis input tarikh/masa nilai lalai akan ditetapkan kepada 1 untuk jenis unit.

Nilai langkah lalai untuk input angka ialah 1, hanya integer dibenarkan melainkan asas langkah bukan integer. Nilai langkah lalai untuk masa ialah 1 saat.

Kami juga boleh menggunakan atribut langkah bersama-sama dengan atribut maks dan min untuk mencipta julat nilai dalam medan input.

Tatabahasa

Berikut ialah sintaks untuk menggunakan medan input dan langkah dalam HTML.

<input type="number" id="points" name="points" step="enter number">

Salin selepas log masuk

Contoh

Berikut ialah contoh program menggunakan medan input dan langkah dalam HTML -

<!DOCTYPE html>
<html>
<body>
   <form >
      <label for="points">Step Points:</label>
      <input type="number" id="points" name="points" step="5">
      <input type="submit">
   </form>
</body>
</html>

Salin selepas log masuk

Kami menggunakan step=5 dalam contoh program di atas. Ia akan menavigasi ke -10, -5, 0, 5, 10, 15…………. dll.

Contoh

Berikut ialah satu lagi contoh program menggunakan medan input dan langkah dalam HTML -

<!DOCTYPE html>
<html>
<head>
   <style>
      input[type=text] {
         width: 100%;
         padding: 12px 20px;
         margin: 8px 0;
         box-sizing: border-box;
         border: none;
         background-color: #3CBC8D;
         color: white;
      }
   </style>
</head>
<body>
   <h2>Input fields with color</h2>
   <form>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname" value="John">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname" value="Doe">
   </form>
</body>
</html>

Salin selepas log masuk

Kami memasukkan langkah=10 dalam contoh program di atas. Ini akan menavigasi ke 10, 20, 30, 40, 50, 60…………. dll.

Gunakan langkah pada medan input dengan julat

Langkah ini juga boleh digunakan untuk medan input dengan julat terhad. Oleh itu, harta maksimum dan minimum juga perlu diisytiharkan.

Tatabahasa

Berikut ialah sintaks untuk mencipta julat nilai dalam medan input menggunakan atribut langkah dan atribut maks dan min.

<input type="range" min="0" step="3" max="30">

Salin selepas log masuk

Contoh

Atur cara contoh berikut menggunakan atribut langkah dan atribut maks dan min untuk mencipta julat nilai dalam medan input.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <form >
      <label for="points">Step Points:</label>
      <input type="number" id="points" name="points" min="0" step="3" max="30">
      <input type="submit">
   </form>
</body>
</html>

Salin selepas log masuk

Kami menggunakan step=3 dalam contoh program di atas. Ini akan menavigasi ke 0, 3, 6, 9…………. Dan seterusnya sehingga 30 (seperti yang kami nyatakan maks=30).

Seperti yang kita lihat, nilai tidak mendahului nilai minimum yang dinyatakan dalam medan input.

Seperti yang kita lihat, nilai tidak akan melebihi nilai maksimum yang dinyatakan dalam medan input.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan medan jenis input dengan langkah-langkah dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!