Jenis input = "Julat" digunakan untuk membuat kawalan slider, yang membolehkan pengguna memilih nilai dari julat yang telah ditetapkan. 1. Ia terutamanya sesuai untuk adegan di mana nilai perlu dipilih secara intuitif, seperti melaraskan jumlah, kecerahan atau sistem pemarkahan; 2. Struktur asas termasuk atribut min, maksimum dan langkah, menetapkan saiz minimum, maksimum dan langkah masing -masing; 3. Nilai ini boleh diperoleh dan digunakan dalam masa nyata melalui JavaScript untuk meningkatkan pengalaman interaktif; 4. Adalah disyorkan untuk memaparkan nilai semasa dan memberi perhatian kepada kebolehcapaian dan masalah keserasian pelayar apabila menggunakannya.

input type="range" digunakan untuk membuat kawalan slider yang membolehkan pengguna memilih nilai dari julat yang telah ditetapkan. Ia sesuai untuk situasi di mana anda mahu pengguna memilih nombor, tetapi ketepatan yang tepat tidak kritikal - seperti melaraskan kelantangan, kecerahan, atau penarafan sesuatu pada skala.

Apabila anda mahu menggunakannya

Kes penggunaan utama untuk input type="range" adalah apabila anda memerlukan cara yang mudah dan bebas bagi pengguna untuk memilih nilai angka dalam julat tertentu. Ia sangat membantu dalam bentuk atau panel tetapan di mana maklum balas visual (seperti menyeret gelangsar) meningkatkan kebolehgunaan.

• Kawalan kelantangan
• Tetapan kecerahan atau kontras
• Sistem penarafan (contohnya, kadar dari 1 hingga 5)
• Hasil penapisan mengikut harga, saiz, dll.

Input ini tidak memerlukan pengguna untuk menaip nombor secara manual, yang boleh lebih cepat dan lebih mesra pengguna daripada menggunakan kotak teks.

Cara Menetapkannya Struktur HTML Asas

Untuk menggunakan input pelbagai, anda hanya memerlukan beberapa atribut asas:

 <input type = "julat" min = "0" max = "100" step = "5">

Inilah yang dilakukan oleh setiap atribut:

• min : Nilai terendah pengguna boleh memilih.
• max : Nilai tertinggi dibenarkan.
• step : Berapa banyak nilai meningkat atau berkurangan dengan setiap langkah.

Jika anda meninggalkan step , ia mungkir kepada 1. Tetapi jika anda mahu pengguna hanya memilih gandaan 5, tetapkan step="5" .

Anda juga boleh memilih nilai lalai menggunakan atribut value :

 <input type = "julat" min = "0" max = "100" value = "50">

Cara mendapatkan dan menggunakan nilai

Anda boleh mengambil nilai yang dipilih menggunakan JavaScript seperti mana -mana medan input lain. Contohnya:

 const slider = document.QuerySelector ('input [type = "range"]');
slider.adDeventListener ('input', fungsi () {
    console.log (this.value);
});

Ini menjadikannya mudah untuk mengemas kini bahagian lain halaman anda secara real time - seperti menunjukkan nilai semasa bersebelahan dengan gelangsar atau mengemas kini carta atau pratonton berdasarkan nilai yang dipilih.

Beberapa petua:

• Sentiasa tunjukkan nilai semasa di sebelah gelangsar supaya pengguna tahu apa yang telah mereka pilih.
• Jangan lupa kebolehcapaian: Tambah label dan atribut ARIA jika diperlukan.
• Jika menyokong pelayar yang lebih tua, uji bagaimana input jarak kelihatan dan berkelakuan - sesetengah mungkin tidak menggayakannya dengan cara yang sama.

Pada dasarnya itu sahaja. Ia adalah alat kecil yang berguna apabila anda memerlukan input cepat tanpa menaip, dan dengan hanya sedikit JavaScript, ia menjadi lebih berkuasa.

Atas ialah kandungan terperinci Apakah tujuan jenis input = 'julat'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!