شرح عناصر إدخال التاريخ والوقت في HTML واستخدامها داخل النماذج

شرح عناصر النموذج (Form Inputs) في HTML: إدخال التاريخ والوقت

في هذا الدرس سنتعرف معًا على طريقة استخدام مجموعة من عناصر الإدخال (Input Elements) في HTML، والتي تُستخدم بشكل شائع داخل النماذج مثل صفحات التسجيل أو تسجيل الدخول أو استمارات البيانات.

مراجعة سريعة لعناصر الإدخال الأساسية

قبل أن نبدأ، دعونا نُلقي نظرة سريعة على العناصر التي تم شرحها سابقًا، والتي تشمل أنواعًا مختلفة من الإدخالات مثل:

• text لإدخال النصوص

• number للأرقام

• password لكلمات المرور

• email للبريد الإلكتروني

• range لاختيار قيمة من شريط تمرير

• checkbox وradio لاختيارات متعددة

كل هذه العناصر يتم التحكم فيها من خلال خصائص أو سمات (Attributes) مثل:

• type: لتحديد نوع الإدخال

• value: لتحديد القيمة الافتراضية

• placeholder: لوضع نص إرشادي داخل الحقل

• required: لجعل الحقل إلزاميًا

• min / max: لتحديد أقل وأعلى قيمة مسموح بها

• step: لتحديد خطوات القيم المسموح بها (خاصة مع الأرقام أو النطاقات)

---

ربط العناصر باستخدام label و id

يمكنك ربط عنصر الإدخال مع عنصر label باستخدام الخاصية for داخل وسم label، ويكون لها نفس قيمة الخاصية id في وسم input. هذا الربط يُسهّل على المستخدمين النقر على النص ليتم توجيه المؤشر مباشرة إلى الحقل المرتبط.

---

إدخال التاريخ (Date Input)

لإضافة حقل يسمح للمستخدم بإدخال التاريخ، نستخدم:

<input type="date" id="birthdate" name="birthdate">

سيظهر للمستخدم تقويم يمكنه من اختيار اليوم والشهر والسنة بسهولة. ويُستخدم هذا الحقل عادة لتحديد تاريخ الميلاد.

---

إدخال الشهر فقط (Month Input)

في حال كنت تريد من المستخدم تحديد شهر وسنة فقط، استخدم النوع التالي:

<input type="month" id="month" name="month">

سيمكن للمستخدم اختيار شهر وسنة من قائمة منسدلة مخصصة لذلك.

---

إدخال الأسبوع (Week Input)

إذا كنت بحاجة لإدخال الأسبوع من السنة، يمكنك استخدام:

<input type="week" id="week" name="week">

وسيتمكن المستخدم من اختيار الأسبوع بالتحديد، مثل الأسبوع 44 من عام 2025.

---

إدخال الوقت فقط (Time Input)

للسماح للمستخدم بإدخال الوقت فقط (مثل الساعة والدقيقة)، استخدم:

<input type="time" id="appointment" name="appointment">

يتيح هذا الإدخال للمستخدم اختيار الوقت إما يدويًا أو من خلال واجهة الساعة.

---

إدخال التاريخ والوقت معًا (Datetime-Local Input)

إذا كنت تريد جمع التاريخ والوقت في حقل واحد، فالحل هو استخدام النوع:

<input type="datetime-local" id="meeting" name="meeting">

سيتمكن المستخدم من اختيار كل من اليوم والشهر والسنة بالإضافة إلى الوقت (بالساعات والدقائق).

---

استخدام عناصر الإدخال داخل النماذج

لترتيب الحقول داخل صفحة HTML، يُفضَّل وضع كل عنصر إدخال داخل عنصر div منفصل أو استخدام فواصل br إذا كنت تفضل تنسيقات أبسط. ويفضّل أيضًا تنسيق النموذج باستخدام CSS لتقديم واجهة مرتبة وسهلة الاستخدام.

---

مثال تطبيقي على نموذج إدخال تاريخ ووقت

<form>
  <label for="birthdate">تاريخ الميلاد:</label>
  <input type="date" id="birthdate" name="birthdate"><br><br>

  <label for="month">الشهر:</label>
  <input type="month" id="month" name="month"><br><br>

  <label for="week">الأسبوع:</label>
  <input type="week" id="week" name="week"><br><br>

  <label for="appointment">الوقت:</label>
  <input type="time" id="appointment" name="appointment"><br><br>

  <label for="meeting">التاريخ والوقت:</label>
  <input type="datetime-local" id="meeting" name="meeting"><br><br>

  <button type="submit">إرسال</button>
</form>

---

الخلاصة

عناصر الإدخال في HTML تُعتبر من أهم الأدوات التي يحتاجها أي مطور ويب عند بناء النماذج التفاعلية. وقد تعرّفنا في هذا الدرس على:

• كيفية استخدام أنواع متعددة من حقول الإدخال

• الفرق بين date، month، week، time، و datetime-local

• طريقة ربط الحقول بالوسوم النصية باستخدام label و id

نأمل أن يكون هذا الشرح قد ساعدك في فهم كيفية بناء نماذج تحتوي على تاريخ ووقت بطريقة احترافية.