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

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

التحدي

سهل

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

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

وسم <form> لاحتواء كل شيء.
مجموعة من أزرار الاختيار (الاسم: "drink") تتيح للمستخدمين اختيار مشروبهم. يجب أن تكون التسميات "Water" أو "Coke" أو "Sprite". امنح كل زر اختيار id مطابقًا لتسميته بأحرف صغيرة: "water" و"coke" و"sprite".
مجموعة من مربعات الاختيار (الاسم: "extras") للإضافات الاختيارية. يجب أن تكون التسميات "Ice" أو "Lemon" أو "Sugar". امنح كل مربع اختيار id مطابقًا لتسميته بأحرف صغيرة: "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>