32. مدخلات النموذج المتقدمة (التاريخ، النطاق، اللون)

قدمت HTML5 أنواع مدخلات متخصصة توفر وظائف محسّنة وعناصر تحكم واجهة مستخدم أصلية (native UI controls)، مما يلغي الحاجة إلى أدوات JavaScript المعقدة.

32.1 إدخال التاريخ (type="date")

يعرض أداة اختيار التاريخ، مما يسهل على المستخدمين تحديد تاريخ.

html <label for="dob">تاريخ الميلاد:</label> <input type="date" id="dob" name="birth_date">

32.2 إدخال النطاق (type="range")

يعرض عنصر تحكم شريطي (slider). يتطلب خاصيات min و max، واختيارياً step.

html <label for="volume">مستوى الصوت:</label> <input type="range" id="volume" name="volume_level" min="0" max="100" value="50">

32.3 منتقي الألوان (type="color")

يعرض أداة اختيار الألوان الأصلية.

html <label for="bgcolor">اختر لون خلفية:</label> <input type="color" id="bgcolor" name="preferred_color">

32.4 إدخال الأرقام (type="number")

يجبر المستخدم على إدخال بيانات رقمية ويوفر غالباً أسهم زيادة/نقصان صغيرة.

html <label for="quantity">الكمية:</label> <input type="number" id="quantity" name="item_quantity" min="1" max="10">