Django 表單的Widgets


一、指定使用的widget

  每個字段都有一個默認的widget類型。如果想要使用一個不同的Widget,可以在定義字段時使用widget參數。 像這樣:

from django import forms class CommentForm(forms.Form): name = forms.CharField() url = forms.URLField() comment = forms.CharField(widget=forms.Textarea)

  這將使用一個Textarea Widget來展現表單的評論字段,而不是默認的TextInput Widget。

二、設置widget的參數

  許多widget具有可選的額外參數,下面的示例中,設置了SelectDateWidget的years 屬性,注意參數的傳遞方法:

from django import forms BIRTH_YEAR_CHOICES = ('1980', '1981', '1982') FAVORITE_COLORS_CHOICES = ( ('blue', 'Blue'), ('green', 'Green'), ('black', 'Black'), ) class SimpleForm(forms.Form): birth_year = forms.DateField(widget=forms.SelectDateWidget(years=BIRTH_YEAR_CHOICES)) favorite_colors = forms.MultipleChoiceField( required=False, widget=forms.CheckboxSelectMultiple, choices=FAVORITE_COLORS_CHOICES, )

三、為widget添加CSS樣式

  默認情況下,當Django渲染Widget為實際的HTML代碼時,不會添加任何的CSS樣式,也就是說網頁上所有的TextInput元素的外觀是一樣的。

  看下面的表單:

from django import forms class CommentForm(forms.Form): name = forms.CharField() url = forms.URLField() comment = forms.CharField()

  這個表單包含三個默認的TextInput Widget,以默認的方式渲染,沒有CSS類、沒有額外的屬性。每個Widget的輸入框將渲染得一模一樣,丑陋又單調:

>>> f = CommentForm(auto_id=False) >>> f.as_table() <tr><th>Name:</th><td><input type="text" name="name" required /></td></tr>
<tr><th>Url:</th><td><input type="url" name="url" required /></td></tr>
<tr><th>Comment:</th><td><input type="text" name="comment" required /></td></tr>

  在真正的網頁中,肯定不想讓每個Widget看上去都一樣。可能想要給comment一個更大的輸入框,可能想讓‘name’ Widget具有一些特殊的CSS類。

  可以在創建Widget時使用Widget.attrs參數來實現這一目的:

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'}))

  注意參數的傳遞方式!

  這次渲染后的結果就不一樣了:

>>> f = CommentForm(auto_id=False) >>> f.as_table() <tr><th>Name:</th><td><input type="text" name="name" class="special" required /></td></tr>
<tr><th>Url:</th><td><input type="url" name="url" required /></td></tr>
<tr><th>Comment:</th><td><input type="text" name="comment" size="40" required /></td></tr>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM