Question

我有一个输入字段，使用如下模板呈现：

<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"？

Answer 1

Check this page

city = forms.CharField(widget=forms.TextInput(attrs={'autocomplete':'off'}))

Answer 2

很抱歉广告，但我最近发布了一个应用程序（https://github.com/kmike/django-widget-tweaks），这使得这些任务变得更加痛苦，因此设计人员可以在不触及python代码的情况下做到这一点：

{% 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>

Answer 3

如果您正在使用＆＃34; ModelForm＆＃34;：

class YourModelForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(YourModelForm, self).__init__(*args, **kwargs)
        self.fields['city'].widget.attrs.update({
            'autocomplete': 'off'
        })

Answer 4

如果您使用的是ModelForm，除了在答案中使用__init__作为@Artificioo的可能性之外，Meta中有一个widgets字典：

class AuthorForm(ModelForm):
    class Meta:
        model = Author
        fields = ('name', 'title', 'birth_date')
        widgets = {
            'name': Textarea(attrs={'cols': 80, 'rows': 20}),
        }

Relevant documentation

Answer 5

我不想为此使用整个应用程序。相反，我在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" }}

Answer 6

我也遇到了同样的问题，并能够解决以下问题：我按照此链接中的代码进行了一些修改 https://blog.joeymasip.com/how-to-add-attributes-to-form-widgets-in-django-templates/

摘要：

步骤1：创建一个名为add_attr.py的文件，并将其放在应用程序内的templatetags文件夹中

步骤2：将以下代码添加到add_attr.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)

第3步：按如下方式使用标签：加载标签：

{% load add_attr %}

示例：

<input type="email" id="defaultLoginFormEmail" class="form-control mb-4" placeholder="E-mail">

成为

{{ form.email|add_attr:'id=defaultLoginFormEmail,class=form-control mb-4,placeholder=E-mail' }}

Answer 7

我花了很多天的时间来尝试创建可重用的表单模板，以便在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。链接Bootstrap和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>

JavaScript代码，请记住将其加载到$(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')
  });

Django：如何在表单上的输入字段中添加任意html属性？

7 个答案: