我正在做django項目。我喜歡DRY的原則。我有一個表格可以應用於所有需要它的頁面。我的意思是基於django文檔的通用表單。但在表單中,可以選擇類型,文件上傳,複選框,收音機等,我不喜歡原生html的設計。我想利用一些定製材料的設計。我該怎麼做?下面是我的表單,我的表單有複選框,文件上傳和多個選擇,我需要自定義。簡而言之,我的問題是如何讓我的通用表單設計器友好?django表單模板設計器友好
現在我處理我的表單模板遵循
<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個10表格爲應用程序編寫這麼龐大的代碼並不好。
更好的方法是
{% 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來正確顯示它。
有什麼辦法讓表單模板對設計者更靈活?
第二個模板中的''{%else%}''是縮進的。 – Bestasttung
這是從崇高的HTML美化。我需要安裝更漂亮的插件。 – Serenity