আমার কাছে একটি ইনপুট ক্ষেত্র রয়েছে যা এই জাতীয় টেমপ্লেটের সাথে রেন্ডার হয়:
<div class="field">
{{ form.city }}
</div>
যা হিসাবে রেন্ডার করা হয়:
<div class="field">
<input id="id_city" type="text" name="city" maxlength="100" />
</div>
এখন ধরুন আমি autocomplete="off"যে ইনপুট উপাদানটি রেন্ডার করা হয়েছে তাতে কোনও গুন যুক্ত করতে চাই, আমি কীভাবে এটি করব? অথবা onclick="xyz()"অথবা class="my-special-css-class"?
উত্তর:
city = forms.CharField(widget=forms.TextInput(attrs={'autocomplete':'off'}))বিজ্ঞাপন দেওয়ার জন্য দুঃখিত, তবে আমি সম্প্রতি একটি অ্যাপ্লিকেশন ( https://github.com/kmike/django-widget-tweaks ) প্রকাশ করেছি যা এই জাতীয় কাজগুলিকে আরও কম বেদনাদায়ক করে তোলে তাই ডিজাইনাররা পাইথন কোডটি স্পর্শ না করে এটি করতে পারে:
{% load widget_tweaks %}
...
<div class="field">
{{ form.city|attr:"autocomplete:off"|add_class:"my_css_class" }}
</div>
বা, বিকল্পভাবে,
{% load widget_tweaks %}
...
<div class="field">
{% render_field form.city autocomplete="off" class+="my_css_class" %}
</div>
আপনি যদি "মডেলফর্ম" ব্যবহার করেন:
class YourModelForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(YourModelForm, self).__init__(*args, **kwargs)
self.fields['city'].widget.attrs.update({
'autocomplete': 'off'
})
আপনি যদি তার উত্তরে প্রদত্ত @ আর্টিফিয়ু হিসাবে ModelFormব্যবহারের সম্ভাবনা বাদ দিয়ে ব্যবহার __init__করেন তবে widgetsসেই বিষয়ে মেটাতে একটি অভিধান রয়েছে:
class AuthorForm(ModelForm):
class Meta:
model = Author
fields = ('name', 'title', 'birth_date')
widgets = {
'name': Textarea(attrs={'cols': 80, 'rows': 20}),
}
আমি এই জিনিসটির জন্য একটি সম্পূর্ণ অ্যাপ্লিকেশন ব্যবহার করতে চাই না। পরিবর্তে আমি নীচের কোডটি এখানে পেয়েছি https://blog.joeymasip.com/how-to-add-attributes-to-form-widgets-in-django-templates/
# utils.py
from django.template import Library
register = Library()
@register.filter(name='add_attr')
def add_attr(field, css):
attrs = {}
definition = css.split(',')
for d in definition:
if ':' not in d:
attrs['class'] = d
else:
key, val = d.split(':')
attrs[key] = val
return field.as_widget(attrs=attrs)
এইচটিএমএল ফাইলে ট্যাগটি ব্যবহার করুন
{% load utils %}
{{ form.field_1|add_attr:"class:my_class1 my_class2" }}
{{ form.field_2|add_attr:"class:my_class1 my_class2,autocomplete:off" }}
জ্যাঙ্গো ফর্মগুলিতে মডেলগুলি তৈরি করতে এবং আপডেট করতে পুনরায় ব্যবহারযোগ্য ফর্ম টেম্পলেটগুলি তৈরি করার চেষ্টা করে আমি বেশ কয়েক দিন ব্যয় করেছি। লক্ষ্য করুন যে অবজেক্ট পরিবর্তন বা তৈরি করতে মডেলফর্ম ব্যবহার করছি। আমার ফর্মগুলি স্টাইল করতে বুটস্ট্র্যাপও ব্যবহার করছি। আমি অতীতে কিছু ফর্মের জন্য django_for_tweaks ব্যবহার করেছি, তবে আমার প্রচুর টেম্পলেট নির্ভরতা ছাড়াই কিছু কাস্টমাইজেশন প্রয়োজন। যেহেতু আমার প্রকল্পটিতে ইতিমধ্যে jQuery রয়েছে তাই আমি আমার ফর্মগুলি স্টাইল করার জন্য এর বৈশিষ্ট্যগুলি উত্তোলন করার সিদ্ধান্ত নিয়েছি। এখানে কোডটি রয়েছে এবং যে কোনও ফর্মের সাথে কাজ করতে পারে।
#forms.py
from django import forms
from user.models import User, UserProfile
from .models import Task, Transaction
class AddTransactionForm(forms.ModelForm):
class Meta:
model = Transaction
exclude = ['ref_number',]
required_css_class = 'required'
Views.py
@method_decorator(login_required, name='dispatch')
class TransactionView(View):
def get(self, *args, **kwargs):
transactions = Transaction.objects.all()
form = AddTransactionForm
template = 'pages/transaction.html'
context = {
'active': 'transaction',
'transactions': transactions,
'form': form
}
return render(self.request, template, context)
def post(self, *args, **kwargs):
form = AddTransactionForm(self.request.POST or None)
if form.is_valid():
form.save()
messages.success(self.request, 'New Transaction recorded succesfully')
return redirect('dashboard:transaction')
messages.error(self.request, 'Fill the form')
return redirect('dashboard:transaction')
এইচটিএমএল কোড দ্রষ্টব্য: অনেক ভিউ তৈরির ঝামেলা দূর করতে বুটস্ট্র্যাপ 4 মডেল ব্যবহার করছি। জেনেরিক ক্রিয়েভ ভিউ বা আপডেটভিউ ব্যবহার করা ভাল। লিংক বুটস্ট্র্যাপ এবং jqQery
<div class="modal-body">
<form method="post" class="md-form" action="." enctype="multipart/form-data">
{% csrf_token %}
{% for field in form %}
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label for="" class="col-sm-4 col-form-label {% if field.field.required %}
required font-weight-bolder text-danger{%endif %}">{{field.label}}</label>
<div class="col-sm-8">
{{field}}
</div>
</div>
</div>
</div>
{% endfor %}
<input type="submit" value="Add Transaction" class="btn btn-primary">
</form>
</div>
জাভাস্ক্রিপ্ট কোড$(document).ready(function() { /* ... */}); ফাংশন এ লোড মনে রাখবেন ।
var $list = $("#django_form :input[type='text']");
$list.each(function () {
$(this).addClass('form-control')
});
var $select = $("#django_form select");
$select.each(function () {
$(this).addClass('custom-select w-90')
});
var $list = $("#django_form :input[type='number']");
$list.each(function () {
$(this).addClass('form-control')
});
var $list = $("form :input[type='text']");
$list.each(function () {
$(this).addClass('form-control')
});
var $select = $("form select");
$select.each(function () {
$(this).addClass('custom-select w-90')
});
var $list = $("form :input[type='number']");
$list.each(function () {
$(this).addClass('form-control')
});