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

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

التحدي

سهل

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

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

وسم <form> لتغليف كل شيء.
مجموعة من أزرار الاختيار (radio buttons) (الاسم: "drink") للسماح للمستخدمين باختيار مشروبهم. يجب أن تكون التسميات "Water" أو "Coke" أو "Sprite".
مجموعة من خانات الاختيار (checkboxes) (الاسم: "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>