Question

我在看wagtail hello-world form 例如：

class FormField(AbstractFormField):
    page = ParentalKey('FormPage', related_name='form_fields')


class FormPage(AbstractEmailForm):
    landing_page_template = 'blog/form_page.html'
    intro = RichTextField(blank=True)
    thank_you_text = RichTextField(blank=True)

    content_panels = AbstractEmailForm.content_panels + [
        FormSubmissionsPanel(),
        FieldPanel('intro', classname="full"),
        InlinePanel('form_fields', label="Form fields"),
        FieldPanel('thank_you_text', classname="full"),
        MultiFieldPanel([
            FieldRowPanel([
                FieldPanel('from_address', classname="col6"),
                FieldPanel('to_address', classname="col6"),
            ]),
            FieldPanel('subject'),
        ], "Email"),
    ]

如果给出这样的模板：

{% for field in form %}
  {{ field }} 
{% endfor %}

它将呈现类似于以下内容的HTML：

<input type="text" name="label1" value="Default Label1" required maxlength="255" id="id_label1" />
<input type="url" name="label2" value="http://Label2.net" id="id_label2" />
<textarea name="label3" required rows="10" id="id_label3" cols="40">

如何修改/添加额外属性到渲染输入字段？

例如：

如何添加class="form-control"？
如何更改rows="5"输入中的textarea？

除了javascript疯狂之外还有其他方便的方法吗？

Answer 1

您可以将widget参数传递给FieldPanel，以定义要与该字段一起使用的Django widget object。除此之外，这还允许您自定义字段上显示的HTML属性：

from django import forms

class FormPage(AbstractEmailForm):
    content_panels = [
        # ...
        FieldPanel('subject', widget=forms.TextInput(attrs={'class': 'form-control'})),
    ]

Answer 2

我假设您想要更改FormPage的呈现方式（即扩展AbstractEmailForm或AbstractForm的网页。）

有一些方法可以在form_page.html模板中执行此操作（请参阅答案底部的链接），但是，我认为最好的办法是在这些属性到达模板之前添加这些属性。

这样，即使只使用docs example中的复制粘贴，您也可以保持模板非常简单。

{% load wagtailcore_tags %}
<html>
    <head>
        <title>{{ page.title }}</title>
    </head>
    <body>
        <h1>{{ page.title }}</h1>
        {{ page.intro|richtext }}
        <form action="{% pageurl page %}" method="POST">
            {% csrf_token %}
            {{ form.as_p }}
            <input type="submit">
        </form>
    </body>
</html>

然后，在my_app/models.py中，您要覆盖get_form上的FormPage方法。您可以在Wagtail form/models.py code中查看get_form方法的作用。

您需要确保通过super获取生成的form对象。然后遍历字段 - 更新每个字段上的小部件。窗口小部件用于呈现输入字段（或Textarea），默认情况下，Textarea widget包含10行和40列。

您还可以使用attrs键更新任何窗口小部件上的class字典，以便为渲染输入添加自定义类。这样我们就可以为每一个输入添加form-control。

参见示例：

from django.forms import widgets  # used to find TextArea widget
# other imports.... AbstractEmailForm etc

class FormPage(AbstractEmailForm):
    # body, thank_you_text, etc

    def get_form(self, *args, **kwargs):
        form = super().get_form(*args, **kwargs)
        # form = super(AbstractEmailForm, self).get_form(*args, **kwargs)  # use this syntax for Python 2.x
        # iterate through the fields in the generated form
        for name, field in form.fields.items():
            # here we want to adjust the widgets on each field
            # if the field is a TextArea - adjust the rows
            if isinstance(field.widget, widgets.Textarea):
                field.widget.attrs.update({'rows': '5'})
            # for all fields, get any existing CSS classes and add 'form-control'
            # ensure the 'class' attribute is a string of classes with spaces
            css_classes = field.widget.attrs.get('class', '').split()
            css_classes.append('form-control')
            field.widget.attrs.update({'class': ' '.join(css_classes)})
        return form

这将在html属性中使用rows=5呈现所有 textarea输入，并将form-control添加到所有输入的class属性中（即使是隐藏的输入，如果用过的）。请记住，这会改变正在使用的每个FormPage。

对于模板中更复杂的表单呈现，本文非常好，但它非常完整：https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html#accessing-the-form-fields-individually

此外，对于表单的基本Bootstrap 3（或4）呈现，Crispy Forms可能会为您节省很多麻烦。

Answer 3

您可以创建动态模板：
通过form创建循环
django doc

{% for field in form.visible_fields %}
   <div>
      <div class="form-group mb-10">
         {{ field.errors }}
         {{ field.label_tag }}
         <input type="{{ field.field.widget.input_type }}" class="form-control"
                name="{{ field.name }}" id="{{ field.id_for_label }}"
                {% if field.field.required %}required="required"{% endif %}>
         {% comment %}you might want form field for textarea or select etc. just make conditions for those {% endcomment %}
      </div>
  </div>
 {% endfor %}

如何修改Wagtail表单输入字段的属性？

3 个答案: