في هذا الدرس 7تصفّح المواضيع
يوفر حقل التاريخ
<input type="date"> واجهة مدمجة ومتوافقة مع معايير الإتاحة لاختيار الأيام والشهور والسنوات. ويتيح للمستخدم تحديد اليوم إما بالكتابة المباشرة للأرقام أو عبر النقر على التقويم التفاعلي المنبثق.
HTML
<!-- Native date input for booking appointments -->
<form action="/reserve" method="post">
<label for="res-date">Reservation Date:</label>
<input id="res-date" name="date" type="date">
<button type="submit">Check Availability</button>
</form>
بغض النظر عن طريقة عرض التقويم على جهاز المستخدم، يُوحد المتصفح القيمة دائماً وفق صيغة المعيار القياسي
YYYY-MM-DD. ويقضي هذا التوحيد التلقائي على الالتباس الشائع بين ترتيب اليوم والشهر في الثقافات العالمية المختلفة.يتيح عنصر
<input type="time"> للمستخدمين تحديد وقت زمني دقيق يشمل الساعات والدقائق، مع إمكانية إضافة الثواني. وتعرض المتصفحات ساعات تفاعلية أو قوائم دوارة تتكيف مع تفضيلات نظام التشغيل.
HTML
<!-- Time input configured for service business hours -->
<form action="/schedule" method="post">
<label for="appt-time">Appointment Time:</label>
<input id="appt-time" name="time" type="time"
min="09:00" max="18:00">
<button type="submit">Book Slot</button>
</form>تتبع القيمة المنقولة لحقل الوقت صيغة 24 ساعة بدقة مثل
HH:mm أو HH:mm:ss. وعندما تعرض واجهة المتصفح نظام 12 ساعة مع مؤشرات الصباح والمساء، يتولى المتصفح التحويل إلى نظام 24 ساعة تلقائياً دون تدخل يدوي.عندما يحتاج التطبيق إلى جمع التاريخ والوقت معاً في خطوة واحدة، يقدم عنصر
<input type="datetime-local"> واجهة اختيار مدمجة ومترابطة. ويعد مثالياً لجدولة رحلات الطيران ومواعيد الندوات الرقمية وتوصيل الشحنات.
HTML
<!-- Unified date and time input for flight departure -->
<form action="/flights" method="post">
<label for="dep-dt">Departure Date and Time:</label>
<input id="dep-dt" name="departure"
type="datetime-local"
min="2026-11-01T00:00" max="2026-12-31T23:59">
<button type="submit">Search Flights</button>
</form>تستخدم صيغة الإرسال حرف T اللاتيني الكبير فاصلاً بين التاريخ والوقت كما في
YYYY-MM-DDTHH:mm. وتجدر الإشارة إلى أن هذا الحقل لا ينقل فارق النطاق الزمني؛ ولذلك يجب على خوادم التطبيق تحديد النطاق الزمني للمستخدم وتوحيده.تتطلب بعض مسارات العمل اختيار الشهر بالكامل دون الحاجة لتحديد يوم مفرد. يتخصص عنصر
<input type="month"> في جمع زوج السنة والشهر، كما في تواريخ انتهاء البطاقات الائتمانية والدورات المحاسبية.
HTML
<!-- Credit card expiration date selector -->
<form action="/payment" method="post">
<label for="cc-exp">Card Expiration (MM/YY):</label>
<input id="cc-exp" name="exp_month"
type="month" min="2026-11" max="2031-12">
<button type="submit">Verify Card</button>
</form>تتبع القيمة المنقولة صيغة
YYYY-MM بدقة، مثل 2026-11 لشهر نوفمبر 2026. ويخفي المتصفح أعمدة الأيام في التقويم المنبثق، مقدماً شبكة مبسطة من اثني عشر شهراً لتسريع الاختيار وتفادي أخطاء الإدخال.في مجالات إدارة المشاريع وتخطيط دورات التطوير وسلاسل الإمداد، يتيح عنصر
<input type="week"> اختيار أسابيع محددة من العام وفق نظام ترقيم الأسابيع القياسي المعترف به دولياً.
HTML
<!-- Sprint schedule week selector -->
<form action="/sprint" method="post">
<label for="sprint-wk">Project Sprint Week:</label>
<input id="sprint-wk" name="sprint"
type="week" min="2026-W01" max="2026-W52">
<button type="submit">Assign Tasks</button>
</form>| نوع الحقل الزمني | صيغة الإرسال القياسية | نموذج القيمة | مجال الاستخدام الأساسي |
|---|---|---|---|
type="date" |
YYYY-MM-DD |
2026-11-05 |
أعياد الميلاد وحجوزات الفنادق والمواعيد |
type="time" |
HH:mm أو HH:mm:ss |
14:30 |
ساعات العمل اليومية وتنبيهات الأنشطة |
type="datetime-local" |
YYYY-MM-DDTHH:mm |
2026-11-05T14:30 |
إقلاع الطائرات والندوات والبث الحي |
type="month" |
YYYY-MM |
2026-11 |
انتهاء البطاقات المصرفية وفواتير الاشتراكات |
type="week" |
YYYY-Www |
2026-W45 |
دورات العمل الرشيقة وخطط الإنتاج الأسبوعية |
يمنع تطبيق القيود الزمنية حجز المواعيد في التواريخ المنقضية، أو تجاوز الحد الأقصى للحجز، أو اختيار ساعات خارج دوام العمل الرسمي. وتفرض خصائص
min و max و step هذه القيود مباشرة في المتصفح.
HTML
<!-- Restricting bookings to November 2026 with 30-min slots -->
<form action="/book" method="post">
<label for="book-time">Service Slot:</label>
<input id="book-time" name="slot" type="time"
min="09:00" max="17:00" step="1800">
<button type="submit">Confirm Slot</button>
</form>في حقول الوقت، تُقاس خاصية الخطوة بوحدة الثواني؛ ولذلك فإن القيمة
step="1800" تمثل فترة 30 دقيقة، مما يقيد خيارات الحجز على فترات نصف ساعة منظمة مثل التاسعة والتاسعة والنصف صباحاً.على الرغم من دعم المتصفحات الحديثة لمحددات المواعيد المدمجة، يتطلب بناء التطبيقات الاحترافية تخطيطاً معمارياً دقيقاً. استكشف المختبر التفاعلي التالي للتحقق من كيفية إرسال الحقول الزمنية لسلاسل المعايير القياسية في الوقت الفعلي:
احرص دائماً على فحص صحة المواعيد في الخادم؛ ونظراً لخلو الحقل المحلي من معلومات النطاق الزمني، يتعين على الخوادم ربط مدخلات المستخدم بالتوقيت العالمي المنسق قبل تخزينها في قواعد البيانات.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس التعامل مع الحقول الزمنية في HTML: محدد التاريخ، وحقل الوقت، وعنصر التاريخ والوقت المحلي المدمج، وحقول الشهور والأسابيع، وضبط الحدود الزمنية، وتوحيد صيغة المعيار الدولي القياسي. الخطوة التالية تأخذنا لاكتشاف حقول الاختيار والألوان وشرائط التمرير.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 Temporal Input عنصر الإدخال الزمني
- عنصر في نماذج الويب مصمم دلالياً لاستقبال التواريخ والشهور والمواعيد بدقة وتنسيق موحد.
- للمراجعة
- 02 ISO 8601 المعيار القياسي الدولي للتواريخ
- المعيار الدولي لتمثيل التواريخ والأوقات الذي يرتب العناصر من الأكبر إلى الأصغر كالسنة ثم الشهر ثم اليوم.
- للمراجعة
- 03 Calendar Picker محدد التقويم المدمج
- واجهة رسومية مدمجة في المتصفح تسمح باختيار الأيام والشهور بالنقر المباشر دون الحاجة للكتابة اليدوية.
- للمراجعة
- 04 Wire Format صيغة سلك البيانات المنقولة
- السلسلة النصية المنظمة المرسلة في حزمة طلب الشبكة بغض النظر عن طريقة عرض التاريخ في شاشة المستخدم.
- للمراجعة
- 05 Local Time التوقيت المحلي
- تمثيل زمني يعبر عن توقيت المستخدم المحلي دون تضمين بيانات فارق التوقيت عن غرينتش.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 ISO المنظمة الدولية للمعايير
- International Organization for Standardization
- منظمة دولية تضع المعايير القياسية للبيانات والبروتوكولات مثل معايير صيغ التواريخ والأوقات.
- للمراجعة
- 02 UTC التوقيت العالمي المنسق
- Coordinated Universal Time
- المقياس الزمني العالمي الأساسي الذي تُضبط وفقاً له الساعات وفروق التوقيت في العالم.
- للمراجعة
- 03 DOM نموذج كائن المستند
- Document Object Model
- الهيكل البرمجي للمستند الذي تُرجع فيه خصائص قيم الحقول الزمنية سلاسل قياسية موحدة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
أنشئ حقل تاريخ مقيداً بالشهر الحالي باستخدام خاصيتي min وmax وتأكد من تعطيل التواريخ السابقة.
-
اضبط حقل وقت بخاصية الخطوة 1800 لتقييد خيارات المواعيد على فترات نصف ساعة منظمة.
-
استخدم المختبر التفاعلي لاختيار موعد والتأكد من مطابقة الحزمة الناتجة لصيغة المعيار القياسي الدولي.
-
راجع جدول المقارنة وحدد متى يفضل استخدام التاريخ والوقت المدمج بدلاً من فصلهما في حقلين.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
2أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.