1. 处理 input 的部件
TextInput
NumberInput
EmailInput
URLInput
PasswordInput
HiddenInput
DateInput
DateTimeInput
TimeInput
Textarea
2. Selector 和 checkbox 部件
CheckboxInput
Select
NullBooleanSelect
RadioSelect
CheckboxSelectMultiple
3. File upload 部件
FileInput
ClearableFileInput
4. 合成部件
MultipleHiddenInput
SplitDateTimeWidget
SplitHiddenDateTimeWidget
SelectDateWidget
所有内置的部件类都是继承自Widget和
MultiWidge ，可以继承它们实现自己的部件功能
定制forms部件widget
Django 会把部件渲染成 HTML，这个渲染过程只会执行最小的工作量 -- 不会添加类名，或者其它具体的属性。这意味着，例如，所有 TextInput 部件会在你所有的Web页面上具有一样的外观。
有两种办法可以订制部件：一是定制部件的实例对象（订制 field 属性）；二是继承部件，定义内部类（订制 css 和 js 文件的链接）。
1）定制部件的实例对象
若想让一个部件看起来和其它的不一样，只需要在部件对象被指定给form域时在部件类里添加额外的属性即可。在 Form 类里，对 field 指定widget，并传递一个参数 attrs，这个参数的类型是一个字典。
例如，有一个 Form 类：
|
1
2
3
4
5
6
|
from
django
import
forms
class
CommentForm(forms.Form):
name
=
forms.CharField()
url
=
forms.URLField()
comment
=
forms.CharField()
|
此 form 包含三个默认的 TextInput 部件，默认没有 CSS 类渲染，没有额外的属性。这意味着每个部件会具有同样的外观。
|
1
2
3
4
5
|
>>> f
=
CommentForm(auto_id
=
False
)
>>> f.as_table()
<tr><th>Name:<
/
th><td><
input
type
=
"text"
name
=
"name"
/
><
/
td><
/
tr>
<tr><th>Url:<
/
th><td><
input
type
=
"url"
name
=
"url"
/
><
/
td><
/
tr>
<tr><th>Comment:<
/
th><td><
input
type
=
"text"
name
=
"comment"
/
><
/
td><
/
tr>
|
在实际应用中，你可能会不想每个部件看起来一样（让comment有更大的输入框或给name部件添加额外的CSS）。可以指定 ‘type’ 属性来利用 HTML5的新HTML元素。想要实现这些，你只需要在创建部件时，使用 Widget.attrs 作为参数。
|
1
2
3
4
5
6
|
class
CommentForm(forms.Form):
name
=
forms.CharField(
widget
=
forms.TextInput(attrs
=
{
'class'
:
'special'
}))
url
=
forms.URLField()
comment
=
forms.CharField(
widget
=
forms.TextInput(attrs
=
{
'size'
:
'40'
}))
|
其所渲染的 HTML 会包含额外的属性：
|
1
2
3
4
5
|
>>> f
=
CommentForm(auto_id
=
False
)
>>> f.as_table()
<tr><th>Name:<
/
th><td><
input
type
=
"text"
name
=
"name"
class
=
"special"
/
><
/
td><
/
tr>
<tr><th>Url:<
/
th><td><
input
type
=
"url"
name
=
"url"
/
><
/
td><
/
tr>
<tr><th>Comment:<
/
th><td><
input
type
=
"text"
name
=
"comment"
size
=
"40"
/
><
/
td><
/
tr>
|
2）继承部件，定义内部类
第二种方法：继承部件类，或定义内部类 Media，或创建一个 media 属性。
（1）定义内部类 Media
|
1
2
3
4
5
6
7
8
|
from
django
import
forms
class
CalendarWidget(forms.TextInput):
class
Media:
css
=
{
'all'
: (
'pretty.css'
,)
}
js
=
(
'animations.js'
,
'actions.js'
)
|
这个部件会生成 link 和 script 代码
|
1
2
3
4
5
|
>>> w
=
CalendarWidget()
>>>
print
(w.media)
<link href
=
"http://static.example.com/pretty.css"
type
=
"text/css"
media
=
"all"
rel
=
"stylesheet"
/
>
<script
type
=
"text/javascript"
src
=
"http://static.example.com/animations.js"
><
/
script>
<script
type
=
"text/javascript"
src
=
"http://static.example.com/actions.js"
><
/
script>
|
（2）创建一个 Media 属性
|
1
2
3
4
5
|
class
CalendarWidget(forms.TextInput):
def
_media(
self
):
return
forms.Media(css
=
{
'all'
: (
'pretty.css'
,)},
js
=
(
'animations.js'
,
'actions.js'
))
media
=
property
(_media)
|