X

إنشاء نموذج استبيان

مشروع الحصول على الشهادة

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

قصص المستخدم User Stories :

  • ١. يجب أن يكون لديك عنوان للصفحة داخل عنصر h1 يحمل المعرّف id القيمة title .

  • ٢. يجب أن يتوفر لديك شرح موجز داخل عنصر p يحمل المعرّف id القيمة description .

  • ٣. يجب أن يكون لديك عنصر نموذج form يحمل المعرّف id القيمة survey-form .

  • ٤. داخل عنصر النموذج form ، يجب أن يتوفر حقل إدخال input إلزامي required لإدخال اسمك، بحيث يحمل المعرّف id القيمة name والنوع type القيمة text .

  • ٥. داخل عنصر النموذج form ، يجب أن يتوفر حقل إدخال input إلزامي required لإدخال البريد الإلكتروني email ، بحيث يحمل المعرّف id القيمة email .

  • ٦. إذا أدخلت عنوان بريد إلكتروني بتنسيق غير صحيح، فمن المفترض أن تظهر لك رسالة خطأ ناتجة عن التحقق وفق معيار HTML5.

  • ٧. داخل عنصر النموذج form ، يجب أن يتوفر حقل إدخال input لإدخال رقم number ، بحيث يحمل المعرّف id القيمة number .

  • ٨. يجب ألا يقبل حقل إدخال الأرقام أي قيم غير رقمية، سواء كان ذلك بمنعك من كتابتها أو بإظهار خطأ تحقق خاص بـ HTML5.

  • ٩. إذا أدخلت أرقاماً تقع خارج النطاق المحدد لمدخل الأرقام ( والمُعرَّف بواسطة السمتين min و max )، فمن المفترض أن تظهر لك رسالة خطأ في التحقق وفق معيار HTML5.

  • ١٠. بالنسبة لحقول إدخال الاسم name والبريد الإلكتروني email والرقم number ، يجب توفير عناصر تسمية ( label elements ) مقابلة لها في النموذج form توضح الغرض من كل حقل، مع استخدام المعرفات IDs التالية: name-label ، email-label ، number-label .

  • ١١. بالنسبة لحقول إدخال الاسم name والبريد الإلكتروني email والرقم number ، ينبغي توفير نص توضيحي placeholder يقدم وصفاً أو تعليمات لكل حقل.

  • ١٢. داخل عنصر النموذج form ، يجب أن يتوفر لديك عنصر قائمة منسدلة ( select dropdown element ) يحمل المعرّف id القيمة dropdown ، مع وجود خيارين two options على الأقل للاختيار من بينهما.

  • ١٣. داخل عنصر النموذج form ، يمكنك اختيار خيار option من مجموعة تضم ما لا يقل عن زرّي اختيار two radio buttons مُجمَّعين باستخدام السمة name .

  • ١٤. داخل عنصر النموذج form ، يمكنك اختيار عدة حقول من مجموعة من مربعات الاختيار checkboxes ، حيث يجب أن يحتوي كل منها على السمة value .

  • ١٥. داخل عنصر النموذج form ، يجب أن تضع حقل نص textarea للتعليقات الإضافية.

  • ١٦. داخل عنصر النموذج form ، يجب أن يكون لديك زر button يحمل المعرّف id القيمة submit لإرسال جميع المدخلات.

التطبيق Application :

الحل Solution :


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>نموذج استبيان</title>
 </head>
 <body>

  <h1 id="title">استبيان رضا العملاء</h1>

  <p id="description">
   .يرجى تعبئة هذا الاستبيان لمساعدتنا في تحسين خدماتنا
  </p>

  <form id="survey-form">
   
   <!-- Name الاسم -->
   <label id="name-label" for="name">الاسم</label><br>
   <input
    id="name"
    type="text"
    placeholder="أدخل اسمك"
    required
   >
   <br><br>

   <!-- Email البريد الإلكتروني -->
   <label id="email-label" for="email">البريد الإلكتروني</label><br>
   <input
    id="email"
    type="email"
    placeholder="أدخل بريدك الإلكتروني"
    required
   >
   <br><br>

   <!-- Number رقم -->
   <label id="number-label" for="number">العمر</label><br>
   <input
    id="number"
    type="number"
    placeholder="أدخل عمرك"
    min="10"
    max="100"
   >
   <br><br>

   <!-- Dropdown قائمة منسدلة -->
   <label for="dropdown">كيف سمعت عنا؟</label><br>
   <select id="dropdown">
    <option value="">اختر خياراً</option>
    <option value="friend">إنترنت</option>
    <option value="internet">صديق</option>
   </select>

   <br><br>

   <!-- Radio Buttons أزرار الاختيار -->
   <p>هل توصي بنا؟</p>

   <label>
    <input
     type="radio"
     name="recommend"
     value="yes"
    >
    نعم
   </label>

   <label>
    <input
     type="radio"
     name="recommend"
     value="no"
    >
    لا
   </label>

   <br><br>

   <!-- Checkboxes مربعات الاختيار -->
   <p>ما هي الخدمات التي تستخدمها؟</p>

   <label>
    <input
     type="checkbox"
     value="internet"
    >
    إنترنت
   </label>

   <label>
    <input
     type="checkbox"
     value="tv"
    >
    تلفزيون
   </label>

   <label>
    <input
     type="checkbox"
     value="tv"
    >
    هاتف
   </label>

   <br><br>

   <!-- Textarea مربع نص -->
   <label for="comments">تعليقات إضافية</label><br>
   <textarea
    id="comments"
    rows="5"
    cols="40"
    placeholder="اكتب تعليقاتك هنا..."
   ></textarea>

   <br><br>

   <!-- Submit إرسال -->
   <button id="submit" type="submit">
    إرسال
   </button>

  </form>
 </body>
</html>