如何使用UIKit样式格式化Django表单

Question

我正在努力寻找一种以uikit水平形式样式设置django表单的方法。UIKit 有我想要的样式，Django 有我想要的验证和模板。实现日期选择器的方法也很有用。

我已经尝试了带有.as_p和.as_table的普通 django 表单模板。我也尝试使用 Meta 和小部件，但无法使其工作。我看不出如何将所需的 uikit 标签添加到每个元素并添加 uk-form-controlsdiv。

模板.html

<form class="uk-form-horizontal uk-margin-large uk-align-center">
<div class="uk-margin">
<label class="uk-form-label" for="form-horizontal-text">Job Title</label>
<div class="uk-form-controls">
<input class="uk-input uk-form-width-large" id="form-horizontal-text" type="text" placeholder="Some text...">
</div>
</div>

forms.py

class job_form(forms.Form):
job_title = forms.CharField(label='Job Title', max_length=50)
hiring_manager = forms.CharField(label='Hiring Manager', max_length=50)
job_description = forms.CharField(label='Job Description', max_length=50)
salary = forms.IntegerField()
closing_date = forms.DateField()

我希望能够将 uikit 表单样式与 django 表单的模板化和验证一起使用，但尚未使其工作。

Answer 1

Django 有多种方法来覆盖表单行为和布局。我看到您正在使用forms.Form实例。只需将您的类添加到form类中，例如：

class NiceForm(forms.Form):
solid_field=forms.CharField(widget=forms.TextInput(attrs={'class': 'uk-form-input'}))

虽然它很简单，但很迟钝，但当您想对布局进行重大更改时，我会覆盖模板(或 render 方法，如果您愿意(以捆绑可重用的小部件。将表单提取到外部可重用模板的简单示例，因为您可以手动将它们呈现为 HTML 类文档。

保持表单干净并使用模板标记覆盖类：

# _form_icludes.html
{% for field in form.visible_fields %}
<fieldset class="uk-fieldset">
<div class="uk-margin">
<label class="uk-form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
<div class="uk-form-controls">
{% if field.field.widget.input_type  == 'select' %}
{{ field | add_css_cls:'uk-select'}}
{% elif field.field.widget.input_type  == 'option'%}
{{ field | add_css_cls:'uk-option'}}
{% elif field.field.widget.input_type  == 'checkbox'%}
{{ field | add_css_cls:'uk-checkbox'}}
{% elif field.field.widget.input_type  == 'select'%}
{{ field | add_css_cls:'uk-select'}}
{% elif field.field.widget.input_type  == 'file'%}
{{ field }}
{% else %}
{{ field | add_css_cls:'uk-input'}}
{% endif %}
{% if field.help_text %}
<span class="uk-text-small uk-text-left uk-text-italic">
{{ field.help_text }}
</span>
{% endif %}
{% if field.errors %}
{% for error in field.errors %}
<p class="uk-flex uk-flex-middle uk-text-danger ">
<span data-uk-icon="icon:warning" class="uk-text-danger uk-margin-small-right"></span>
{{ error | escape }}
<p/>
</div>
{% endfor %}
{% endif %}
</div>
</fieldset>
{% endfor %}

# add_css_cls
from django import template
register = template.Library()
@register.filter
def add_css_cls(value, arg):
css_classes = value.field.widget.attrs.get('class', '').split(' ')
if css_classes and arg not in css_classes:
css_classes = '%s %s' % (css_classes, arg)
return value.as_widget(attrs={'class': css_classes})

有许多不同的方法。