Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan medan jenis input dengan langkah-langkah dalam HTML?
Bagaimana untuk menggunakan medan jenis input dengan langkah-langkah dalam HTML?
- WBOYke hadapan
- 2023-09-05 23:49:061043semak imbas
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">
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>
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>
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">
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>
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!