مراجعة - النماذج #1

جزء من قسم Fundamentals في رحلة HTML على Coddy. الدرس 46 من 60.

التحدي

سهل

لنبنِ نموذجًا بسيطًا لطلب مشروب باستخدام HTML، كما هو موضح في الصورة أدناه.

إليك ما يجب تضمينه:

وسم <form> لتغليف كل شيء.
مجموعة من أزرار الاختيار (الاسم: "drink") للسماح للمستخدمين باختيار مشروبهم. يجب أن تكون التسميات "Water" أو "Coke" أو "Sprite".
مجموعة من خانات الاختيار (الاسم: "extras") للإضافات الاختيارية. يجب أن تكون التسميات "Ice" أو "Lemon" أو "Sugar".
قائمة منسدلة (الاسم: "size") لاختيار حجم المشروب. يجب أن تكون الخيارات "Small" أو "Medium" أو "Large".
زر إرسال يحمل التسمية "Place Order".
زر إعادة تعيين يحمل التسمية "Clear".

⚠️ مهم: استخدم وسم <form> واحدًا فقط. لا تسمح HTML بوسوم <form> المتداخلة: فوضع <form> داخل <form> آخر غير صالح، وسيؤدي إلى اكتشاف عناصر الإدخال خارج النموذج، مما يتسبب في فشل الاختبارات. ضع جميع أزرار الاختيار وخانات الاختيار والقائمة المنسدلة والأزرار مباشرةً داخل <form> الخارجي الوحيد: لا تُغلّف الأقسام بوسوم <form> إضافية.

جرّب بنفسك

<!DOCTYPE html>
<html>
    <body>
        <form>
            <p>Select a drink: </p>
            <!-- اكتب الكود هنا -->
            
            <p>Select extras: </p>
            <!-- اكتب الكود هنا -->
            
            <p>Select size: </p>
            <!-- اكتب الكود هنا -->
            
        </form>
    </body>
</html>