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

Question

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

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

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

我不想改变django-registration的源代码。

- alioguzhan

---

你是定义自定义的Django表单还是使用内置的表单？ - arulmr

我正在使用内置的表单。 - alioguzhan

你觉得使用jQuery为字段添加占位符可以吗？ - arulmr

Answer 1

如果您可以覆盖内置表单，您可以按如下方式定义占位符：

如果您可以覆盖内置表单，您可以按如下方式定义占位符：

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。

- arulmr

---

你能否编辑答案并添加“如何覆盖内置表单”？例如，我创建了一个名为“accounts”的目录，我创建了一个名为“forms.py”的模块，但这个模块应该从urls.py中调用，对吧？ - realnot

@realnot，我不明白你的问题。 - arulmr

@arulmr 我使用了你的建议并继承了RegistrationForm，定义了一个自定义表单来添加我的“东西”。问题是将占位符、CSS类或任何属性添加到该类中。这是结果：http://dpaste.com/3RY8ZR1 但是不起作用。在widget参数中定义的占位符和CSS类未添加到模板生成的输入元素中。 - realnot

将class Meta(RegistrationForm.Meta):更改为class Meta:。为什么要这样定义Meta类？ - arulmr

@arulmr，我在一个新的问题中解释了这个问题：http://stackoverflow.com/q/41088567/2653437 - realnot

Answer 2

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

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

- airtonix

Answer 3

另一种方法是，在渲染视图时注入此信息，这适用于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))

- mirth23