如何修改Django Form生成表单的样式

HIKAI

19 OCT 2017

0 Comments

关于表单样式的修改，有两种方式，前端和后端。后端，可以在定义表单字段时，设定相应widget，比如下面。前端，可以通过django-wddget-tweaks实现。

related = forms.ModelChoiceField(queryset=BlogComment.objects.all(),required=False, widget=forms.HiddenInput)

django-widget-tweaks

第三方django包，用于调整模板渲染后的表单字段样式，而不需要在python-level的表单定义时调整。它支持更改CSS样式表和HTML元素属性。它满足了设计者通过CSS和Javascript定制字段展现的样式，而不用去操作相应的python代码。

安装

pip install django-widget-tweaks

然后在INSTALLED_APPS中添加'widget-tweaks'。

使用

这个应用提供了两组工具，可以一起使用或者单独使用。

1.模板标签render_field，用类似HTML的语法来定制表单字段；

2.一些模板过滤器，用来定制表单字段的HTML属性和CSS样式；

render_field标签应该更容易使用，对于网站设计者和前端开发者来说，更容易去定制表单字段。

相对render_field标签，模板过滤器功能更强大，但是它需要使用或多或少的HTML语法。

render_field

举个例子，

{% load widget_tweaks %}

{% render_field form.search_query type="search" %}

{% render_field form.text rows="20" cols="20" title="Hello, world!" %}

{% render_field form.title class+="css_class_1 css_class_2" %}

{% render_field form.text placeholder=form.text.label %}

可以通过使用WIDGET_ERROR_CLASS和WIDGET_REQUIRED_CLASS模板变量，来设置{%render_field%}渲染的字段的错误和必选的样式表。

{% with WIDGET_ERROR_CLASS='my_error' WIDGET_REQUIRED_CLASS='my_required' %}

{% render_field form.field1 %}

{% render_field form.field2 %}

{% render_field form.field3 %}

{% endwith %}

你可以灵活的使用这些变量：比如，在上下文处理器中对所有通过{%render_field%}渲染的字段设置默认的错误样式表。

过滤器

attr

添加或者替换任何一个表单字段的html属性。

{% load widget_tweaks %}

{{ form.search_query|attr:"type:search" }}

{{ form.text|attr:"rows:20"|attr:"cols:20"|attr:"title:Hello, world!" }}

{{ form.search_query|attr:"autofocus" }}

add_class

给字段元素添加CSS样式。如果一次添加多个样式，通过空格分隔。

{% load widget_tweaks %}

{{ form.title|add_class:"css_class_1 css_class_2" }}

set_data

设置HTML5数据属性(http://ejohn.org/blog/html-5-data-attributes/)。对于javascript非常有用。它是'attr'过滤器的快捷方式，在属性名字前用'data-'字符串装饰。

{% load widget_tweaks %}

{{ form.title|set_data:"filters:OverText" }}

append_attr

给属性值添加额外的数据。

{% load widget_tweaks %}

{{ form.title|append_attr:"class:css_class_1 css_class_2" }}

‘add_class’ filter is just a shortcut for ‘append_attr’ filter that adds values to the ‘class’ attribute.

add_error_class

The same as ‘add_class’ but adds css class only if validation failed for the field (field.errors is not empty).

{% load widget_tweaks %}

{{ form.title|add_error_class:"error-border" }}

add_error_attr

The same as ‘attr’ but sets an attribute only if validation failed for the field (field.errors is not empty). This can be useful when dealing with accessibility:

{% load widget_tweaks %}

{{ form.title|add_error_attr:"aria-invalid:true" }}

field_type and widget_type

'field_type'和'widget_type'是模板过滤器，用来返回字段样式表和字段widget名字。

{% load widget_tweaks %}

output:

Filter chaining

The order django-widget-tweaks filters apply may seem counter-intuitive (leftmost filter wins):

{{ form.simple|attr:"foo:bar"|attr:"foo:baz" }}

output:

它不是bug，它是一个feature，enables creating reusable templates with overridable defaults.(创建可复用模板覆盖默认值？？？)。

Reusable field template example:

{# inc/field.html #}

{% load widget_tweaks %}

Example usage:

{# my_template.html #}

{% load widget_tweaks %}

{% csrf_token %}

{% include "inc/field.html" with field=form.title %}

{% include "inc/field.html" with field=form.description|attr:"foo:non_default_foo" %}

With 'rightmost filter wins' rule it wouldn't be possible to override |attr:"foo:default_foo" in main template.

其它：

https://stackoverflow.com/questions/5827590/css-styling-in-django-forms