django将占位符文本添加到表单字段中

时间:2017-05-23 11:29:31

标签: python html django forms placeholder

在Django中我有以下代码,它在HTML页面上创建用户名和密码表单:

<div class="control-group">
    {{ form.username }}
</div>
<div class="control-group">
    {{ form.password }}
</div>

我想添加&#34;用户名&#34;和#34;密码&#34;字段内的占位符文本,然后当用户单击该字段时,单词消失。实现这一目标的最佳方法是什么?

4 个答案:

答案 0 :(得分:7)

您必须使用placeholder属性

class LoginForm(forms.Form):
    username = forms.CharField(label='username')
    password = forms.CharField(label='password')


    def __init__(self, *args, **kwargs):
        super(LoginForm, self).__init__(*args, **kwargs)
        self.fields['username'].widget.attrs['placeholder'] = 'username'
        self.fields['password '].widget.attrs['placeholder'] = 'password'

class LoginForm(forms.Form):
    username = forms.CharField(label='username',widget=forms.TextInput(attrs={'placeholder':'username'}))
    password = forms.CharField(label='password',widget=forms.PasswordInput(attrs={'placeholder':'password'}))

答案 1 :(得分:5)

如果它可能对某人有帮助,我想使用模型的help_text属性作为占位符。根据aziminia的回答,这是我能想出来的最简单的方法:

class MyForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for _, value in self.fields.items():
            value.widget.attrs['placeholder'] = value.help_text

    class Meta:
        model = models.MyModel
        fields = (...)

答案 2 :(得分:2)

我希望你的项目中有一个forms.py文件。在创建表单时,您可以使用以下命令为字段设置占位符:

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

如果项目中有ModelForm,则可以实现:

 class MyForm(forms.ModelForm):
    class Meta:
        model = User
        widgets = {
            'username': forms.TextInput(attrs={'placeholder': 'username'}),
             ..........
        }

答案 3 :(得分:0)

如果要使用 字段名称 作为占位符,可以使用以下代码:

class LoginForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(LoginForm, self).__init__(*args, **kwargs)
        for k,v in self.fields.items():
            v.widget.attrs['placeholder'] = k.capitalize()

否则,请参阅this answer