شرح النماذج في HTML بالعربي — بناء form وinput بالتفصيل

كيف يُسجّل المستخدم في موقعك؟ كيف يبحث؟ كيف يُرسل رسالة؟ الإجابة في كلمة واحدة: النماذج (Forms). النماذج هي بوابة التفاعل بين المستخدم والموقع — وكل ما يتعلمه هنا ستجده يومياً في عملك.

وسم النموذج <form>

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

• action — العنوان الذي ستُرسَل إليه البيانات عند الضغط على "إرسال". مثلاً مسار ملف PHP يعالج البيانات من جانب الخادم.
• method — طريقة إرسال البيانات: إما GET (البيانات في URL) أو POST (البيانات في جسم الطلب — أكثر أماناً للبيانات الحساسة).

<!-- نموذج بسيط -->
<form action="/process.php" method="POST">
    <!-- عناصر الإدخال تذهب هنا -->
</form>

عنصر الإدخال <input> — الأهم في النماذج

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

أنواع <input> الأساسية

وسم <label> — الصديق الضروري للـ input

<label> يُعرّف نصاً توضيحياً لحقل الإدخال. يربطه بالحقل عبر خاصية for التي تطابق id الحقل.

<!-- طريقة الربط عبر for/id -->
<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username">

<!-- طريقة التضمين -- input داخل label مباشرة -->
<label>
    كلمة المرور:
    <input type="password" name="password">
</label>

لماذا label مهم؟

• الضغط على نص التسمية يُنشّط الحقل تلقائياً (UX أفضل)
• أدوات قراءة الشاشة تقرأ التسمية للمكفوفين (إمكانية الوصول)
• يُحسّن نتائج SEO للصفحات التي تحتوي نماذج

خصائص <input> المهمة

<input
    type="text"
    id="fullname"
    name="fullname"
    placeholder="أدخل اسمك الكامل"
    value=""
    required
    maxlength="50"
    minlength="3"
    disabled
>

عناصر نماذج أخرى مهمة

مساحة النص — <textarea>

لكتابة نصوص طويلة متعددة الأسطر — مثل رسالة أو تعليق. على عكس <input type="text">، هذه تدعم الأسطر المتعددة.

<label for="message">رسالتك:</label>
<textarea
    id="message"
    name="message"
    rows="5"
    cols="40"
    placeholder="اكتب رسالتك هنا..."
></textarea>

القائمة المنسدلة — <select>

تُتيح للمستخدم الاختيار من قائمة خيارات جاهزة.

<label for="country">اختر دولتك:</label>
<select id="country" name="country">
    <option value="">-- اختر --</option>
    <option value="sa">المملكة العربية السعودية</option>
    <option value="eg">مصر</option>
    <option value="ma">المغرب</option>
    <option value="ae">الإمارات</option>
</select>

الزر — <button>

أكثر مرونة من <input type="submit"> — يمكنه احتواء HTML داخله.

<!-- زر إرسال داخل نموذج -->
<button type="submit">إرسال النموذج</button>

<!-- زر عادي (لا يُرسل النموذج) -->
<button type="button">انقر هنا</button>

<!-- زر إعادة تعيين -->
<button type="reset">مسح الكل</button>

مثال عملي كامل — نموذج تسجيل

<form action="/register.php" method="POST">

    <!-- الاسم الكامل -->
    <label for="fullname">الاسم الكامل:</label>
    <input type="text" id="fullname" name="fullname" placeholder="محمد أحمد" required>

    <!-- البريد الإلكتروني -->
    <label for="email">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email" placeholder="me@example.com" required>

    <!-- كلمة المرور -->
    <label for="password">كلمة المرور:</label>
    <input type="password" id="password" name="password" minlength="8" required>

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

    <!-- الاهتمامات -->
    <p>اهتماماتك:</p>
    <input type="checkbox" id="html" name="interests" value="html">
    <label for="html">HTML</label>
    <input type="checkbox" id="css" name="interests" value="css">
    <label for="css">CSS</label>
    <input type="checkbox" id="js" name="interests" value="js">
    <label for="js">JavaScript</label>

    <!-- الدولة -->
    <label for="country">الدولة:</label>
    <select id="country" name="country">
        <option value="sa">السعودية</option>
        <option value="eg">مصر</option>
        <option value="ma">المغرب</option>
    </select>

    <!-- ملاحظات -->
    <label for="notes">ملاحظات إضافية:</label>
    <textarea id="notes" name="notes" rows="4" placeholder="أي معلومات إضافية..."></textarea>

    <!-- زر الإرسال -->
    <button type="submit">إنشاء الحساب</button>
    <button type="reset">مسح النموذج</button>

</form>

الأسئلة الشائعة — FAQ

ما الفرق بين GET وPOST في النموذج؟

GET: البيانات تُضاف إلى URL مرئية للجميع — مناسبة للبحث والفلاتر. POST: البيانات تُرسَل في جسم الطلب مخفية — ضرورية لكلمات المرور والبيانات الحساسة.

ما الفرق بين checkbox وradio؟

checkbox: يمكن تحديد أكثر من خيار في نفس الوقت (لست مضطراً لاختيار واحد فقط). radio: خيار واحد فقط من مجموعة — عندما ترى عدة radio buttons بنفس الـ name، اختيار أحدها يُلغي الباقية.

هل النموذج يعمل بدون PHP؟

النموذج يُعرض في المتصفح دون PHP. لكن لمعالجة البيانات وإرسال بريد أو حفظ في قاعدة بيانات، تحتاج لغة خادم (PHP، Python، Node.js...). بدونها، سيُرسل النموذج لكن لا شيء سيحدث.

لماذا خاصية name ضرورية في الحقول؟

عند إرسال النموذج، البيانات تُرسَل كـ name=value. إذا لم يكن للحقل name، قيمته لن تُرسَل مطلقاً. دائماً أضف name لكل حقل تريد استقبال قيمته في الخادم.