🧩 عناصر النماذج في HTML: البنية الأساسية لكل تفاعل على الويب

مرحباً بكم في عالم التفاعل! 🎮 إذا كانت الصفحات الثابتة هي جسد الموقع، فإن النماذج هي روحه التفاعلية. في هذا الدرس، سنتعلم معاً عناصر النماذج في HTML (Form Elements) التي تسمح لزوار موقعك بإرسال بياناتهم، أو إجراء بحث، أو التسجيل، أو حتى إبداء رأيهم. كل ذلك يبدأ بفهم هذه العناصر البسيطة والقوية.

النموذج (Form) هو منطقة في صفحة الويب تحتوي على عناصر تحكم مختلفة. مهمتها جمع المعلومات من المستخدم وإرسالها إلى خادم الويب (Server) للمعالجة. تخيلها كاستمارة ورقية رقمية!

🔧 البنية الأساسية: الوسم <form>

كل نموذج يبدأ وينتهي بالوسم <form>. هذا الوسم هو الحاوية الرئيسية التي تجمع كل عناصر النموذج داخلها.

<form action="/submit-data" method="POST">
  <!-- عناصر النموذج ستوضع هنا -->
</form>
  • الخاصية action: تحدد عنوان URL (الرابط) الذي سيتم إرسال البيانات إليه للمعالجة.
  • الخاصية method: تحدد طريقة الإرسال، وأشهرها GET (لطلبات بسيطة مثل البحث) و POST (لإرسال بيانات حساسة أو كبيرة).

🏷️ أهم عناصر النموذج التي ستستخدمها دائماً

1. النص والوسم <label> 📝

قبل أي حقل إدخال، يجب أن نخبر المستخدم عن المطلوب منه. هنا يأتي دور الوسم <label>.

<label for="userName">اسم المستخدم:</label>
<input type="text" id="userName" name="username">
  • الوسم <label>: يكتب النص التوضيحي بجوار الحقل.
  • الخاصية for: تربط التسمية بالحقل. قيمتها يجب أن تطابق قيمة id الخاص بالحقل المرتبط بها. هذا يجعل النقر على النص يفعّل الحقل، وهو مهم جداً لتجربة مستخدم جيدة وسهولة الوصول (Accessibility).

2. ملك الحقول: الوسم <input> 👑

هو الوسم الأكثر استخداماً ومرونة، ويتغير شكله ووظيفته بناءً على قيمة خاصية type.

<!-- حقل نصي لعمر واحد -->
<input type="text" id="fullName" name="fullname" placeholder="أدخل اسمك الكامل">

<!-- حقل كلمة المرور (يخفي الأحرف) -->
<input type="password" id="userPass" name="password">

<!-- حقل بريد إلكتروني -->
<input type="email" id="userEmail" name="email">

<!-- حقل رقم -->
<input type="number" id="userAge" name="age" min="1" max="120">
  • الخاصية type: تحدد نوع الحقل (نص، بريد، رقم، إلخ).
  • الخاصية name: مهمة جداً! هذه هي التسمية التي ستُرسل مع البيانات إلى الخادم لتمييزها.
  • الخاصية placeholder: نص تلميح يظهر داخل الحلفي يختفي عند الكتابة.
  • الخاصية id: معرف فريد للحقل، يربطه مع <label>.

3. الخيارات: <input type="radio"> و <input type="checkbox"> ✅

تستخدم عندما تريد من المستخدم الاختيار من بين بدائل.

<!-- اختيار وحيد (Radio Buttons) -->
<p>اختر جنسك:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">ذكر</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">أنثى</label>

<!-- اختيار متعدد (Checkboxes) -->
<p>اختر اهتماماتك:</p>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">الرياضة</label><br>
<input type="checkbox" id="reading" name="interests" value="reading">
<label for="reading">القراءة</label>
  • type="radio": للاختيار الوحيد من مجموعة. لربطهم ببعض، أعطهم نفس قيمة name.
  • type="checkbox": للاختيار المتعدد.
  • الخاصية value: تحدد القيمة التي سيتم إرسالها إذا تم اختيار هذا الخيار.

4. النص الطويل: الوسم <textarea> 📄

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

<label for="userMessage">رسالتك:</label><br>
<textarea id="userMessage" name="message" rows="4" cols="50" placeholder="اكتب رسالتك هنا..."></textarea>
  • rows و cols: تحدد ارتفاع وعرض منطقة النص بعدد الأسطر والأعمدة.

5. القائمة المنسدلة: الوسم <select> مع <option> 📋

تستخدم لعرض قائمة من الخيارات في مساحة صغيرة.

<label for="country">البلد:</label>
<select id="country" name="country">
  <option value="sa">المملكة العربية السعودية</option>
  <option value="eg">مصر</option>
  <option value="ae">الإمارات العربية المتحدة</option>
  <option value="other">دولة أخرى</option>
</select>
  • الوسم <select>: يحيط بقائمة الخيارات.
  • الوسم <option>: يمثل كل خيار فردي داخل القائمة.

6. أزرار التنفيذ: الوسم <button> 🔘

لتنفيذ إجراء، مثل إرسال النموذج أو مسحه.

<!-- زر الإرسال الرئيسي -->
<button type="submit">إرسال البيانات</button>

<!-- زر لمسح الحقول -->
<button type="reset">مسح النموذج</button>

<!-- زر لعمل شيء آخر (سنربطه بـ JavaScript لاحقاً) -->
<button type="button">زر عادي</button>
  • type="submit": الزر الأهم. عند النقر عليه، يتم إرسال كل بيانات النموذج إلى عنوان action.
  • type="reset": يمسح كل ما كتبه المستخدم ويعيد الحقول لحالتها الأولى.

🧱 مثال عملي: نموذج تسجيل بسيط

لنطبق ما تعلمناه في نموذج مصغر لتسجيل مستخدم جديد.

<form action="/signup" method="POST">
  <h3>انشاء حساب جديد</h3>

  <label for="regName">الاسم الكامل:</label><br>
  <input type="text" id="regName" name="fullname" required><br><br>

  <label for="regEmail">البريد الإلكتروني:</label><br>
  <input type="email" id="regEmail" name="email" required><br><br>

  <label for="regPass">كلمة المرور:</label><br>
  <input type="password" id="regPass" name="password" required><br><br>

  <label>الجنس:</label><br>
  <input type="radio" id="regMale" name="gender" value="male" required>
  <label for="regMale">ذكر</label>
  <input type="radio" id="regFemale" name="gender" value="female">
  <label for="regFemale">أنثى</label><br><br>

  <button type="submit">إنشاء الحساب</button>
  <button type="reset">إعادة تعيين</button>
</form>
  • الخاصية required: ميزة رائعة في HTML5 تجعل الحقل إلزامياً ولا يسمح بإرسال النموذج إلا إذا تم ملؤه.