مراجعة - النماذج #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>