إنشاء عنصر Input مع Label في Pug/Jade

رسالة الخطأ “input is a self closing element but contains nested content” تعني أن عنصر الـ يتم إغلاقه ذاتيًا بواسطة /، وبالتالي لا يمكن أن يحتوي على محتوى مدمج (nested content) داخله.

في الكود الذي وضعته، أنت تحاول إنشاء عنصر مع عنصر المدمج به. لكن بسبب طبيعة عنصر الـ الذي يجب أن يكون فارغًا ولا يحتوي على محتوى، فإن Pug/ Jade يُعرض عنصر الـ كعنصر مستقل ويعتبر المحتوى المدمج بعد الـ كمحتوى عادي.

لتصحيح الكود، يمكنك وضع عنصر الـ داخل العنصر بشكل منفصل مع وضع النص المحتوى (Visible) بعد ذلك. الكود الصحيح يمكن أن يكون على هذا النحو:

pugCopy code
label.radio-inline
    input(type="radio", name="hidden", value="0", checked="")
    | Visible

هذا الكود يقوم بإنشاء عنصر مع الفئة radio-inline، ثم يضيف عنصر داخله، وأخيرًا يضيف النص “Visible” كمحتوى نصي بعد الـ .

بعد تعديل الكود على هذا النحو، يجب أن تتمكن من إنشاء العنصر المطلوب بدون أي أخطاء.

في Pug/ Jade، يُستخدم | لتحديد نص متعدد الأسطر. يمكنك استخدام | لتضمين النص المتعدد الأسطر كمحتوى نصي داخل عنصر معين.

عند استخدام |، يجب أن تبدأ كل سطر جديد بمسافة أربعة مسافات للتأكيد على أنه جزء من النص المتعدد الأسطر. يمكنك تحرير الكود ليبدو كالتالي:

pugCopy code
label.radio-inline
    input(type="radio", name="hidden", value="0", checked="")
    | Visible

هذا الكود سيُنشئ العنصر مع الفئة radio-inline، ثم يضيف عنصر داخله، وبعد ذلك يضيف النص “Visible” كمحتوى نصي داخل العنصر .

باستخدام هذا النهج، يمكنك إنشاء العنصر المطلوب دون أي أخطاء.