如何在 Django-Registration 表单中添加占位符答案

【问题标题】：How to add placeholder to forms of Django-Registration如何在 Django-Registration 表单中添加占位符
【发布时间】：2012-11-11 11:26:06
【问题描述】：

我正在为我的项目使用 django-registration。在我的registration_form.html 文件中：

{{form.username}}
{{form.email}}
//other fields

我想为每个字段设置占位符。但这是一种内置应用程序。所以我需要找到从我的主应用程序中编辑这些字段的方法。

我不想更改 django-registration 的来源。

【问题讨论】：

您是为此定义自定义 django 表单还是使用内置表单？
我正在使用内置的forms
您可以使用 jQuery 为字段添加占位符吗？

标签： django django-forms django-registration

【解决方案1】：

另一种适用于 django.contrib.auth.AuthenticationForm 的方法（我认为也应该适用于您的情况）是在渲染视图时注入此信息。这样你就不需要将它嵌入到你的表单类中，也不需要强制使用 jquery。

def index(request):
    form = AuthenticationForm(request)
    form.fields['username'].widget.attrs.update({
            'placeholder': 'Name'
        })
    form.fields['password'].widget.attrs.update({
            'placeholder': 'Password'
        })

    context = RequestContext(request, {
        'form' : form,
    })
    return HttpResponse(template.render(context))

【讨论】：

【解决方案2】：

我实际上会创建一个模板标签过滤器来修改字段。

@register.filter
def html_placeholder(field, args=None):
    if args == None:
        return field
    field.field.widget.attrs.update({ "placeholder": args })
    return field

【讨论】：

【解决方案3】：

如果可以覆盖内置表单，则可以如下定义占位符：

class RegistrationForm(forms.ModelForm):
    class Meta:
        model = YourModelName
        widgets = {
            'username' : forms.TextInput(attrs = {'placeholder': 'Username'}),
            'email'    : forms.TextInput(attrs = {'placeholder': 'E-Mail'}),
        }

或者，您可以使用 jQuery 通过使用相应字段的 id 为字段添加占位符，如下所示：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" >
    $(document).ready(function(){
        $("#id_username").attr('placeholder', '{{form.username.label}}');
        $("#id_email").attr('placeholder', '{{form.email.label}}');
    });
</script>

您可以使用firebug 查找该字段的id。

【讨论】：

您可以编辑答案以添加“如何覆盖内置表单”吗？例如我创建了一个目录“accounts”，我创建了一个名为“forms.py”的模块，但是这个模块应该从 urls.py 中调用，对吧？
@realnot 我不明白你的问题。
@arulmr 我使用了你的建议，我继承了 RegistrationForm 定义了一个自定义表单来添加我的stuff。问题是向该类添加占位符、css 类或任何属性。结果如下：dpaste.com/3RY8ZR1 但不起作用。在widget参数内部定义的占位符和css类不会添加到模板生成的输入元素中。
@realnot 将 class Meta(RegistrationForm.Meta): 更改为 class Meta:。为什么要这样定义 Meta 类？
@arulmr 我在一个新问题中解释了这个问题：stackoverflow.com/q/41088567/2653437