জাঙ্গো ফর্মগুলিতে সিএসএস শ্রেণি সংজ্ঞায়িত করুন

Question

ধরুন আমার একটা ফর্ম আছে

class SampleClass(forms.Form):
    name = forms.CharField(max_length=30)
    age = forms.IntegerField()
    django_hacker = forms.BooleanField(required=False)

আমার জন্য প্রতিটি ক্ষেত্রে সিএসএস ক্লাস সংজ্ঞায়িত করার জন্য কি কোনও উপায় আছে যে আমি আমার রেন্ডার পৃষ্ঠায় ক্লাসের উপর ভিত্তি করে jQuery ব্যবহার করতে পারি?

আমি আশা করছিলাম যে ম্যানুয়ালি ফর্মটি তৈরি করতে হবে না।

Comments

বাহ, সবাই আপ এই ভোট? docs.djangoproject.com/en/dev/ref/forms/widgets/…

— স্কাইলার সেভল্যান্ড

@ স্পাইল আমি ইঙ্গিত হিসাবে এটি গ্রহণ করব যে জাঙ্গো ডক্সে এটি পাওয়া সহজ নয়। আমি ব্রাউজ করেছি এবং বেশ কয়েকটি গুগল অনুসন্ধানও করেছি এবং এটি খুঁজে পেল না, তাই আমি প্রশ্নের জন্য খুশি এবং এটি আমার উত্সাহ পেয়েছে।

— নীল

আমি জানি এটি একটি পুরানো থ্রেড তবে জ্যাঙ্গো ফর্ম ক্ষেত্রগুলিতে এখন একটি আইডি_ফিল্ডের ক্লাস।

— রত্সিমিহাহ

বিদ্যমান ক্ষেত্রের

— শ্রেনীর

Answer 1

: তবুও অন্য সমাধান পাইথন কোডে পরিবর্তন প্রয়োজন হয় না এবং তাই ডিজাইনার এবং এককালীন প্রেজেন্টেশন পরিবর্তনের জন্য উত্তম জ্যাঙ্গো-উইজেট-সমন্বয় । আশা করি যে কেউ এটি দরকারী হবে।

Comments

শুধুমাত্র বিবেকী সমাধান, আমি অবশ্যই বলব। ধন্যবাদ!. পাইথন কোড এবং বিশেষত ফর্মের সংজ্ঞাতে স্টাইলিংয়ের জন্য স্টাফ রাখার শেষ জায়গা - এগুলি অবশ্যই টেমপ্লেটগুলির অন্তর্গত।

— বোরিস চেরেভেনকভ

এটি একটি দুর্দান্ত গ্রন্থাগার! এই উত্তরটি নীচে সমাহিত করা লজ্জাজনক।

— ক্রিস ল্যাকস

ডিজাইনারদের জন্য দুর্দান্ত! :-)

— hobbes3

অসাধারণ! আমি এই জিনিসগুলি করতে কিছু ফিল্টার তৈরি করেছি, তবে এই প্রকল্পটি আরও বেশি শক্তিশালী। ধন্যবাদ!

— এমএসব্রোগলি

আসলে এটি জিনজা 2-তেও কাজ করে :-) আমি নিরাপদ ফাইলের ক্রম পরিবর্তন করেছি এবং কোলন {{myfor.email | add_class ("css_class_1 css_class_2") এর পরিবর্তে বন্ধনী যুক্ত করেছি safe নিরাপদ this writing এটি লেখার জন্য ধন্যবাদ। এটি জ্যাঙ্গোর অংশ হওয়া উচিত।

— ডেভিড Dehghan

Answer 2

আমার নিজের প্রশ্নের উত্তর দিয়েছেন। দীর্ঘশ্বাস

http://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.Widget.attrs

আমি বুঝতে পারি নি যে এটি উইজেট কনস্ট্রাক্টরের কাছে দেওয়া হয়েছিল।

Comments

এটি কি বোঝায় যে এটি মডেলফর্ম ক্লাসের সাথে ব্যবহার করা যাবে না?

— এক্সস্টার

না, আপনাকে কেবল মডেল আকারে ফর্ম ক্ষেত্রটি স্পষ্টভাবে সংজ্ঞায়িত করতে হবে যাতে আপনি উইজেট সংজ্ঞায়িত করতে পারেন। অথবা ফর্ম ক্ষেত্রের সাথে আলিঙ্গন করা এড়াতে নীচে তালিকাভুক্ত সমাধানটি ব্যবহার করুন।

— টম

Answer 3

শ্রেণিতে ক্ষেত্রগুলি ঘোষণা করার পরে উইজেটগুলিতে শ্রেণি সংজ্ঞা যুক্ত করার জন্য এখানে আরও একটি সমাধান রয়েছে।

def __init__(self, *args, **kwargs):
    super(SampleClass, self).__init__(*args, **kwargs)
    self.fields['name'].widget.attrs['class'] = 'my_class'

Comments

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

— ড্যানিয়েল নবাব

এটি ধরে নিয়েছে যে আপনি একটি ফর্মের প্রতিটি ক্ষেত্রের জন্য একটি ইনপুট চান, যা প্রায়শই হয় না। কোনও ফর্ম প্রয়োজনীয়ভাবে কোনও মডেলের সাথে আবদ্ধ হয় না - এটি অনেকগুলি মডেলের সাথে আবদ্ধ হতে পারে। যে ক্ষেত্রে মডেল ক্ষেত্র এবং ফর্ম ক্ষেত্রগুলির মধ্যে 1: 1 সম্পর্ক রয়েছে, তবে হ্যাঁ, মডেলফর্মটি আরও ভাল পছন্দ।

— অ্যাশক্রিস্টোফার

Answer 4

জাঙ্গো-উইজেট-টুইটগুলি ব্যবহার করুন , এটি ব্যবহার করা সহজ এবং বেশ ভালভাবে কাজ করে।

অন্যথায় এটি একটি কাস্টম টেম্পলেট ফিল্টার ব্যবহার করে করা যেতে পারে।

আপনি আপনার ফর্মটি এভাবে রেন্ডার করে বিবেচনা করছেন:

<form action="/contact/" method="post">
    {{ form.non_field_errors }}
    <div class="fieldWrapper">
        {{ form.subject.errors }}
        <label for="id_subject">Email subject:</label>
        {{ form.subject }}
    </div>
</form>

form.subject একটি দৃষ্টান্ত হল BoundField যা হয়েছে as_widget পদ্ধতি।

আপনি "মাই_এপ / টেম্পলেটট্যাগগুলি / মাইফিল্টারস.পি" তে একটি কাস্টম ফিল্টার "অ্যাডকএসএস" তৈরি করতে পারেন

from django import template

register = template.Library()

@register.filter(name='addcss')
def addcss(value, arg):
    css_classes = value.field.widget.attrs.get('class', '').split(' ')
    if css_classes and arg not in css_classes:
        css_classes = '%s %s' % (css_classes, arg)
    return value.as_widget(attrs={'class': css_classes})

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

{% load myfilters %}
<form action="/contact/" method="post">
    {{ form.non_field_errors }}
    <div class="fieldWrapper">
        {{ form.subject.errors }}
        <label for="id_subject">Email subject:</label>
        {{ form.subject|addcss:'MyClass' }}
    </div>
</form>

form.subjects এর পরে "MyClass" CSS শ্রেণীর সাথে রেন্ডার করা হবে।

এই সাহায্য আশা করি।

সম্পাদনা 1

• ডিমাইজির উত্তর অনুসারে ফিল্টার আপডেট করুন

• জ্যাঙ্গো-উইজেট-টুইঙ্ক লিঙ্ক যুক্ত করুন

সম্পাদনা 2

• ভাইডের মন্তব্য অনুসারে ফিল্টার আপডেট করুন

Comments

এটা অসাধারণ! এটি DRY এবং এটি নিয়ন্ত্রণ স্তর থেকে প্রদর্শন স্তর পৃথক করে। আমার কাছ থেকে +1!

— alekwisnia

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

— alekwisnia

আমি বলতে চাই, as_widget () অ্যাটর্সাইডদেরকে ওভাররাইড করে। এটি কীভাবে নিশ্চিত হয় যে এটি বিদ্যমান অ্যাটর্সগুলি ব্যবহার করে এবং তাদের নতুন দিয়ে প্রসারিত করে?

— alekwisnia

বিদ্যমান মাঠের ক্লাসগুলিকে কীভাবে সম্মান করবেন সে সম্পর্কে এই উত্তরটি দেখুন

— ডিএমজিজি

get('class', None).split(' ')ফিরে আসার সাথে সাথে ট্যাগটিতে শ্রেণীর বৈশিষ্ট্য না থাকলে ব্যর্থ হবে None। এটি get('class', '').split(' ')কাজ করে পরিবর্তন করা

— dtasev

Answer 5

Docs.djangoproject.com এ নির্দেশিত পদ্ধতিটির প্রসারিত:

class MyForm(forms.Form): 
    comment = forms.CharField(
            widget=forms.TextInput(attrs={'size':'40'}))

আমি মনে করি প্রতিটি ক্ষেত্রের জন্য নেটিভ উইজেট টাইপটি জানা খুব কষ্টকর এবং আমি ফর্মের ক্ষেত্রে শ্রেণীর নাম রাখার জন্য ডিফল্টটিকে ওভাররাইড করা মজাদার বলে মনে করি। এটি আমার পক্ষে কাজ করে বলে মনে হচ্ছে:

class MyForm(forms.Form): 
    #This instantiates the field w/ the default widget
    comment = forms.CharField()

    #We only override the part we care about
    comment.widget.attrs['size'] = '40'

এটা আমার কাছে একটু ক্লিনার মনে হচ্ছে।

Comments

যুগে যুগে অন্যেরা যা বলেছেন তা হ'ল ঠিক এটি যা আপনি 'ক্লাস' না করে অনুরোধ করা হয়েছে তার চেয়ে 'আকার' দিয়ে করছেন।

— ক্রিস মরগান

@ ক্রিস মরগান প্রকৃতপক্ষে, তিনি নিজেই ফর্ম ঘোষণায় "কমেন্ট.উইজেট.এটার্স" ব্যবহার করার পরামর্শ দেওয়ার আগে (ইন-এর সাথে গোলযোগ বা দৃষ্টিতে এটি করার পরিবর্তে ) ব্যবহার করার পরামর্শ দিয়েছেন।

— ডারউইনসুরভিভার

Answer 6

আপনি যদি ফর্মের সমস্ত ক্ষেত্র নির্দিষ্ট শ্রেণির উত্তরাধিকারী হতে চান তবে আপনি কেবলমাত্র একটি পিতামাতার শ্রেণিটি নির্ধারণ করুন, যা উত্তরাধিকার সূত্রে প্রাপ্ত forms.ModelFormএবং তারপরে উত্তরাধিকার সূত্রে প্রাপ্ত

class BaseForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(BaseForm, self).__init__(*args, **kwargs)
        for field_name, field in self.fields.items():
            field.widget.attrs['class'] = 'someClass'


class WhateverForm(BaseForm):
    class Meta:
        model = SomeModel

'form-control'কোডের অনুলিপি যোগ না করে এটি আমাকে স্বয়ংক্রিয়ভাবে আমার অ্যাপ্লিকেশনটির সমস্ত ফর্মের ক্ষেত্রগুলিতে ক্লাস যুক্ত করতে সহায়তা করেছিল ।

Comments

দয়া করে বড় হাতের সাথে ক্লাসের নামগুলি শুরু করুন (এছাড়াও, বেসফোর্ম এর পক্ষে আরও ভাল নাম বলে মনে হচ্ছে)

— আলভারো

Answer 7

দেখার পরিবর্তে এখানে সহজ উপায়। এটি টেমপ্লেটে উত্তীর্ণ হওয়ার আগে দৃশ্যে নীচে যুক্ত করুন।

form = MyForm(instance = instance.obj)
form.fields['email'].widget.attrs = {'class':'here_class_name'}

Answer 8

কেবল আপনার ফর্মটিতে ক্লাসগুলি নিম্নলিখিত হিসাবে যুক্ত করুন।

class UserLoginForm(forms.Form):
    username = forms.CharField(widget=forms.TextInput(
        attrs={
        'class':'form-control',
        'placeholder':'Username'
        }
    ))
    password = forms.CharField(widget=forms.PasswordInput(
        attrs={
        'class':'form-control',
        'placeholder':'Password'
        }
    ))

Answer 9

উপরের অংশে এখানে একটি প্রকরণ রয়েছে যা সমস্ত ক্ষেত্রকে একই বর্গ দেবে (উদাঃ জকিউরি সুন্দর গোলাকার কোণ)।

  # Simple way to assign css class to every field
  def __init__(self, *args, **kwargs):
    super(TranslatedPageForm, self).__init__(*args, **kwargs)
    for myField in self.fields:
      self.fields[myField].widget.attrs['class'] = 'ui-state-default ui-corner-all'

Answer 10

আপনি এটি চেষ্টা করতে পারেন ..

class SampleClass(forms.Form):
  name = forms.CharField(max_length=30)
  name.widget.attrs.update({'class': 'your-class'})
...

আপনি আরও তথ্য দেখতে পাবেন: জ্যাঙ্গো উইজেটস

Answer 11

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

আমি এটিকে সম্পাদনা হিসাবে যুক্ত করার চেষ্টা করেছি তবে এটি একটি নতুন উত্তর হিসাবে লেখার পরামর্শ দেওয়া হয়েছিল।

সুতরাং, এখানে একটি টেম্পলেট ট্যাগ যা ক্ষেত্রের বিদ্যমান শ্রেণিগুলিকে সম্মান করে:

from django import template

register = template.Library()


@register.filter(name='addclass')
def addclass(field, given_class):
    existing_classes = field.field.widget.attrs.get('class', None)
    if existing_classes:
        if existing_classes.find(given_class) == -1:
            # if the given class doesn't exist in the existing classes
            classes = existing_classes + ' ' + given_class
        else:
            classes = existing_classes
    else:
        classes = given_class
    return field.as_widget(attrs={"class": classes})

Comments

আপনার পরামর্শের জন্য ধন্যবাদ. আমি আরও উত্তর "পাইথোনিক" পদ্ধতির সাহায্যে আমার উত্তরটিকে সম্পাদনা করেছি।

— Charlesthk

দুর্দান্ত !!, আমি যা খুঁজছিলাম

— উগালি নরম

Answer 12

দেখা যাচ্ছে যে আপনি ফর্ম কনস্ট্রাক্টর ( init ফাংশন) এ বা ফর্ম ক্লাস শুরু হওয়ার পরে এটি করতে পারেন। যদি আপনি নিজের ফর্মটি না লিখছেন এবং অন্য কোনও জায়গা থেকে সেই ফর্মটি আগত হয় তবে কখনও কখনও এটির প্রয়োজন হয় -

def some_view(request):
    add_css_to_fields = ['list','of','fields']
    if request.method == 'POST':
        form = SomeForm(request.POST)
        if form.is_valid():
            return HttpResponseRedirect('/thanks/')
    else:
        form = SomeForm()

    for key in form.fields.keys():
        if key in add_css_to_fields:
            field = form.fields[key]
            css_addition = 'css_addition '
            css = field.widget.attrs.get('class', '')
            field.widget.attrs['class'] = css_addition + css_classes

    return render(request, 'template_name.html', {'form': form})

Answer 13

আপনি জ্যাঙ্গো ক্রিস্পি ফর্মগুলিও ব্যবহার করতে পারেন, আপনি বুটস্ট্র্যাপ বা ফাউন্ডেশন এর মতো কিছু সিএসএস ফ্রেমওয়ার্ক ব্যবহার করতে চান এমন ক্ষেত্রে ফর্মগুলি সংজ্ঞায়িত করার দুর্দান্ত সরঞ্জাম। এবং সেখানে আপনার ফর্ম ক্ষেত্রের জন্য ক্লাস নির্দিষ্ট করা সহজ।

আপনার ফর্ম শ্রেণিটি এটি আবার পছন্দ করতে পারে:

from django import forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Submit, Field
from crispy_forms.bootstrap import FormActions

class SampleClass(forms.Form):
    name = forms.CharField(max_length=30)
    age = forms.IntegerField()
    django_hacker = forms.BooleanField(required=False)

    helper = FormHelper()
    helper.form_class = 'your-form-class'
    helper.layout = Layout(
        Field('name', css_class='name-class'),
        Field('age', css_class='age-class'),
        Field('django_hacker', css-class='hacker-class'),
        FormActions(
            Submit('save_changes', 'Save changes'),
        )
    )