النماذج - الجزء الأول — أساسيات HTML

النماذج — الجزء الأول

النماذج هي طريقة جمع البيانات من المستخدم: تسجيل الدخول، البحث، التواصل، الطلب.

عنصر form

<form action="/search" method="get">
    <label for="q">ابحث:</label>
    <input type="search" id="q" name="q">
    <button type="submit">بحث</button>
</form>

- action: العنوان الذي تُرسل إليه البيانات.

- method: طريقة الإرسال.

| | GET | POST |

|---|---|---|

| مكان البيانات | في الرابط: /search?q=html | في جسم الطلب |

| مناسب لـ | البحث والفلترة (رابط يمكن حفظه ومشاركته) | إنشاء أو تعديل بيانات، تسجيل الدخول |

| كلمات المرور | ❌ أبداً (تظهر في السجل والرابط) | ✅ |

HTML وحده لا يعالج البيانات: يرسلها فقط. المعالجة على الخادم (Node.js، Python...) أو بـ JavaScript.

name و label

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

- name هو اسم الحقل عند الإرسال (email=...). حقل بلا name لا يُرسل!

- <label> مرتبط بالحقل عبر for = id. فوائده: النقر على النص يركّز على الحقل (هدف أكبر على الجوال)، وقارئ الشاشة ينطق اسم الحقل.

- placeholder ليس بديلاً عن label: يختفي عند الكتابة، ولونه باهت.

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

| النوع | الاستخدام | ميزة |

|---|---|---|

| text | نص عام | — |

| email | بريد | يتحقق من الصيغة، ولوحة مفاتيح فيها @ على الجوال |

| password | كلمة مرور | يخفي الأحرف |

| number | أرقام للعمليات (كمية) | min max step |

| tel | هاتف | لوحة أرقام على الجوال (بلا تحقق صيغة) |

| url | رابط | يتحقق من الصيغة |

| search | بحث | زر مسح |

لا تستخدم number لأرقام الهواتف أو البطاقات (ليست كميات، والأصفار البادئة تضيع).

textarea

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

<label for="msg">رسالتك</label>
<textarea id="msg" name="message" rows="5"></textarea>

الأزرار

| النوع | السلوك |

|---|---|

| <button type="submit"> | يرسل النموذج (الافتراضي داخل form!) |

| <button type="button"> | لا يفعل شيئاً — لـ JavaScript |

| <button type="reset"> | يعيد الحقول لقيمها الأولى (نادراً ما يفيد المستخدم) |

اكتب type دائماً؛ زر بلا type داخل form يرسله، وهذا مصدر أخطاء شائع.

التحقق المدمج

<input type="text" name="username" required minlength="3" maxlength="20" pattern="[a-z0-9_]+">
<input type="number" name="age" min="13" max="120">

| الخاصية | المعنى |

|---|---|

| required | إلزامي |

| minlength / maxlength | طول النص |

| min / max / step | للأرقام والتواريخ |

| pattern | تعبير نمطي (regex) يجب أن يطابقه النص |

المتصفح يمنع الإرسال ويعرض رسالة. ⚠️ لكن التحقق في المتصفح للراحة فقط: أي شخص يستطيع تجاوزه. التحقق الحقيقي يجب أن يكون على الخادم دائماً.

autocomplete

autocomplete="email" أو "name" أو "current-password" أو "new-password" تساعد المتصفح ومدير كلمات المرور على الملء الصحيح.

تمرين

أنشئ نموذج "تسجيل حساب": اسم المستخدم (إلزامي، 3–20 حرفاً)، البريد، كلمة المرور (8 أحرف على الأقل، autocomplete="new-password")، العمر (13 فأكثر)، وزر إرسال. جرّب الإرسال بحقول ناقصة وشاهد رسائل المتصفح.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>تسجيل حساب</title>
</head>
<body>
    <h1>إنشاء حساب</h1>
    <form action="/register" method="post">
        <p>
            <label for="username">اسم المستخدم</label>
            <input type="text" id="username" name="username" required minlength="3" maxlength="20" autocomplete="username">
        </p>
        <p>
            <label for="email">البريد الإلكتروني</label>
            <input type="email" id="email" name="email" required autocomplete="email">
        </p>
        <p>
            <label for="password">كلمة المرور</label>
            <input type="password" id="password" name="password" required minlength="8" autocomplete="new-password">
        </p>
        <p>
            <label for="age">العمر</label>
            <input type="number" id="age" name="age" min="13" max="120">
        </p>
        <p>
            <label for="bio">نبذة عنك</label>
            <textarea id="bio" name="bio" rows="4"></textarea>
        </p>
        <button type="submit">إنشاء الحساب</button>
    </form>
</body>
</html>