Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

HTMLنطاقات الإختيار

  • مفهوم نطاق الإختيار
  • إضافة نطاق إختيار

مفهوم نطاق الإختيار

نطاق الإختيار ( Range ) عبارة عن شريط مخصص لاختيار قيم رقمية ضمن نطاق محدد مثلاً من 0 إلى 100.
هذا الشريط يكون عليه زر يمكن تحريكه لاختيار قيمة.

إضافة نطاق إختيار

لإضافة نطاق إختيار يمكنك استخدام الوسم <input> على هذا النحو <input type="range">.

يمكنك إضافة الخصائص التالية لهذا الوسم:

  • id نضيفها له في حال أردنا ربطه بوسم <label>.
  • name نضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.
  • value لإعطائه قيمة أولية.
  • min لتحديد أصغر قيمة فيه.
  • max لتحديد أكبر قيمة فيه.
  • step لتحديد كم ستزيد قيمته كلما تم إزاحته.
  • disabled لجعله يظهر بلون باهت و قيمته غير قابلة للتغيير.


في المثال التالي قمنا بعرض نطاق قيمه يمكن أن تتراوح بين 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">
<label for="volume">Volume between (0 and 20):</label> <input type="range" id="volume" name="volume" min="0" max="20" step="1" value="10">

جرب الكود



في المثال التالي قمنا بعرض نطاق قيمه يمكن أن تتراوح بين 0 و 20 و قيمته الإفتراضية هي 10.
بالإضافة لذلك جعلنا قيمته تزيد أو تقل بمقدار 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">
<label for="volume">Volume between (0 and 20):</label> <input type="range" id="volume" name="volume" min="0" max="20" step="5" value="10">

جرب الكود



في المثال التالي قمنا بعرض نطاق قيمه يمكن أن تتراوح بين 0 و 20 و قيمته الإفتراضية هي 7.
هنا قمنا بجعل النطاق غير مفعّل و بالتالي لا يمكن تغيير قيمته.

المثال الثالث

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

جرب الكود

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة