إضافة صنف CSS في نماذج wtform في فلاسك Flask؟

Mohssen A Mohssen · 31 ديسمبر 2021

أحاول إضافة صنف CSS Class إلى أحد الحقول في wtform لكي أتحكم في شكله من خلال CSS لذلك قمت بكتابة هذا الكود:

في ملف العرض view:

form.test_field = forms.ClassedTextField('Test Name')

في ملف jinja:

{{ form.test_field }}

ويتم إنتاج الحقل الحقل في النهاية بهذا الشكل:

<input id="test_field" name="test_field" type="text" value="">

لكن المشكلة أني لا أعلم كيف يمكن إضافة صنف CSS إلى الحقل السابق بإستخدام wtform؟

سامح أشرف · 31 ديسمبر 2021

يمكن إضافة الخاصية _class (لاحظ علامة _ في نهاية الكلمة لأن الكلمة class محجوزة في بايثون)

{{ form.email(class_="css-class-here") }}

وستكون النتيجة بهذا الشكل:

<input class="css-class-here" id="email" name="email" type="text" value="">

كما يمكنك أن تقوم بإضافة أي خاصية HTML إلى الحقل من خلال تمرير كائن إلى المعامل render_kw بالشكل التالي:

email = EmailField('Email', render_kw={'class': 'css-class-here', 'style': 'background:red;'})

<input class="css-class-here" id="email" name="email" type="text" value="" style="background:red;">

السؤال