如何在 Django 的 CharField 上添加占位符？

Question

以這個非常簡單的表格為例：

class SearchForm(Form):
    q = forms.CharField(label='search')

這在模板中呈現：

<input type="text" name="q" id="id_q" />

但是，我想將placeholder屬性添加到該字段，其值為Search以便 HTML 如下所示：

<input type="text" name="q" id="id_q" placeholder="Search" />

最好我想通過字典或類似的東西將占位符值傳遞給表單類中的CharField ：

q = forms.CharField(label='search', placeholder='Search')

實現這一目標的最佳方法是什么？

Answer 1

查看小部件文檔。 基本上它看起來像：

q = forms.CharField(label='search', 
                    widget=forms.TextInput(attrs={'placeholder': 'Search'}))

更多的寫作，是的，但分離允許更好地抽象更復雜的情況。

您還可以直接在ModelForm子類的Meta上聲明一個包含<field name> => <widget instance>映射的widgets屬性。

Answer 2

對於 ModelForm，您可以這樣使用 Meta 類：

from django import forms

from .models import MyModel

class MyModelForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'name': forms.TextInput(attrs={'placeholder': 'Name'}),
            'description': forms.Textarea(
                attrs={'placeholder': 'Enter description here'}),
        }

Answer 3

其他方法都不錯。 但是，如果您不想指定字段（例如，對於某些動態方法），您可以使用：

def __init__(self, *args, **kwargs):
    super(MyForm, self).__init__(*args, **kwargs)
    self.fields['email'].widget.attrs['placeholder'] = self.fields['email'].label or 'email@address.nl'

它還允許占位符依賴於具有指定實例的 ModelForms 的實例。

Answer 4

您可以使用此代碼為表單中的每個 TextInput 字段添加占位符 attr。 占位符的文本將從模型字段標簽中獲取。

class PlaceholderDemoForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(PlaceholderDemoForm, self).__init__(*args, **kwargs)
        for field_name in self.fields:
            field = self.fields.get(field_name)  
            if field:
                if type(field.widget) in (forms.TextInput, forms.DateInput):
                    field.widget = forms.TextInput(attrs={'placeholder': field.label})

    class Meta:
        model = DemoModel

Answer 5

很好的問題。 我知道三種解決方案：

解決方案#1

替換默認小部件。

class SearchForm(forms.Form):  
    q = forms.CharField(
            label='Search',
            widget=forms.TextInput(attrs={'placeholder': 'Search'})
        )

解決方案#2

自定義默認小部件。 如果您使用該字段通常使用的相同小部件，那么您可以簡單地自定義該小部件，而不是實例化一個全新的小部件。

class SearchForm(forms.Form):  
    q = forms.CharField(label='Search')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['q'].widget.attrs.update({'placeholder': 'Search'})

解決方案#3

最后，如果您正在使用模型表單，那么（除了前兩個解決方案）您可以選擇通過設置內部Meta類的widgets屬性來為字段指定自定義小widgets 。

class CommentForm(forms.ModelForm):  
    class Meta:
        model = Comment
        widgets = {
            'body': forms.Textarea(attrs={'cols': 80, 'rows': 20})
        }

Answer 6

大多數時候，我只是希望所有占位符都等於我的模型中定義的字段的詳細名稱

我添加了一個 mixin 來輕松地對我創建的任何表單執行此操作，

class ProductForm(PlaceholderMixin, ModelForm):
    class Meta:
        model = Product
        fields = ('name', 'description', 'location', 'store')

和

class PlaceholderMixin:
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        field_names = [field_name for field_name, _ in self.fields.items()]
        for field_name in field_names:
            field = self.fields.get(field_name)
            field.widget.attrs.update({'placeholder': field.label})

Answer 7

當您只想覆蓋其占位符時，必須知道如何實例化小部件是不可取的。

    q = forms.CharField(label='search')
    ...
    q.widget.attrs['placeholder'] = "Search"

Answer 8

class FormClass(forms.ModelForm):
    class Meta:
        model = Book
        fields = '__all__'
        widgets = {
            'field_name': forms.TextInput(attrs={'placeholder': 'Type placeholder text here..'}),
        }

Answer 9

看了你的方法，我用這個方法解決了。

class Register(forms.Form):
    username = forms.CharField(label='用戶名', max_length=32)
    email = forms.EmailField(label='郵箱', max_length=64)
    password = forms.CharField(label="密碼", min_length=6, max_length=16)
    captcha = forms.CharField(label="驗證碼", max_length=4)

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    for field_name in self.fields:
        field = self.fields.get(field_name)
        self.fields[field_name].widget.attrs.update({
            "placeholder": field.label,
            'class': "input-control"
        })