django的form如何进行添加样式

Question

我的form.py内容：

class LogSearchForm(forms.Form):
    platformId = forms.ChoiceField(label='所属平台',choices=platlist)
    gameOuterIp = forms.ChoiceField(label='游戏服',choices=gamelist)
    logid = forms.ChoiceField(label="日志类型",choices=logChoice)
    starttime = forms.DateTimeField(label="开始时间")
    endtime = forms.DateTimeField(label="结束时间")

里面有forms.ChoiceField字段，现在想在html里给这个字段添加样式要如何处理？

以下是我用form功能处理的一些方式

<form class="form-line" method="post" action="/items/search_log/">
{% csrf_token %}

<div class="form-group col-sm-1">
    <label>{{ log_form.platformId.label }}</label>
        {{ log_form.platformId}}
</div>
</form>        

如果不用form功能，自己写的话，如下信息：

<form class="form-inline" method="post" action="/items/search_log/">
 <div class="form-group col-sm-1">
   <label for="exampleInputName2">所属平台</label>
   <select id="id_select" class="form-control selectpicker" data-live-search="true" name="platformId">
       <option value="">平台</option>

       {% for plat in platlists %}
       <option value="{{ plat.plat_id }}">{{ plat.plat_name }}</option>
       {% endfor %}
   </select>
 </div>  
</form>

现在想用form功能，然后要带上样式

class="form-control selectpicker" data-live-search="true"

要怎么处理？

我不想使用类似以下方式

class CommentForm(forms.Form): 
name = forms.CharField(widget=forms.TextInput(attrs={'class': 'special'})) 
comment = forms.CharField(widget=forms.TextInput(attrs={'size': '40'}))

这么写，前后端没有分离，我想前端的事前端自己处理，而不是放在服务端处理。

Answer 1

上述方式挺好的，也可以定制每个字段样式。

form的每个字段类型都有默认的widget，一种方式你写一个定制的字段类型,里面的widget的样式先定义好。另一种方式，有一个field.as_widget(widget=None, attrs=None, only_initial=False)方法，可在生成form实例后调教里面field的class，如field.as_widget = fielf.as_widget(attrs={"class":"form-control"})，在template中使用field.as_widget方法渲染。

Answer 2

你可以试下django-widget-tweaks 具体使用方法 你可以看下官方手册

Answer 3

Django的Forms生成的样式很差劲...即使添加了widget也一样

你可以在View里面把实例化后的forms对象传入Temaplate,然后{{forms.email}}输出HTML

forms.py

email = forms.EmailField(...)

views.py

return render(request, "users/login.html",{"forms":forms})

users/login.html

<div class="input-group input-group-md">
    <span class="input-group-addon" id="sizing-addon1">
        <i class="glyphicon glyphicon-user" aria-hidden="true"></i>
    </span>
    {{ forms.email }}
</div>

这样你就可以把input放到任何一个地方,而不是forms那样连续生成.