الفصل التاسع: النماذج (Forms) في HTML

1. مقدمة إلى النماذج

النماذج (Forms) هي وسيلة لجمع البيانات من المستخدمين وإرسالها إلى الخادم لمعالجتها. تُعتبر النماذج عنصرًا أساسيًا في تصميم واجهات المستخدم.

2. إنشاء نموذج أساسي

الصيغة الأساسية:

<form action="URL" method="METHOD">
    <!-- عناصر النموذج هنا -->
</form>

السمات الرئيسية:

• action: يُحدد عنوان الخادم لمعالجة البيانات.
• method: يُحدد طريقة إرسال البيانات، ويُمكن أن تكون:
  • GET: تُرسل البيانات عبر عنوان URL.
  • POST: تُرسل البيانات في طلب HTTP آمن.

مثال:

<form action="submit.php" method="POST">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name">
    <button type="submit">إرسال</button>
</form>

3. أنواع عناصر الإدخال (Input Types)

أ) النصوص:

<input type="text" name="username">

ب) كلمات المرور:

<input type="password" name="password">

ج) أزرار الاختيار:

<input type="radio" name="gender" value="male"> ذكر
<input type="radio" name="gender" value="female"> أنثى

د) مربعات الاختيار:

<input type="checkbox" name="hobby" value="reading"> قراءة
<input type="checkbox" name="hobby" value="traveling"> سفر

هـ) القوائم المنسدلة:

<select name="country">
    <option value="egypt">مصر</option>
    <option value="ksa">السعودية</option>
</select>

و) النصوص المتعددة الأسطر:

<textarea name="message"></textarea>

ز) أزرار الإرسال:

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

4. السمات الإضافية لعناصر النماذج

أ) السمة placeholder:

<input type="text" placeholder="أدخل اسمك">

ب) السمة required:

<input type="email" required>

ج) السمة maxlength:

<input type="text" maxlength="10">

د) السمة disabled:

<input type="text" disabled>

5. تنظيم النماذج باستخدام <fieldset> و <legend>

<fieldset>
    <legend>معلومات شخصية</legend>
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name">
</fieldset>

6. إرسال البيانات باستخدام JavaScript

إضافة معالج أحداث للنموذج:

<form id="myForm">
    <input type="text" name="username">
    <button type="submit">إرسال</button>
</form>

<script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
        event.preventDefault(); // منع الإرسال الافتراضي
        alert('تم إرسال البيانات!');
    });
</script>

7. تمارين تطبيقية

1. قم بإنشاء نموذج يطلب من المستخدم إدخال الاسم والبريد الإلكتروني وكلمة المرور.
2. أضف مربعات اختيار لأهم الهوايات وقائمة منسدلة لاختيار الدولة.
3. قم باستخدام السمة required لجعل إدخال البريد الإلكتروني إلزاميًا.
4. أضف زر إرسال وأضف معالج JavaScript لعرض رسالة تأكيد عند الإرسال.

بهذا الفصل، تعلمنا كيفية إنشاء النماذج واستخدام عناصر الإدخال المختلفة لجمع البيانات. في الفصل القادم، سنتعلم كيفية تضمين الوسائط المتعددة مثل الصور والفيديوهات في صفحات الويب.