النماذج (Forms)

ما هو النموذج في HTML؟

النماذج في HTML هي عبارة عن وسيلة لجمع البيانات من المستخدمين، سواء كانت بيانات تسجيل الدخول، أو بيانات استمارة، أو أي نوع آخر من البيانات التي يحتاج الموقع لمعالجتها. النماذج بتعتمد على مجموعة من الحقول (inputs) اللي المستخدم بيملأها، وبعدها يتم إرسال البيانات إلى الخادم.

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

النموذج في HTML بنستخدم له الوسم <form>. داخل الوسم ده بنضيف مجموعة من الحقول زي النصوص، الأزرار، مربعات الاختيار، إلخ.

<form action="process.php" method="post">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="username">
    <br><br>
    <input type="submit" value="إرسال">
</form>

في المثال ده:

• action="process.php": دي تعني المكان اللي هتتوجه ليه البيانات بعد ما المستخدم يضغط على زر “إرسال”.
• method="post": دي بتحدد الطريقة اللي هتتبعها لإرسال البيانات. في الغالب بنستخدم POST لإرسال البيانات بشكل آمن.

العناصر الأساسية في النموذج:

1. <input>:
   • <input> هو العنصر الأساسي اللي بنستخدمه لإدخال البيانات. وفيه أنواع كتير زي:
   • نص (Text):
     • لإدخال نصوص عادية زي الاسم أو البريد الإلكتروني.
     <input type="text" id="name" name="username">
   • البريد الإلكتروني (Email):
     • علشان تدخل بريد إلكتروني، بنستخدم type="email".
     <input type="email" id="email" name="user_email">
   • كلمة المرور (Password):
     • لو عايز تكتب كلمة مرور، بنستخدم type="password" علشان نخبئ الحروف.
     <input type="password" id="password" name="user_password">
   • مربع الاختيار (Checkbox):
     • لو عايز تضيف مربع اختيار للموافقة على الشروط، بنستخدم type="checkbox".
     <input type="checkbox" id="terms" name="terms"> <label for="terms">موافقة على الشروط والأحكام</label>
   • زر الإرسال (Submit):
     • بنستخدم type="submit" عشان نخلي المستخدم يرسل البيانات.
     <input type="submit" value="إرسال">
2. <textarea>:
   • لو عايز المستخدم يكتب نص طويل زي ملاحظات أو تعليقات، نستخدم <textarea>.
   <textarea id="comments" name="user_comments" rows="4" cols="50"></textarea>
3. <select> و <option>:
   • لو عايز تضيف قائمة منسدلة (Dropdown) لاختيار أحد الخيارات، بنستخدم <select> و <option>.
   مثال: <select name="country" id="country"> <option value="egypt">مصر</option> <option value="saudi_arabia">السعودية</option> <option value="uae">الإمارات</option> </select>

كيفية إرسال البيانات:

1. action:
   • تحدد أين يتم إرسال البيانات بعد ما المستخدم يضغط على زر الإرسال.
   • ممكن يكون URL لصفحة في موقعك تقوم بمعالجة البيانات.
2. method:
   • تحدد الطريقة اللي هتُرسل بها البيانات:
     • POST: لإرسال البيانات بشكل آمن.
     • GET: لإرسال البيانات في عنوان URL (غير آمن للبيانات الحساسة).

مثال على نموذج تسجيل:

<form action="process_registration.php" method="post">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="username"><br><br>

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

    <label for="password">كلمة المرور:</label>
    <input type="password" id="password" name="user_password"><br><br>

    <input type="submit" value="تسجيل">
</form>

إضافة التأكيد على البيانات (Validation):

1. required:
   • إذا كنت عايز تتأكد من إن المستخدم أدخل البيانات في حقل معين، ممكن تضيف required للحقل.
   <input type="text" id="name" name="username" required>
2. pattern:
   • لتحديد شكل البيانات المدخلة (مثل رقم الهاتف أو البريد الإلكتروني).
   <input type="email" id="email" name="user_email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

---

في الختام:

دلوقتي بقى عندك فكرة كويسة عن النماذج في HTML. النماذج بتعتبر أداة أساسية لجمع البيانات من المستخدمين، سواء كانت نصوص، صور، أو حتى اختيارات من القوائم المنسدلة. لو عندك أي استفسار أو عايز توضيح أكتر، أنا هنا للمساعدة!