জ্যাঙ্গো ফর্মগুলিতে সিএসএস স্টাইলিং

Question

আমি নিম্নলিখিত স্টাইল করতে চাই:

forms.py:

from django import forms

class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    email = forms.EmailField(required=False)
    message = forms.CharField(widget=forms.Textarea)

contact_form.html:

<form action="" method="post">
  <table>
    {{ form.as_table }}
  </table>
  <input type="submit" value="Submit">
</form>

উদাহরণস্বরূপ, আমি একটি সেট করবেন বর্গ বা আইডি জন্য subject, email, messageএকটি বহিঃস্থ শৈলী পত্রক প্রদান?

Answer 1

আমার উত্তর থেকে নেওয়া: জ্যাঙ্গোতে <ডি ক্লাস = 'ফিল্ড_ টাইপ'> দিয়ে ক্ষেত্রগুলি কীভাবে চিহ্নিত করবেন

class MyForm(forms.Form):
    myfield = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myfieldclass'}))

অথবা

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['myfield'].widget.attrs.update({'class' : 'myfieldclass'})

অথবা

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
        }

--- সম্পাদনা --- উপরেরটি
মূল প্রশ্নের কোডে করা সবচেয়ে সহজ পরিবর্তন যা জিজ্ঞাসিত হয়েছিল তা পূরণ করে। যদি আপনি অন্য জায়গায় ফর্মটি পুনরায় ব্যবহার করেন তবে এটি আপনাকে পুনরাবৃত্তি থেকে বিরত রাখে; আপনার ক্লাস বা অন্যান্য বৈশিষ্ট্যগুলি কেবলমাত্র কাজ করে যদি আপনি জ্যাঙ্গোর as_table / as_ul / as_p ফর্ম পদ্ধতি ব্যবহার করেন। সম্পূর্ণ কাস্টম রেন্ডারিংয়ের জন্য যদি আপনার সম্পূর্ণ নিয়ন্ত্রণের প্রয়োজন হয় তবে এটি স্পষ্টতই নথিভুক্ত

- সম্পাদনা 2 ---
একটি মডেলফর্মের জন্য উইজেট এবং অ্যাটর্স নির্দিষ্ট করার জন্য আরও একটি নতুন উপায় যুক্ত করা হয়েছে।

Comments

যদিও এটি ব্যবসায়ের যুক্তি সহ উপস্থাপনা মিশ্রিত করার পরামর্শ দেওয়া হয় না।

— টর্স্টেন এঞ্জেলব্রেচট

এই উপস্থাপনাটি কেমন? আপনি উপাদানটিকে একটি শ্রেণি দিচ্ছেন, যা কেবল একটি সনাক্তকারী বা শ্রেণিবদ্ধকরণ। আপনাকে অন্যত্র যা করতে হবে তা এখনও নির্ধারণ করতে হবে

— শেডফিসি

হ্যা এবং না. প্রথম সিএসএস ক্লাসগুলি স্টাইলিংয়ের জন্য ব্যবহৃত কনভেনশন দ্বারা হয়, যদি আপনার কোনও অনন্য শনাক্তকারী প্রয়োজন হয় তবে এটি আরও ভাল ব্যবহার করা উচিত id। দ্বিতীয়টি সাধারণত এটি করতে টেমপ্লেট পক্ষের প্রতিক্রিয়াশীলতা, আপনি যদি প্রচ্ছদ পদ্ধতিগুলির (জেএস, সিএসএস) মাধ্যমে এই শ্রেণিতে অ্যাক্সেস করতে চলেছেন তবে বিশেষত। আমি আপনার উত্তর ভুল বলে নি। আমার মতে এটির কেবল খারাপ অভ্যাস (প্রবন্ধে যখন আপনি সম্মুখভাগ এবং ব্যাকএন্ড বিকাশকারীদের সাথে একটি দলে কাজ করছেন)।

— টর্স্টেন এঞ্জেলব্রেচ্ট

এটি হাস্যকর দেখাচ্ছে, কেবল একটি ক্লাস যুক্ত করার জন্য আপনার এত কোড প্রয়োজন? দেখে মনে হচ্ছে এই অঞ্চলগুলিতে (বিশেষত কোনও সিএসএস-ভারী সাইটের জন্য) হার্ড-কোড করা সহজ হবে।

— ডেভিড542

পাগল জ্যাঙ্গো এটিকে এত বিশ্রী করে তোলে!

— ব্রাইস

Answer 2

এটি একটি কাস্টম টেম্পলেট ফিল্টার ব্যবহার করে করা যেতে পারে। আপনার ফর্মটি এভাবে উপস্থাপনের বিষয়টি বিবেচনা করুন:

<form action="/contact/" method="post">
  {{ form.non_field_errors }}
  <div class="fieldWrapper">
    {{ form.subject.errors }}
    {{ form.subject.label_tag }}
    {{ form.subject }}
    <span class="helptext">{{ form.subject.help_text }}</span>
  </div>
</form>

form.subjectপদ্ধতি BoundFieldরয়েছে যার একটি উদাহরণ as_widget()।

আপনি একটি কাস্টম ফিল্টারও তৈরি করতে পারেন addclassমধ্যে my_app / templatetags / myfilters.py :

from django import template

register = template.Library()

@register.filter(name='addclass')
def addclass(value, arg):
    return value.as_widget(attrs={'class': arg})

এবং তারপরে আপনার ফিল্টারটি প্রয়োগ করুন:

{% load myfilters %}

<form action="/contact/" method="post">
  {{ form.non_field_errors }}
  <div class="fieldWrapper">
    {{ form.subject.errors }}
    {{ form.subject.label_tag }}
    {{ form.subject|addclass:'MyClass' }}
    <span class="helptext">{{ form.subject.help_text }}</span>
  </div>
</form>

form.subjectsতারপরে MyClassসিএসএস ক্লাসে রেন্ডার করা হবে ।

Comments

এটি ক্লিনারগুলির মধ্যে অন্যতম এবং সমাধানগুলি কার্যকর করা সহজ

— ব্যবহারকারী

এই উত্তরটি শীর্ষ উত্তর হওয়া উচিত !!! এটি জ্যাঙ্গো প্রস্তাবিত সমাধানের চেয়ে সত্যই পরিষ্কার! ভাল করেছেন @ চর্লেস্তহক

— ডেভিড ডি

সুপার সহায়ক। এটি প্রথমে আমার কাছে স্পষ্ট ছিল না তবে আপনি একাধিক ক্লাস যুক্ত করতে এটি ব্যবহার করতে পারেন:{{ form.subject|addclass:'myclass1 myclass2' }}

— smg

আমি এটি পছন্দ করি যে এটি HTML ফাইলগুলিতে এইচটিএমএল ক্লাস রাখার অনুমতি দেয় keeping স্টাইলিংয়ের সাথে কাজ করার সময়, আমি স্টাইলশিট এবং কাঠামোর মধ্যে পিছনে পিছনে ঝাঁপিয়ে পড়ি, মডেল এবং / অথবা ফর্ম নয়।

— কেভিন

Answer 3

আপনি যদি ফর্মটিতে কোনও কোড যুক্ত করতে না চান (@ শ্যাডফিসির উত্তরে মন্তব্যে উল্লিখিত), অবশ্যই এটি সম্ভব, এখানে দুটি বিকল্প রয়েছে।

প্রথমত, আপনি একবারে পুরো ফর্মের পরিবর্তে এইচটিএমএলে পৃথকভাবে ক্ষেত্রগুলি উল্লেখ করুন :

<form action="" method="post">
    <ul class="contactList">
        <li id="subject" class="contact">{{ form.subject }}</li>
        <li id="email" class="contact">{{ form.email }}</li>
        <li id="message" class="contact">{{ form.message }}</li>
    </ul>
    <input type="submit" value="Submit">
</form>

(মনে রাখবেন যে আমি এটিকে একটি অরসোর্টড তালিকায়ও পরিবর্তন করেছি ))

দ্বিতীয়ত, এইচটিএমএল , জ্যাঙ্গো হিসাবে আউটপুট ফর্মগুলি নথিতে নোট করুন :

ফিল্ড আইডি, ক্ষেত্রের নাম 'id_' প্রিপেন্ড করে উত্পন্ন হয়। আইডি বৈশিষ্ট্য এবং ট্যাগগুলি ডিফল্টরূপে আউটপুটে অন্তর্ভুক্ত থাকে।

আপনার ফর্ম ক্ষেত্রগুলি সমস্ত ইতিমধ্যে একটি অনন্য আছে আইডি । সুতরাং আপনি বিষয় ক্ষেত্রের স্টাইল করতে আপনার সিএসএস ফাইলে id_subject উল্লেখ করতে পারেন । আমার খেয়াল করা উচিত, আপনি যখন ডিফল্ট এইচটিএমএল গ্রহণ করেন তখন ফর্মটি এমনভাবে আচরণ করে যা স্বতন্ত্র ক্ষেত্রগুলি নয়, কেবল ফর্মটি মুদ্রণের প্রয়োজন:

<ul class="contactList">
    {{ form }}  # Will auto-generate HTML with id_subject, id_email, email_message 
    {{ form.as_ul }} # might also work, haven't tested
</ul>

ফর্মগুলি আউটপুট দেওয়ার সময় অন্যান্য বিকল্পগুলির জন্য পূর্ববর্তী লিঙ্কটি দেখুন (আপনি টেবিলগুলিও করতে পারেন)।

দ্রষ্টব্য - আমি বুঝতে পেরেছি যে এটি প্রতিটি উপাদানকে ক্লাস যুক্ত করার মতো নয় (যদি আপনি ফর্মটিতে কোনও ক্ষেত্র যোগ করেন তবে আপনাকে সিএসএসও আপডেট করতে হবে) - তবে আইডি দ্বারা ক্ষেত্রগুলির সমস্ত রেফারেন্স করা যথেষ্ট সহজ আপনার সিএসএসে এটির মতো:

#id_subject, #id_email, #email_message 
{color: red;}

Comments

আমি আপনার দ্বিতীয় সমাধান চেষ্টা করেছিলাম কিন্তু এটি কার্যকর হয়নি। আমি id_email এর জন্য ক্লাস তৈরি করেছি এবং এটি কোনও ফল দিতে ব্যর্থ হয়েছে।

— প্রায় প্রথম

ডিবাগিংয়ের জন্য আমি অলমাস্টেব্যাগেইনার একটি জিনিস প্রস্তাব করতে পারি - আপনি একবার ব্রাউজারে পৃষ্ঠাটি দেখলে পৃষ্ঠার উত্সটি দেখুন (সাধারণত ডান-ক্লিক করে) ব্যবহার করুন এবং জ্যাঙ্গো যে উত্সটি উত্পন্ন করছে তা সম্পূর্ণ দেখুন। আপনি যে আইডি বা শ্রেণি শনাক্তকারীর প্রত্যাশা করেছেন সেগুলি সহ ক্ষেত্রগুলি বিদ্যমান কিনা তা দেখুন । এছাড়াও বেশিরভাগ ব্রাউজারগুলি (সম্ভবত একটি প্লাগইন ইনস্টল করে) একটি ডিবাগার চালাতে পারে যা আপনাকে কোনও পৃষ্ঠায় প্রয়োগ করা সিএসএস দেখায় এবং কী চলছে তা দেখার জন্য সহায়ক।

— জন সি

@ এলমোস্টাব্যাগেইনারও নোট করুন, আমি কিছুটা নমুনা কোড যুক্ত করেছি। যদি এটি একক পাঠ্য থেকে পরিষ্কার ছিল না - আপনাকে ফর্মটি নিজেই উল্লেখ করতে হবে, পৃথক ক্ষেত্র নয়, বিন্দু অনুসারে ফর্মটি এইচডিএমএল তৈরি করে যা আইডিসমুক্ত রয়েছে , বর্ণিত হয়েছে। আশা করি এটি সাহায্য করবে।

— জন সি

সহায়তার জন্য ধন্যবাদ, বিষয়টি মোটেও আমার সিএসএস ছিল না, সমস্যাটি ক্যাশের সাথে সম্পর্কিত ছিল। সুতরাং আমার পুরানো সিএসএস সংরক্ষণ করা হয়েছিল তাই কোনও পরিবর্তনই প্রদর্শিত হবে না। আমি ক্রোম থেকে কেবল ক্যাশে সাফ করে দিয়েছি এবং সমস্ত আপডেট দেখাতে শুরু করেছে।

— প্রায় একটি শিক্ষানবিশ

Answer 4

এই ব্লগ পোস্ট প্রতি , আপনি একটি কাস্টম টেম্পলেট ফিল্টার ব্যবহার করে আপনার ক্ষেত্রগুলিতে CSS ক্লাস যুক্ত করতে পারেন।

from django import template
register = template.Library()

@register.filter(name='addcss')
def addcss(field, css):
    return field.as_widget(attrs={"class":css})

এটি আপনার অ্যাপের টেমপ্লেটগুলি / ফোল্ডারে রাখুন এবং আপনি এখন তা করতে পারেন

{{field|addcss:"form-control"}}

Comments

এটি এই পোস্টের আসল উত্তর হিসাবে গ্রহণ করা উচিত ছিল :)

— এমভিডিবি

এখন পর্যন্ত সেরা সমাধান।

— Mods বনাম রকার্স

উজ্জ্বল, ধন্যবাদ! ট্যাগটি লোড করতে ভুলবেন না। এছাড়াও, জ্যাঙ্গো ২.১-তে আমি জাঙ্গোকে টেমপ্লেটটি সন্ধান করতে পেলাম সেটিংস.পি: 'লাইব্রেরি': {'add_css': 'app.templatetags.tag_name',}

— সিমোনবোগার্ডে

Answer 5

আপনি এটির মতো করতে পারেন:

class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    subject.widget.attrs.update({'id' : 'your_id'})

আশা করি কাজ করে।

Ignas

Comments

ধন্যবাদ ইগাস যথাযথ উত্তর!

— রুদ্রেশ আজগাঁওকার

Answer 6

আপনি এই লাইব্রেরিটি ব্যবহার করতে পারেন: https://pypi.python.org/pypi/django-widget-tweaks

এটি আপনাকে নিম্নলিখিতগুলি করতে অনুমতি দেয়:

{% load widget_tweaks %}
<!-- add 2 extra css classes to field element -->
{{ form.title|add_class:"css_class_1 css_class_2" }}

Comments

চারলেস্টক সমাধানটি দেখুন, অতিরিক্ত লাইব্রেরি যুক্ত না করেই এটি সমান :)

— ডেভিড ডি ২

@ ডেভিডডাব্লু: হ্যাঁ, তবে উইজেট টুইটের আরও অনেকগুলি ফিল্টার রয়েছে, যেমন render_field।

— mrdaliri

Answer 7

আপনি করতে পারেন:

<form action="" method="post">
    <table>
        {% for field in form %}
        <tr><td>{{field}}</td></tr>
        {% endfor %}
    </table>
    <input type="submit" value="Submit">
</form>

তারপরে আপনি উদাহরণ হিসাবে <td>ট্যাগটিতে ক্লাস / আইডি যোগ করতে পারেন । আপনি অবশ্যই অন্য যে কোনও ট্যাগ ব্যবহার করতে পারেন। জ্যাঙ্গো ফর্মগুলির সাথে কাজ করা যাচাই করুন উদাহরণ হিসাবে ফর্মের প্রতিটিটির জন্য কী পাওয়া যায় field( {{field}}উদাহরণস্বরূপ কেবল ইনপুট ট্যাগ আউটপুট করা হয়, লেবেলটি নয় এবং তাই)।

Answer 8

একটি সমাধান হ'ল পৃষ্ঠা প্রস্তুত হওয়ার পরে প্রয়োজনীয় সিএসএস ক্লাস যুক্ত করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করা। উদাহরণস্বরূপ, বুটস্ট্র্যাপ শ্রেণীর সাথে জ্যাঙ্গো ফর্ম আউটপুট স্টাইলিং (ব্রেভিটির জন্য jQuery ব্যবহৃত হয়):

<script type="text/javascript">
    $(document).ready(function() {
        $('#some_django_form_id').find("input[type='text'], select, textarea").each(function(index, element) {
            $(element).addClass("form-control");
        });
    });
</script>

এটি আপনার ব্যবসায়ের যুক্তির সাথে স্টাইলিং সুনির্দিষ্ট মিশ্রণের কদর্যতা এড়ায়।

Answer 9

আপনার ফর্মটি লিখুন:

    class MyForm(forms.Form):
         name = forms.CharField(widget=forms.TextInput(attr={'class':'name'}),label="Your Name")
         message = forms.CharField(widget=forms.Textarea(attr={'class':'message'}), label="Your Message")

আপনার এইচটিএমএল ক্ষেত্রে এমন কিছু করুন:

{% for field in form %}
      <div class="row">
        <label for="{{ field.name}}">{{ field.label}}</label>{{ field }}
     </div>
{% endfor %}

তারপরে আপনার সিএসএসে এমন কিছু লিখুন:

.name{
      /* you already have this class so create it's style form here */
}
.message{
      /* you already have this class so create it's style form here */
}
label[for='message']{
      /* style for label */
}

আশা করি এই উত্তরটি চেষ্টা করার মতো! নোট করুন যে ফর্মটি রয়েছে এমন HTML ফাইলটি রেন্ডার করতে আপনাকে অবশ্যই নিজের মতামত লিখে থাকতে হবে written

Comments

ধন্যবাদ। তবে আমি কীভাবে একটি নির্দিষ্ট লেবেল পাঠ্য লিখতে পারি?

— gakeko betsi

Answer 10

আপনার নিজের ফর্ম শ্রেণিকে 'ওভাররাইড করার প্রয়োজন হতে পারে না __init__, কারণ জ্যাঙ্গো HTML টিতে নির্দিষ্ট বৈশিষ্ট্যগুলি সেট করে name& রাখে । আপনার এই জাতীয় সিএসএস থাকতে পারে:idinput

form input[name='subject'] {
    font-size: xx-large;
}

Comments

এটি যোগ করতে। প্রদত্ত "সাবজেক্ট = ফর্ম ...", আইডি = "আইডি_সুবজেক্ট" এবং নাম = "বিষয়" এই বৈশিষ্ট্যের জন্য জ্যাঙ্গো কনভেনশন। অতএব আপনার # আইডি_সুবজেক্ট {...} করতেও সক্ষম হওয়া উচিত

— সৌরবিদ্যুত

@ সোলারটিক: আপনি ঠিক বলেছেন, ধন্যবাদ আমি এটি উল্লেখ করিনি কারণ idফর্মসেটের জন্য জ্যাঙ্গো দ্বারা নির্মিত ক্ষেত্রটি বেশ লোমশ হয়ে যায় ...

— তেহফিংক

Answer 11

এটি সত্যিই দেখেনি ...

https://docs.djangoproject.com/en/1.8/ref/forms/api/#more-granular-output

আরও দানাদার আউটপুট

As_p (), as_ul () এবং as_table () পদ্ধতিগুলি অলস বিকাশকারীদের জন্য কেবল শর্টকাট - কেবলমাত্র কোনও ফর্ম অবজেক্ট প্রদর্শিত হতে পারে না।

ফর্ম উদাহরণের একক ক্ষেত্রের জন্য এইচটিএমএল বা অ্যাক্সেস বৈশিষ্ট্যগুলি প্রদর্শন করতে ব্যবহৃত ক্লাস বাউন্ডফিল্ড।

Str () ( ইউনিকোড এই বস্তুর প্রদর্শন এই ক্ষেত্রের জন্য HTML এর পদ্ধতি পাইথন 2)।

একটি একক বাউন্ডফিল্ড পুনরুদ্ধার করতে, ক্ষেত্রের নামটি কী হিসাবে ব্যবহার করে আপনার ফর্মটিতে অভিধানের বাক্স অনুসন্ধান বাক্যটি ব্যবহার করুন:

>>> form = ContactForm()
>>> print(form['subject'])
<input id="id_subject" type="text" name="subject" maxlength="100" />

সমস্ত বাউন্ডফিল্ড বস্তু পুনরুদ্ধার করতে, ফর্মটি পুনরাবৃত্তি করুন:

>>> form = ContactForm()
>>> for boundfield in form: print(boundfield)
<input id="id_subject" type="text" name="subject" maxlength="100" />
<input type="text" name="message" id="id_message" />
<input type="email" name="sender" id="id_sender" />
<input type="checkbox" name="cc_myself" id="id_cc_myself" />

ক্ষেত্র-নির্দিষ্ট আউটপুট ফর্ম অবজেক্টের অটো_আইডি সেটিংসকে সম্মান করে:

>>> f = ContactForm(auto_id=False)
>>> print(f['message'])
<input type="text" name="message" />
>>> f = ContactForm(auto_id='id_%s')
>>> print(f['message'])
<input type="text" name="message" id="id_message" />

Answer 12

জ্যাঙ্গোর জন্য তৈরি করা খুব সহজ এবং দুর্দান্ত সরঞ্জাম রয়েছে যা আমি স্টাইলিংয়ের জন্য ব্যবহার করি এবং এটি প্রতিটি সীমানা কাঠামোর জন্য ব্যবহার করা যেতে পারে যেমন বুটস্ট্র্যাপ, ম্যাটেরিয়ালাইজ, ফাউন্ডেশন ইত্যাদি It এটি উইজেট-টুইটস ডকুমেন্টেশন: উইজেট টুইট

1. আপনি এটি জ্যাঙ্গোর জেনেরিক দৃষ্টিভঙ্গি সহ ব্যবহার করতে পারেন
2. অথবা আপনার নিজস্ব ফর্মগুলি সহ:

জ্যাঙ্গো আমদানি ফর্মগুলি থেকে

class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    email = forms.EmailField(required=False)
    message = forms.CharField(widget=forms.Textarea)

ডিফল্ট ব্যবহারের পরিবর্তে:

{{ form.as_p }} or {{ form.as_ul }}

আপনি রেন্ডারফিল্ড বৈশিষ্ট্যটি ব্যবহার করে এটি আপনার নিজের উপায়ে সম্পাদনা করতে পারেন যা আপনাকে উদাহরণের মতো স্টাইল করার আরও একটি HTML-জাতীয় উপায়ে দেয়:

template.html

{% load widget_tweaks %}

<div class="container">
   <div class="col-md-4">
      {% render_field form.subject class+="form-control myCSSclass" placeholder="Enter your subject here" %}
   </div>
   <div class="col-md-4">
      {% render_field form.email type="email" class+="myCSSclassX myCSSclass2" %}
   </div>
   <div class="col-md-4">
      {% render_field form.message class+="myCSSclass" rows="4" cols="6" placeholder=form.message.label %}
   </div>
</div>

এই গ্রন্থাগারটি আপনাকে আপনার ব্যাকএন্ড থেকে সামনের প্রান্তটি ভালভাবে আলাদা করার সুযোগ দেয়

Answer 13

জাজানো ১.১০ তে (সম্ভবত এর আগেও) আপনি নীচের মতো এটি করতে পারেন।

মডেল:

class Todo(models.Model):
    todo_name = models.CharField(max_length=200)
    todo_description = models.CharField(max_length=200, default="")
    todo_created = models.DateTimeField('date created')
    todo_completed = models.BooleanField(default=False)

    def __str__(self):
        return self.todo_name

ফরম:

class TodoUpdateForm(forms.ModelForm):
    class Meta:
        model = Todo
        exclude = ('todo_created','todo_completed')

টেমপ্লেট:

<form action="" method="post">{% csrf_token %}
    {{ form.non_field_errors }}
<div class="fieldWrapper">
    {{ form.todo_name.errors }}
    <label for="{{ form.name.id_for_label }}">Name:</label>
    {{ form.todo_name }}
</div>
<div class="fieldWrapper">
    {{ form.todo_description.errors }}
    <label for="{{ form.todo_description.id_for_label }}">Description</label>
    {{ form.todo_description }}
</div>
    <input type="submit" value="Update" />
</form>

Answer 14

সম্পাদনা করুন: আমি যে পরামর্শ দিচ্ছি তা করার আরেকটি (কিছুটা ভাল) উপায় এখানে উত্তর দেওয়া হয়েছে: জ্যাঙ্গো ফর্ম ইনপুট ফিল্ড স্টাইলিং

উপরের সমস্ত বিকল্প দুর্দান্ত, কেবল ভেবেছিল আমি এটিকে ফেলে দেব কারণ এটি ভিন্ন।

আপনি যদি নিজের ফর্মগুলিতে কাস্টম স্টাইলিং, শ্রেণি ইত্যাদি চান তবে আপনি আপনার টেমপ্লেটে একটি এইচটিএমএল ইনপুট তৈরি করতে পারেন যা আপনার ফর্ম ক্ষেত্রে মেলে matches একটি চারফিল্ডের জন্য, উদাহরণস্বরূপ, (ডিফল্ট উইজেটটি হ'ল TextInput) আসুন আমরা বলি যে আপনি একটি বুটস্ট্র্যাপ- বর্ণনযুক্ত পাঠ্য ইনপুট চান। আপনি এই জাতীয় কিছু করবেন:

<input type="text" class="form-control" name="form_field_name_here">

আর যতদিন আপনি করা ফর্ম ক্ষেত্র নাম এইচটিএমএল সাথে মিলে যায় name, attribue (এবং উইজেট সম্ভবত পাশাপাশি ইনপুট টাইপ মেলে প্রয়োজন) জ্যাঙ্গো সব একই ভ্যালিডেটর যে ক্ষেত্রের উপর যখন আপনি চালাতে চালানো হবে validateবা form.is_valid()এবং

লেবেল, ত্রুটি বার্তাগুলি এবং সহায়তা পাঠ্যের মতো অন্যান্য জিনিস স্টাইলিংয়ের জন্য খুব বেশি পরিশ্রমের প্রয়োজন হয় না কারণ আপনি যেমন চান তেমন কিছু করতে পারেন form.field.error.as_textএবং আপনি চান সেগুলি স্টাইল করতে পারেন। আসল ক্ষেত্রগুলি হ'ল কিছু ফিডিংয়ের প্রয়োজন।

আমি জানি না এটি সবচেয়ে ভাল উপায়, বা যেভাবে আমি প্রস্তাব দেব, তবে এটি একটি উপায় এবং এটি কারও পক্ষে সঠিকও হতে পারে।

এখানে স্টাইলিং ফর্মগুলির একটি কার্যকর পদক্ষেপ রয়েছে এবং এতে এসও-তে তালিকাভুক্ত বেশিরভাগ উত্তর অন্তর্ভুক্ত রয়েছে (যেমন উইজেট এবং উইজেটের টুইটগুলিতে অ্যাটার ব্যবহার করা)। https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html

Answer 15

স্টাইলিং উইজেটের উদাহরণগুলি

আপনি যদি একটি উইজেটের উদাহরণটিকে অন্যের থেকে আলাদা দেখতে চান তবে আপনার যখন উইজেট অবজেক্টটি ইনস্ট্যান্ট করে একটি ফর্ম ফিল্ডে অর্পণ করা হবে তখন আপনাকে অতিরিক্ত বৈশিষ্ট্য নির্দিষ্ট করতে হবে (এবং সম্ভবত আপনার সিএসএস ফাইলগুলিতে কিছু নিয়ম যুক্ত করতে হবে)।

https://docs.djangoproject.com/en/2.2/ref/forms/widgets/

এটি করার জন্য, উইজেট তৈরি করার সময় আপনি উইজেট.আটার্স যুক্তি ব্যবহার করেন:

class CommentForm(forms.Form):
    name = forms.CharField(widget=forms.TextInput(attrs={'class': 'special'}))
    url = forms.URLField()
    comment = forms.CharField(widget=forms.TextInput(attrs={'size': '40'}))

আপনি ফর্ম সংজ্ঞাতে একটি উইজেটও পরিবর্তন করতে পারেন:

class CommentForm(forms.Form):
    name = forms.CharField()
    url = forms.URLField()
    comment = forms.CharField()

    name.widget.attrs.update({'class': 'special'})
    comment.widget.attrs.update(size='40')

অথবা যদি ক্ষেত্রটি সরাসরি ফর্মটিতে ঘোষিত না হয় (যেমন মডেল ফর্ম ক্ষেত্র), আপনি ফর্ম.ফিল্ড বৈশিষ্ট্যটি ব্যবহার করতে পারেন:

class CommentForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['name'].widget.attrs.update({'class': 'special'})
        self.fields['comment'].widget.attrs.update(size='40')

জাজানো তার পরে রেন্ডার আউটপুটটিতে অতিরিক্ত বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করবে:

>>> f = CommentForm(auto_id=False)
>>> f.as_table()
<tr><th>Name:</th><td><input type="text" name="name" class="special" required></td></tr>
<tr><th>Url:</th><td><input type="url" name="url" required></td></tr>
<tr><th>Comment:</th><td><input type="text" name="comment" size="40" required></td></tr>