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

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

1. ما هي النماذج؟

النماذج (Forms) في HTML تُستخدم لجمع بيانات المستخدم وإرسالها إلى الخادم لمعالجتها. يتم إنشاء النماذج باستخدام العنصر <form>.

الهيكل الأساسي للنموذج:

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

• action: يُحدد عنوان URL الذي تُرسل إليه البيانات.
• method: يُحدد طريقة إرسال البيانات (GET أو POST).

2. عناصر النموذج الأساسية

أ) حقول الإدخال (Input Fields):

تُستخدم للحصول على بيانات النصوص، الأرقام، البريد الإلكتروني، وغيرها.

أنواع شائعة:

• النصوص:

<input type="text" name="username" placeholder="أدخل اسم المستخدم">

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

<input type="password" name="password" placeholder="أدخل كلمة المرور">

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

<input type="email" name="email" placeholder="أدخل بريدك الإلكتروني">

• الأرقام:

<input type="number" name="age" min="1" max="100" placeholder="أدخل عمرك">

ب) الأزرار (Buttons):

تُستخدم لإرسال البيانات أو لإعادة ضبط النموذج.

مثال:

<button type="submit">إرسال</button>
<button type="reset">إعادة ضبط</button>

ج) مربعات الاختيار (Checkbox):

تُستخدم لتحديد خيارات متعددة.

مثال:

<label>
    <input type="checkbox" name="interests" value="sports"> رياضة
</label>
<label>
    <input type="checkbox" name="interests" value="music"> موسيقى
</label>

د) أزرار الاختيار (Radio Buttons):

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

مثال:

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

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

تُستخدم لاختيار عنصر من قائمة.

مثال:

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

و) منطقة النصوص (Textarea):

تُستخدم لإدخال نصوص طويلة.

مثال:

<textarea name="message" rows="4" cols="50" placeholder="أدخل رسالتك هنا"></textarea>

3. السمات الشائعة لعناصر النموذج

• name: يُحدد اسم الحقل، وهو مهم لإرسال البيانات.
• value: يُحدد القيمة الافتراضية للحقل.
• placeholder: يُضيف نصًا إرشاديًا داخل الحقل.
• required: يجعل الحقل إلزاميًا.
• disabled: يُعطل الحقل.
• readonly: يجعل الحقل للقراءة فقط.

مثال:

<input type="text" name="username" placeholder="اسم المستخدم" required>

4. تحسين النماذج باستخدام CSS

تنسيق الحقول:

<style>
    input, textarea, select {
        width: 100%;
        padding: 10px;
        margin: 5px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover {
        background-color: #45a049;
    }
</style>

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

1. أنشئ نموذج يحتوي على:
   • حقل نصي لاسم المستخدم.
   • حقل بريد إلكتروني.
   • مربع اختيار للاهتمامات (رياضة، موسيقى، سفر).
   • زر لإرسال النموذج.
2. قم بإنشاء نموذج تسجيل يحتوي على:
   • حقل نصي للاسم.
   • حقل لكلمة المرور.
   • زر اختيار لتحديد النوع (ذكر/أنثى).
   • قائمة منسدلة لاختيار الدولة.