自定义 django 表单小部件答案

【问题标题】：Customize the django form widgets自定义 django 表单小部件
【发布时间】：2013-04-03 06:39:59
【问题描述】：

forms.py

INCIDENT_LOCATIONS = (
    ('01. Classroom', '01. Classroom'),
    ('02. Corridor', '02. Corridor'),
    ('03. Stairs', '03. Stairs'),
    ('04. Playground', '04. Playground'),
    ('05. Sportsground', '05. Sportsground'),
    ('06. Excursion', '06. Excursion'),
)

class SearchForm(forms.Form):
    keywordsearch=forms.CharField(max_length=100,label="search")
    incident=forms.CharField(widget=forms.TextInput(attrs={'class':'special'}))
    location=forms.CharField(max_length=100)
    fromdate = forms.DateField(label="From Date", input_formats=['%d/%m/%Y'], validators=[validate_date])
    todate = forms.DateField(label="To Date", input_formats=['%d/%m/%Y'], validators=[validate_date])

1.如何编写css类来增加特定字段的长度，我要求事件字段比关键字搜索字段更长

2.如何在django中创建下拉框。这样做的主要目的是选择上述任何一个选项。在这里选择我正在尝试做的位置字段中的事件位置。我不知道如何在 html 页面中显示此表单。

3.如何减少表单中日期字段的长度，因为它与普通文本框的长度相同。

请帮助我进行上述操作。

谢谢

【问题讨论】：

标签： css django django-models django-forms django-templates

【解决方案1】：

1.如何编写css类来增加特定字段的长度，我要求事件字段比关键字搜索字段更长

你可以使用size属性，

incident=forms.CharField(widget=forms.TextInput(attrs={'class':'special', 'size': '40'}))

2.如何在django中创建下拉框。这样做的主要目的是选择上述任何一个选项。这里选择我正在尝试做的位置字段中的事件位置。我不知道如何在 html 页面中显示此表单。

不要使用 CharField，而是使用 ChoiceFIeld，

location=forms.ChoiceField(choices=INCIDENT_LOCATIONS)

3.如何减少表单中日期字段的长度，因为它与普通文本框的长度相同。

此字段的默认表单小部件是 TextInput。因此，就像第一条一样，您可以使用 size 属性。

【讨论】：

如何在模板中显示选择字段表单
只需在您的模板中调用{{form.as_p}}。你在哪里查看代码，以便我可以教如何？
views.py 还没写，只是在view中初始化了一个搜索功能，专注于html设计
凯瑟琳，如果你有关于 django 中信号概念的文档，请分享。我没有从 Django 文档中说清楚
是的，我一直在考虑在我的博客中发布信号，但我找不到主题。如果你喜欢你可以向我提出要求，只需在信号中告诉我你想让我做什么

【解决方案2】：

编写自己的 css 类： https://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.Widget.attrs

>>> name = forms.TextInput(attrs={'size': 10, 'title': 'Your name',})
>>> name.render('name', 'A name')
u'<input title="Your name" type="text" name="name" value="A name" size="10" />'

对于创建下拉框，您可以使用： https://docs.djangoproject.com/en/dev/ref/forms/widgets/#selectmultiple

location=forms.CharField(max_length=100 widget=form.SelectMultiple)

为了减少长度，您可以使用另一个 css 类，例如：

.myclass { width:100px; }

【讨论】：