حلول مصر

سيتم مراجعة بياناتك من قبل فريق العمل، وفي حال قبولك سيتم تفعيل حسابك وإبلاغك بذلك عبر البريد الإلكتروني المسجل.

شرح نماذج الإرسال - HTML

شرح النماذج (الوسم <form>)

هذا الدرس يُعد نقلة نوعية، حيث سنتعلم كيفية "استقبال" و "جمع" المعلومات "من" المستخدم. النماذج (Forms) هي الوسيلة الأساسية التي تتيح للمستخدم التفاعل مع الموقع، سواء عن طريق ملء استمارة تسجيل، أو كتابة تعليق، أو إدخال بيانات بحث، أو إرسال رسالة "اتصل بنا".

سنتناول بالتفصيل الوسم الحاوي <form>، والوسم متعدد الأغراض <input>، وكيفية استخدام <label> لإمكانية الوصول، بالإضافة إلى عناصر النماذج الأخرى مثل <textarea> و <select>.

الوسم الحاوي <form>: التعريف والغرض

الوسم <form> هو "وسم حاوٍ" (Container Tag) مزدوج. وظيفته الدلالية هي تغليف جميع عناصر الإدخال (Inputs, Textareas, Buttons, etc.) التي تشكل "نموذجاً" واحداً.

إنه عنصر "كُتَلي" (Block-level) يخبر المتصفح أن كل ما بداخله هو جزء من وحدة واحدة هدفها جمع البيانات وإرسالها إلى وجهة معينة (عادةً خادم أو سيرفر).

لا يمكنك إرسال بيانات بشكل فعال بدون تغليف حقول الإدخال داخل وسم <form>.

خصائص <form>: action و method

وسم <form> لا يعمل بكفاءة بدون خاصيتين أساسيتين (Attributes) تحددان "ماذا" سيحدث عند إرسال النموذج:

1. الخاصية action (الإجراء)

تحدد هذه الخاصية "عنوان URL" (أو المسار) للجهة التي ستستقبل وتعالج البيانات المُرسلة.

يمكن أن يكون هذا المسار صفحة أخرى على نفس الخادم (مثل action="process-form.php") أو عنوان URL مطلق لخادم خارجي (مثل action="https://api.example.com/submit").

إذا تُركت فارغة (action="") أو حُذفت، فسيقوم النموذج بإرسال البيانات إلى "نفس الصفحة" التي يوجد بها.

2. الخاصية method (الطريقة)

تحدد هذه الخاصية "طريقة الإرسال" أو "كيفية" إرسال البيانات (بروتوكول HTTP). هناك طريقتان رئيسيتان:

  • method="GET" (الافتراضي):
    • "يُلحق" (Appends) بيانات النموذج إلى عنوان URL في شريط المتصفح.
    • (مثال: .../search.php?query=html&page=1)
    • **متى يُستخدم:** للبيانات غير الحساسة، مثل "استعلامات البحث" أو "فلاتر" الصفحة.
    • **عيوبه:** غير آمن (البيانات مرئية)، وله حد أقصى لحجم البيانات (بسبب طول URL).
  • method="POST":
    • "يُرسل" (Sends) بيانات النموذج في "جسم" (Body) طلب الـ HTTP (تكون مخفية عن المستخدم).
    • **متى يُستخدم:** "دائماً" للبيانات الحساسة (مثل "كلمات المرور"، "بيانات البطاقات البنكية") أو عند إرسال كميات كبيرة من البيانات (مثل "المقالات" أو "رفع الملفات").
    • **مزاياه:** آمن (البيانات غير مرئية في الـ URL)، وليس له حد عملي للحجم.

الوسم <input>: عنصر الإدخال الأساسي

الوسم <input> هو "قلب" النماذج. إنه الوسم الأكثر استخداماً وتنوعاً.

إنه "وسم فارغ" (Empty Tag)، أي ليس له وسم إغلاق.

سلوك وشكل <input> يعتمد كلياً على الخاصية الأهم: type. بتغيير قيمة type، يمكن أن يتحول <input> من حقل نصي إلى زر اختيار، إلى منتقي تاريخ، إلى زر إرسال.

الوسم <label>: أهمية إمكانية الوصول (Accessibility)

الوسم <label> (العنوان التوضيحي) هو وسم مزدوج يُستخدم لوصف حقل الإدخال (مثل: "اسم المستخدم:", "كلمة المرور:").

قد يبدو استخدام <p> أو <span> كافياً، ولكنه ليس كذلك. <label> ضروري لـ "إمكانية الوصول".

كيف يعمل؟
نقوم بربط <label> مع <input> باستخدام خاصيتين:

  1. نعطي <input> "مُعرفاً فريداً" (ID) (مثال: id="user_name").
  2. نعطي <label> خاصية for "بنفس القيمة" (مثال: for="user_name").

لماذا هذا الربط مهم؟

  • للمستخدم العادي: عند النقر على "نص" الـ <label>، سيقوم المتصفح تلقائياً بوضع مؤشر الفأرة (Focus) داخل حقل <input> المرتبط به. (مفيد جداً في الهواتف ولأزرار الاختيار).
  • لقارئات الشاشة: عندما يصل المستخدم (الذي يعاني من ضعف البصر) إلى حقل <input>، ستقوم قارئة الشاشة بقراءة "نص" الـ <label> المرتبط به، فيعرف المستخدم ما هو المطلوب إدخاله.

مثال (1): نموذج بسيط (label, input type="text")

يوضح هذا المثال الربط الصحيح بين <label> و <input>. (type="text" هو النوع الافتراضي لإدخال سطر واحد من النص).

مثال (1): الربط الصحيح (for/id) 

<body>

    <form action="/submit-page" method="GET">
        
        <!-- (جرب النقر على "نص" اسم المستخدم) -->
        <label for="username">اسم المستخدم:</label>
        <input type="text" id="username" name="username">
        
        <br><br> <!-- (فاصل أسطر مؤقت للتوضيح) -->
        
        <label for="lastname">الاسم الأخير:</label>
        <input type="text" id="lastname" name="lastname">
        
    </form>

</body>

ملاحظة على الخاصية name:
الخاصية name "إلزامية" لإرسال البيانات. الـ id يربط الـ Label بـ Input، لكن الـ name هو "اسم المفتاح" (Key) الذي يُرسل إلى الخادم. (عند الإرسال، سيتم إرسال: username=القيمة_المدخلة).

أنواع الإدخال (type) الأساسية

كما ذكرنا، type يغير سلوك <input>.

  • type="text": (الافتراضي) حقل نصي لسطر واحد.
  • type="password": حقل نصي لسطر واحد، ولكنه "يُخفي" الإدخال (يعرض نقاط ●●●●). ضروري لكلمات المرور.
  • type="submit": يُنشئ "زراً" (Button). عند النقر عليه، يقوم هذا الزر بـ "إرسال" (Submit) النموذج بالكامل (أي تنفيذ الـ action والـ method). النص على الزر افتراضيًا "Submit" (إرسال)، ويمكن تغييره بخاصية value (مثال: value="تسجيل الدخول").

مثال (2): نموذج تسجيل دخول (password, submit)

مثال (2): نموذج تسجيل دخول 

<body>

    <h2>تسجيل الدخول</h2>
    <form action="/login" method="POST">
        
        <div>
            <label for="user">اسم المستخدم:</label>
            <input type="text" id="user" name="username">
        </div>
        
        <br>
        
        <div>
            <label for="pass">كلمة المرور:</label>
            <input type="password" id="pass" name="password">
        </div>
        
        <br>
        
        <div>
            <input type="submit" value="تسجيل الدخول">
        </div>
        
    </form>

</body>

أنواع الإدخال للاختيارات (radio, checkbox)

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

type="radio" (أزرار الاختيار)

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

القاعدة الأهم: لربط مجموعة أزرار radio معاً (لجعلها "مجموعة واحدة")، يجب أن تشترك جميعها في "نفس الخاصية name".

(مثال: إذا كان لديك 3 أزرار "نعم"، "لا"، "ربما"، يجب أن يكون name="answer" للثلاثة).

type="checkbox" (مربعات الاختيار)

تُستخدم لتقديم قائمة من الخيارات، يُسمح للمستخدم باختيار "أكثر من عنصر" (أو عدم اختيار أي شيء).

يمكن أن يكون لكل checkbox خاصية name مختلفة، أو يمكن أن تشترك في نفس الاسم (إذا كان الخادم مُعداً لاستقبال مصفوفة).

مثال (3): نموذج اختيارات (radio و checkbox)

لاحظ كيف أن النقر على <label> المرتبط بزر radio أو checkbox يقوم بتفعيله مباشرة.

مثال (3): Radio و Checkbox 

<body>

    <form action="/survey" method="POST">
        
        <h3>اختر خطة اشتراك واحدة (Radio):</h3>
        <input type="radio" id="plan_free" name="plan" value="free">
        <label for="plan_free">مجانية</label><br>
        
        <input type="radio" id="plan_pro" name="plan" value="pro">
        <label for="plan_pro">احترافية (Pro)</label><br>
        
        <input type="radio" id="plan_ent" name="plan" value="enterprise">
        <label for="plan_ent">شركات (Enterprise)</label>

        <h3>اختر اهتماماتك (Checkbox):</h3>
        <input type="checkbox" id="int_dev" name="interest_dev" value="development">
        <label for="int_dev">التطوير</label><br>
        
        <input type="checkbox" id="int_design" name="interest_design" value="design">
        <label for="int_design">التصميم</label><br>
        
        <input type="checkbox" id="int_market" name="interest_market" value="marketing">
        <label for="int_market">التسويق</label>
        
    </form>

</body>

أنواع <input> في HTML5 (email, number, date)

قدم معيار HTML5 أنواع input جديدة تسهل إدخال البيانات وتوفر "تحققاً أولياً" (Client-side Validation) مدمجاً في المتصفح.

  • type="email": يُظهر لوحة مفاتيح محسنة (تحتوي على "@") في الهواتف. سيمنع المتصفح إرسال النموذج إذا لم يحتوِ الحقل على نص يُشبه البريد الإلكتروني (يحتوي على "@" و ".").
  • type="number": يُظهر لوحة أرقام. يسمح فقط بإدخال الأرقام، ويوفر أسهم صغيرة لزيادة أو إنقاص القيمة.
  • type="date": يُظهر للمستخدم "منتقي تاريخ" (Date Picker) مرئي لاختيار اليوم/الشهر/السنة، مما يمنع الأخطاء في إدخال التواريخ.

عناصر النماذج الأخرى: <textarea> و <select>

عندما لا يكون <input> كافياً، نستخدم هذه العناصر المتخصصة.

<textarea> (مساحة نصية)

يُستخدم لإدخال "نصوص طويلة متعددة الأسطر" (مثل المقالات، التعليقات، أو محتوى الرسائل).

إنه "وسم مزدوج" (<textarea>...</textarea>). (أي نص يوضع بداخله يمثل القيمة الافتراضية).

يتحكم في حجمه بالخاصيتين rows (عدد الصفوف) و cols (عدد الأعمدة/الأحرف).

<select> و <option> (القائمة المنسدلة)

تُستخدم لإنشاء "قائمة منسدلة" (Dropdown Menu)، وهي بديل ممتاز لأزرار radio عندما تكون الخيارات كثيرة جداً.

  • <select>...</select>: الوسم الحاوي للقائمة (يأخذ هو name).
  • <option>...</option>: وسم مزدوج يمثل "كل اختيار" داخل القائمة.

مثال (4): نموذج "اتصل بنا" متكامل

هذا المثال يجمع كل ما تعلمناه: form, label, input (text, email), select, textarea, input (submit).

مثال (4): نموذج "اتصل بنا" 

<body>

    <h2>تواصل معنا</h2>
    <form action="/contact-submit" method="POST">
        
        <div>
            <label for="full_name">الاسم الكامل:</label><br>
            <input type="text" id="full_name" name="full_name">
        </div>
        <br>
        <div>
            <label for="email_addr">البريد الإلكتروني:</label><br>
            <input type="email" id="email_addr" name="email_address">
        </div>
        <br>
        <div>
            <label for="reason">سبب التواصل:</label><br>
            <select id="reason" name="reason_for_contact">
                <option value="">-- اختر سبباً --</option>
                <option value="sales">استفسار مبيعات</option>
                <option value="support">دعم فني</option>
                <option value="general">سؤال عام</option>
            </select>
        </div>
        <br>
        <div>
            <label for="message_body">رسالتك:</label><br>
            <textarea id="message_body" name="message" rows="5" cols="40"></textarea>
        </div>
        <br>
        <div>
            <input type="submit" value="إرسال الرسالة">
        </div>

    </form>

</body>

تنظيم النموذج: <fieldset> و <legend>

في النماذج الطويلة جداً (مثل استمارات التسجيل التي تطلب "بيانات شخصية" ثم "بيانات العنوان" ثم "بيانات الدفع")، يُفضل دلالياً تجميع الحقول ذات الصلة معاً.

  • <fieldset>...</fieldset>: وسم حاوٍ "كُتَلي" (Block-level) يُستخدم لـ "تجميع" أجزاء من النموذج. افتراضيًا، يرسم المتصفح "إطارًا" (Border) حول هذه المجموعة.
  • <legend>...</legend>: يُستخدم "فقط" كأول ابن مباشر لـ <fieldset>، ويوفر "عنواناً" (Caption) لهذه المجموعة (يظهر العنوان قاطعاً للإطار العلوي).

هذا التنظيم ممتاز لإمكانية الوصول، حيث تخبر قارئات الشاشة المستخدم عند دخوله "مجموعة بيانات شخصية" مثلاً.

مثال (5): النموذج المتكامل مع <fieldset>

هنا قمنا بأخذ نموذج تسجيل الدخول من المثال (2) وقمنا بتغليفه دلالياً.

مثال (5): استخدام fieldset و legend 

<body>

    <form action="/login" method="POST">
        <fieldset>
            <legend>تسجيل دخول الأعضاء</legend>
            
            <div>
                <label for="user">اسم المستخدم:</label>
                <input type="text" id="user" name="username">
            </div>
            
            <br>
            
            <div>
                <label for="pass">كلمة المرور:</label>
                <input type="password" id="pass" name="password">
            </div>
            
            <br>
            
            <div>
                <input type="submit" value="تسجيل الدخول">
            </div>
            
        </fieldset>
    </form>

</body>

(ملخص الدرس):
1. النماذج هي الوسيلة لجمع "مدخلات المستخدم".
2. الوسم الحاوي هو <form>، ويجب تحديد action (إلى أين؟) و method (كيف؟ - GET أو POST).
3. استخدم method="POST" "دائماً" للبيانات الحساسة (مثل كلمات المرور).
4. الوسم <input> هو عنصر الإدخال الرئيسي، وسلوكه يتحدد بالخاصية type.
5. "يجب" استخدام <label> مع الخاصية for لربطها بـ id الخاص بـ <input> لإمكانية الوصول.
6. type="radio" للاختيار الواحد (تتشارك نفس name)، و type="checkbox" للاختيارات المتعددة.
7. <textarea> للنصوص الطويلة، و <select>/<option> للقوائم المنسدلة.
8. <input type="submit"> هو الزر الذي يقوم بإرسال النموذج.
9. استخدم <fieldset> و <legend> لتنظيم النماذج الطويلة دلالياً.