Question

我正在做django项目。我喜欢DRY的原则。我有一个表格，可以应用于所有其他需要它的页面。我是指基于django docs的通用表单。但在表单中，可以选择类型，文件上传，复选框，收音机等我不喜欢原生html的设计。我想通过一些定制来利用材料的设计。我该怎么做？下面是我的表单，我的表单有复选框，文件上传和多个选择，我需要自定义。简而言之，我的问题是如何让我的通用表单设计器友好？

目前我正在处理我的表单模板，如下所示

<form class="form" role="form" action="" method="post">
    {% csrf_token %}
    <div class="form-group label-floating">
        <label class="control-label" for="{{ form.company.id_for_label}}">Company</label>
        <select class="form-control" name="{{ form.company.name }}" id="{{ form.company.id_for_label}}">
            <option value=""></option>
            {% for id, name in form.company.field.choices %}
                <option value="{{ id }}" class="option">{{ name }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="form-group label-floating">
        <label class="control-label" for="{{ form.name.id_for_label}}">Job Title</label>
        <input type="text" id="{{ form.name.id_for_label }}" name="{{ form.name.name }}" class="form-control">
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group label-floating">
                <label class="control-label" for="{{ form.description.id_for_label}}">{{ form.description.label }}</label>
                <div class="markdownx">
                    {{ form.description|add_css:'form-control' }}
                </div>
            </div>
        </div>
    </div>

    <div class="form-group label-floating">
        <label class="control-label" for="{{ form.category.id_for_label}}">{{ form.category.label }}</label>
        <select class="form-control" name="{{ form.category.name }}" id="{{ form.category.id_for_label}}">
            <option value=""></option>
            {% for id, name in form.category.field.choices %}
                <option value="{{ id }}">{{ name }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="form-group label-floating">
        <label class="control-label" for="{{ form.city.id_for_label}}">{{ form.city.label }}</label>
        <input type="text" id="{{ form.city.id_for_label }}" name="{{ form.city.name }}" class="form-control">
    </div>
    <div class="form-group label-floating">
        <label class="control-label" for="{{ form.address.id_for_label}}">{{ form.address.label }}</label>
        <input type="text" id="{{ form.address.id_for_label }}" name="{{ form.address.name }}" class="form-control">
    </div>
</form>

这样，显示表单的代码变得如此巨大，只有1个表单。用超过8种表格为应用程序编写如此庞大的代码并不好。

更好的方法是

{% load add_css %}
<div class="row">
    <div class="col-lg-12">
        <div class="text-center m-t-lg">
            <form class="form-horizontal" role="form" action="" method="post" enctype='multipart/form-data'>
                {% csrf_token %}
                {% for field in form %}
                    {% if field.errors %}
                        <div class="form-group has-error">
                            <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
                            <div class="col-sm-10">
                                {{ field|add_css:'form-control' }}
                                <span class="help-block">
                                {% for error in  field.errors %}{{ error }}{% endfor %}
                            </span>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
                        <div class="col-sm-10">
                            {{ field|add_css:'form-control' }}
                            {% if field.help_text %}
                                <p class="help-block"><small>{{ field.help_text }}</small></p>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

但这是我面临的一个难题。我无法检查它是文件上传字段还是多个选择字段等，因此我可以相应地设计它们。因为有时候，我需要处理很多div来正确显示它。

有没有办法让表单模板对设计师更灵活？

Answer 1

您可以在字段定义中使用arg widget，并创建一些自定义窗口小部件模板。所以你定义它们一次，你只需要关心模板中的打印字段。这里是widget et custom widget

上的文档

django表单模板设计师友好

1 个答案: