다음과 같은 템플릿으로 렌더링되는 입력 필드가 있습니다.
<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>"ModelForm"을 사용하는 경우 :
class YourModelForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(YourModelForm, self).__init__(*args, **kwargs)
self.fields['city'].widget.attrs.update({
'autocomplete': 'off'
})을 사용하는 경우 그의 답변에 제공된 @Artificioo ModelForm로 사용할 가능성을 제외 하고 Meta에 해당 문제에 대한 사전이 있습니다.__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)html 파일의 태그 사용
{% 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 양식에서 모델을 만들고 업데이트하기 위해 재사용 가능한 양식 템플릿을 만드는 데 며칠을 보냈습니다. ModelForm을 사용하여 개체를 변경하거나 만듭니다. 내 양식을 스타일링하기 위해 부트 스트랩도 사용하고 있습니다. 과거에는 일부 양식에 django_form_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')HTML 코드 참고 : 많은 뷰를 만드는 번거 로움을 없애기 위해 bootstrap4 모달을 사용하고 있습니다. 일반 CreateView 또는 UpdateView를 사용하는 것이 더 낫습니다. 부트 스트랩과 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')
});