Cách thêm trình giữ chỗ vào các hình thức của Django-Registration

Question

Tôi đang sử dụng đăng ký django cho dự án của mình. trong tệp registration_form.html của tôi:

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

Và tôi muốn đặt trình giữ chỗ cho từng trường. Nhưng đây là một loại ứng dụng tích hợp sẵn. vì vậy tôi cần tìm cách chỉnh sửa các trường này từ ứng dụng chính của mình.

Tôi không muốn thay đổi nguồn đăng ký django.

Answer 1

Nếu bạn có thể ghi đè lên các hình thức xây dựng-in, bạn có thể xác định giữ chỗ như sau:

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

Hoặc nếu không bạn có thể sử dụng jQuery để thêm placeholder đến các lĩnh vực bằng cách sử dụng các trường tương ứng của id như đưa ra dưới đây :

<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> 

Bạn có thể sử dụng firebug để tìm số id của trường.

Answer 2

Tôi thực sự sẽ tạo bộ lọc thẻ mẫu để sửa đổi trường.

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

Answer 3

Cách tiếp cận khác, hoạt động cho django.contrib.auth.AuthenticationForm (và tôi cho rằng cũng nên làm việc này) trong khi hiển thị chế độ xem. Bằng cách đó bạn không cần phải nhúng nó trong lớp biểu mẫu của bạn và không cần phải ép buộc 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))