يعد دمج منتقيات الوقت Time picker في نماذج الويب مطلبًا شائعًا للعديد من مطوري الويب. بينما قد تعتقد أن إضافة منتقيات الوقت قد تكون مهمة معقدة وقد تضطر إلى استخدام مكتبات JavaScript. ولكن لدهشتك، هذه مهمة سهلة نسبيًا باستخدام العلامات التي توفرها HTML. يمكن أن يؤدي هذا إلى تقليل مقدار التعليمات البرمجية والوقت المطلوب بشكل كبير لتنفيذ منتقيات التاريخ والوقت في تطبيق الويب الخاص بك.
لإنشاء عنصر تحكم الوقت باستخدام HTML، لدينا علامة <input type=”time”>، حيث يمكن استخدام قيمة الوقت في سمة TYPE للعلامة <input>. دعنا نتعمق في المقالة لمعرفة المزيد حول إضافة منتقي الوقت في النموذج.
HTML <input type=”time”>
يتم إنشاء حقل إدخال الوقت لنموذج الويب باستخدام عنصر HTML <input type="time">. فهو يمكّن المستخدمين من إدخال قيمة زمنية معينة بتنسيق محدد مسبقًا. عندما تريد من المستخدمين إرسال بيانات مرتبطة بالوقت، مثل أوقات المواعيد أو جداول الأحداث أو المواعيد النهائية، يكون نوع الإدخال هذا مفيدًا بشكل خاص.
اعتمادًا على المتصفح والجهاز المستخدم، يوفر العنصر <input type="time"> واجهة سهلة الاستخدام لاختيار الوقت من خلال عرض قائمة منسدلة أو أداة منتقي الوقت.
فيما يلي بناء الجملة لحقل إدخال وقت HTML
<input type="time">
مثال
في المثال التالي، نقوم بإنشاء نموذج بسيط باستخدام منتقي الوقت.
<!DOCTYPE html> <html> <head> <style> body { text-align: center; background-color: #E8DAEF; } p { font-family: verdana; } </style> </head> <body> <div> <p>Choose time:</p> <input type="time" /> </div> </body> </html>
عندما نقوم بتشغيل الكود أعلاه، فإنه سيولد مخرجات تتكون من النص مع حقل الإدخال المذكور مع الوقت، مما يسمح للمستخدم باختيار الوقت المعروض على صفحة الويب.
مثال
النظر في سيناريو آخر حيث سنستخدم علامة datalist مع منتقي الوقت.
<!DOCTYPE html> <html> <head> <style> body { text-align: center; background-color: #D5F5E3; color: #DE3163; } p { font-family: verdana; } </style> </head> <body> <form action="#"> <p> Avaliable time : <input type="time" name="available" list="tutorial"> <br> <br> <br> <input type="submit" value="Submit"> </p> </form> <datalist id="tutorial"> <option value="13:00"> <option value="15:30"> <option value="20:00"> <option value="23:55"> </datalist> </body> </html>
عند تشغيل الكود أعلاه، ستظهر نافذة إخراج تتكون من نوع إدخال الوقت، مما يسمح للمستخدم بتحديد الوقت من الخيارات المتوفرة في الكود المعروض على صفحة الويب.
مثال
دعونا نلقي نظرة على المثال التالي، حيث سنقوم بإضافة منتقي الوقت باستخدام سمات الحد الأدنى والحد الأقصى.
<!DOCTYPE html> <html> <head> <style> body { text-align: center; background-color: #D6EAF8; font-family: verdana; } </style> </head> <body> <form action="#"> <label for="tutorial"> Choose slot Time: </label> <input id="tutorial" type="time" name="slot" min="10:00" max="16:00" /> <br> <br> <br> <input type="submit" value="Submit"> </form> </body> </html>
عندما نقوم بتشغيل الكود أعلاه، ستظهر نافذة الإخراج، والتي تتكون من حقل الإدخال مع نوع الوقت المذكور وسمات الحد الأدنى والحد الأقصى، مما يسمح للمستخدم باختيار الوقت بينهما. إذا اختار المستخدم وقتًا خارج هذا النطاق، فسوف يطرح استثناءً.
تعليقات
إرسال تعليق