फ्लास्क-डब्ल्यूटीएफम्स का उपयोग करके, मैं एचटीएमएल के अपने फॉर्म सेक्शन को कैसे स्टाइल करूं?

Question

मैंने फ्लास्क-डब्ल्यूटीएफ के माध्यम से अत्यंत सरल विकी के माध्यम से पढ़ा, और इसके बारे में बहुत कुछ नहीं समझा कि मैं इसके साथ क्या कर सकता हूं। मैं धारणा के तहत कर रहा हूँ कि html के <form> अनुभाग अब केवल की तरह

<form method="post"> 
    {{ form.hidden_tag() }} 
    {{ form.name }} 
    <input type="submit"> 
</form> 

देख सकते हैं लेकिन मैं वास्तव में शैली मेरी materialized का उपयोग जैसे हैं:

 <div class="row"> 
      <div class="input-field col s6"> 
       <i class="material-icons prefix">account_circle</i> 
       <input value="FN" id="first_name" type="text" class="validate"> 
       <label class="active" for="first_name">First Name</label> 
      </div> 
      <div class="input-field col s6"> 
       <input value="LN" id="last_name" type="text" class="validate"> 
       <label class="active" for="last_name">Last Name</label> 
      </div> 
     </div> 

मैं कहाँ फिट कर सकते हैं {{ form.first_name }} और {{ form.last_name }} में?

संपादित करें: मुझे थोड़ा और मेरे जवाब पर विस्तृत करते हैं: उदाहरण के लिए, मैं materialized datepicker (एक अच्छा पॉप अप कैलेंडर उपयोगकर्ता देता है कि तिथि का चयन करने के लिए) की तरह कुछ चाहते हैं, यह <input class='datepicker' length="50"> में होना चाहिए, लेकिन अब कि मैं पूरे <input> लाइन को {{ form.date }} के साथ बदल रहा हूं ... मैंने कक्षा को संपादित करने और क्या नहीं करने का विशेषाधिकार खो दिया।

Answer 1

WTForms फ़ील्ड called हो सकता है जो विशेषताएँ उनके द्वारा प्रस्तुत इनपुट पर सेट की जाएगी। केवल फ़ील्ड का संदर्भ देने के बजाय, फ़ील्ड में स्टाइल, जावास्क्रिप्ट कार्यक्षमता इत्यादि के लिए आवश्यक विशेषताओं को पास करें। लेबल एक ही तरीके से व्यवहार करते हैं, और field.label के साथ पहुंचा जा सकता है। के रूप में वे स्वचालित रूप से नियंत्रित किया जाता है

for, value, type, id, और name, पारित होने के लिए जरूरत नहीं है। विशेषताओं के विशेष मामलों को संभालने के लिए कुछ rules हैं। यदि कोई विशेषता नाम एक पायथन कीवर्ड है जैसे कि class, अंडरस्कोर संलग्न करें: class_। डैश वैध पायथन नाम मान्य नहीं हैं, इसलिए शब्दों के बीच अंडरस्कोर डैश में परिवर्तित हो जाते हैं; data_toggledata-toggle बन जाता है।

{{ form.first_name(class_='validate') }} 
{{ form.first_name.label(class_='active') }} 

{{ form.begins(class_='datepicker', length=50) }} 

ध्यान दें कि जुड़ा हुआ तरीकों में से न तो सीधे नाम से जाना जाने की जरूरत है, उन डॉक्स बस जब फ़ील्ड को कॉल व्यवहार का वर्णन।