每個(gè)使用Django的人都知道Django表單的優(yōu)點(diǎn)。但是，當(dāng)你第一次使用它時(shí)，一般會(huì)出現(xiàn)一個(gè)問(wèn)題：我該如何設(shè)計(jì)它的樣式？如何添加class？

是的，其實(shí)有一種方法（實(shí)際上很簡(jiǎn)單），就是必須使用widgets（小部件）。

什么是widgets：widgets是Django對(duì)HTML輸入元素的表示。widgets處理HTML的呈現(xiàn)，并從與widgets相對(duì)應(yīng)的GET / POST字典中提取數(shù)據(jù)。

換句話(huà)說(shuō)，widgets只是定義如何將內(nèi)容呈現(xiàn)為HTML的一種方法。因此，例如，CharField具有默認(rèn)的TextInput小部件，該小部件呈現(xiàn)為《input type =“ text”》。

但是小部件是可自定義的，因此還可以設(shè)置諸如文本區(qū)域的大小之類(lèi)的內(nèi)容，或者該字段是否將成為必填字段等等。

因此，讓我們嘗試構(gòu)建一個(gè)示例來(lái)展示實(shí)際使用的小部件。

假設(shè)我們有一個(gè)名為UserInfoForm的表單來(lái)獲取用戶(hù)名以及他的電子郵件。

from django import formsclass UserInfoForm（forms.Form）： name = forms.CharField（） email = forms.EmailField（）

HTML看起來(lái)像這樣：

《div class=“container”》《h1》Form《/h1》《form action=“{% url ‘index’ %}” method=“post”》 {% csrf_token %}《div class=“form-group”》 {{ form }}《/div》《div class=“form-group”》《input class=“btn btn-success” type=“submit” value=“Submit”》《/div》《/form》《/div》

目前，此表單使用默認(rèn)的窗口小部件，并且沒(méi)有任何樣式，因此基本上，它看起來(lái)像這樣：

看著還可以，但是它仍然可以改進(jìn)，我們可以向其中添加一個(gè)Bootstrap類(lèi)。我們可以通過(guò)在attrs字典中聲明一個(gè)類(lèi)來(lái)做到這一點(diǎn)。

from django import formsfrom django.forms import TextInput， EmailInputclass UserInfoForm（forms.Form）： name = forms.CharField（widget=forms.TextInput（attrs={‘placeholder’： ‘Name’， ‘style’： ‘width： 300px;’， ‘class’： ‘form-control’） email = forms.EmailField（widget=forms.EmailInput（attrs={‘placeholder’ ：‘Email’， ‘style’： ‘width： 300px;’， ‘class’： ‘form-control’）

我們添加了一個(gè)Bootstrap類(lèi)，然后看結(jié)果：

但是通常當(dāng)我們使用Django表單時(shí)，這些表單與某種模型相關(guān)，而現(xiàn)在這種表單卻沒(méi)有。為此，我們需要進(jìn)行一些更改。我們現(xiàn)在將使用小部件類(lèi)。窗口小部件類(lèi)具有基本的屬性attrs，就像上面的示例一樣。我們還必須添加一個(gè)名為Meta的新類(lèi)，并指定與該表單相關(guān)的模型的名稱(chēng)，我們要擁有的字段以及這些字段的小部件。

from django import formsfrom django.forms import ModelForm， TextInput， EmailInputfrom .models import Userclass UserInfoForm（ModelForm）：class Meta： model = User fields = ［‘name’， ‘email’］ widgets = {‘name’： TextInput（attrs={‘class’： “form-control”，‘style’： ‘max-width： 300px;’，‘placeholder’： ‘Name’ }），‘email’： EmailInput（attrs={‘class’： “form-control”， ‘style’： ‘max-width： 300px;’，‘placeholder’： ‘Email’ }） }

那么這是怎么回事？我們之前使用的CharField和EmailField是內(nèi)建字段類(lèi)，但是如果要使用widgets類(lèi)，則需要使用內(nèi)建控件，在此示例中，這些控件是TextInput和EmailInput。最終它們將工作相同，但配置會(huì)略有不同。

該表單基本上與以前的表單相同，它沒(méi)有改變其呈現(xiàn)方式或其他任何方式，但現(xiàn)在此表單已連接到User模型，該模型是用于存儲(chǔ)用戶(hù)信息的模型。 HTML看起來(lái)像這樣：

《div class=“container”》《h1》Form《/h1》《form action=“{% url ‘index’ %}” method=“post”》 {% csrf_token %}《div class=“form-group”》 {{ form.name }}《/div》《div class=“form-group”》 {{ form.email }}《/div》《div class=“form-group”》《input class=“btn btn-primary” type=“submit” value=“Submit”》《/div》《/form》《/div》

最后結(jié)果：

寫(xiě)在最后： 學(xué)習(xí)如何使用窗口小部件非常有用，因?yàn)楝F(xiàn)在你知道如何使這些表單看起來(lái)更好，并且添加Bootstrap類(lèi)非常簡(jiǎn)單，這很方便。

文章轉(zhuǎn)載：Python運(yùn)維技術(shù)

（版權(quán)歸原作者所有，侵刪）

編輯：jq