HTML / نطاقات الإختيار
مفهوم نطاق الإختيار
نطاق الإختيار (Range) هو عنصر واجهة مستخدم يتيح للمستخدم اختيار قيمة رقمية ضمن نطاق محدد. يتم تقديم هذا الخيار بشكل شريط أفقي، مما يتيح للمستخدم تحريك زر على هذا الشريط لاختيار قيمة معينة.
على سبيل المثال، قد يتراوح النطاق من 0 إلى 100، مما يسمح للمستخدم باختيار أي قيمة داخل هذه الحدود.
تعتبر هذه الأداة مفيدة جداً في التطبيقات التي تتطلب من المستخدمين تحديد مستويات أو درجات معينة، مثل مستوى الصوت أو سطوع الشاشة، مما يعزز من سهولة الاستخدام والتفاعل.
في هذا الدرس، سنتعلم كيفية إضافة نطاق اختيار إلى صفحات HTML، وكيفية تخصيصه باستخدام خصائص متنوعة لضبط سلوكياته.
إضافة نطاق اختيار
لإضافة نطاق اختيار، يمكنك استخدام الوسم <input> مع تعيين خاصية type إلى "range". سيكون الشكل كالتالي: <input type="range">.
يمكنك تخصيص نطاق الاختيار باستخدام الخصائص التالية:
id: تستخدم لربط النطاق بوسم<label>، مما يسهل على المستخدم النقر على النص المرتبط بالنطاق.name: يحدد الاسم الذي سيتم إرسال القيمة المختارة به عند النقر على زر الإرسال.value: تعطي للنطاق قيمة أولية يتم تعيينها عندما يتم تحميل الصفحة.min: تحدد أقل قيمة يمكن اختيارها في النطاق.max: تحدد أكبر قيمة يمكن اختيارها في النطاق.step: تحدد مقدار التغيير في القيمة عند تحريك الزر. على سبيل المثال، إذا كانت قيمة step تساوي 5، فإن المستخدم يمكنه اختيار قيم مثل 0، 5، 10، 15، وهكذا.disabled: تجعل النطاق غير مفعّل، مما يعني أنه لا يمكن تغييره من قبل المستخدم، ويظهر بلون باهت.
في المثال التالي، نقدم نطاق اختيار يمكن أن تتراوح قيمته بين 0 و 20، حيث القيمة الافتراضية هي 10:
<!DOCTYPE html>
<html>
<body>
<h2>Range Sample</h3>
<form action="/tryit/submitted" method="post">
<!-- هنا قمنا بعرض شريط نطاق قيمته يمكن أن تترواح بين 0 و 20 و القيمة الإقتراضية فيه هي 10 -->
<label for="volume">Volume between (0 and 20):</label>
<input type="range" id="volume" name="volume" min="0" max="20" step="1" value="10">
<br><br>
<input type="submit">
</form>
</body>
</html>
نطاق مع زيادة قيمته بمقدار 5 وحدات
في المثال التالي، قمنا بعرض نطاق يمكن أن تتراوح قيمته بين 0 و 20 مع جعل قيمته الافتراضية هي 10. بالإضافة إلى ذلك، جعلنا قيمته تزيد أو تقل بمقدار 5 وحدات كلما تم تحريكه:
<!DOCTYPE html>
<html>
<body>
<h2>Range Sample</h3>
<form action="/tryit/submitted" method="post">
<!-- هنا قمنا بعرض شريط نطاق قيمته تزيد أو تقل بمقدار 5 وحدات كلمات تم تحريكه -->
<label for="volume">Volume between (0 and 20):</label>
<input type="range" id="volume" name="volume" min="0" max="20" step="5" value="10">
<br><br>
<input type="submit">
</form>
</body>
</html>
نطاق غير مفعّل
في المثال التالي، قمنا بعرض نطاق قيمته يمكن أن تتراوح بين 0 و 20، مع جعل القيمة الافتراضية هي 7. هنا قمنا بجعل النطاق غير مفعّل، مما يعني أنه لا يمكن تغيير قيمته:
<!DOCTYPE html>
<html>
<body>
<h2>Range Sample</h3>
<form action="/tryit/submitted" method="post">
<!-- لجعل المستخدم غير قادر على تغيير قيمته <input> للوسم disabled أضفنا الخاصية -->
<label for="volume">Volume between (0 and 20):</label>
<input type="range" id="volume" name="volume" min="0" max="20" step="1" value="7" disabled>
<br><br>
<input type="submit">
</form>
</body>
</html>