教你如何為Django表單設(shè)置樣式？

每個(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ù)。

換句話說(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)獲取用戶名以及他的電子郵件。

from django import forms
class 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, EmailInput
class 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, EmailInput
from .models import User
class 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ǔ)用戶信息的模型。
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)單，這很方便。

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

點(diǎn)擊下方“閱讀原文”查看更多