javascript - How do I add an extra attribute in my input for Django forms? - Stack Overflow

{{ theform.address }}

{{ theform.phone }}

This is what I do in my templates.

However, what if I want to add placeholder="Username" to the input text field? (Custom attribute)

<input type="text" name="address" id="id_address" placeholder="username"/>

{{ theform.address }}

{{ theform.phone }}

This is what I do in my templates.

However, what if I want to add placeholder="Username" to the input text field? (Custom attribute)

<input type="text" name="address" id="id_address" placeholder="username"/>

• javascript
• python
• html
• css
• django

Share Improve this question Follow edited Jan 6, 2011 at 22:19 TIMEX asked Jan 6, 2011 at 22:10 TIMEXTIMEX 273k367367 gold badges802802 silver badges1.1k1.1k bronze badges 3

• 1 "placeholder="Username" to the input text field?" Are you talking about modifying the HTML that's created? If so, can you provide an actual example of what you want the HTML to be? If not, can you clarify your question? – S.Lott Commented Jan 6, 2011 at 22:12
• Yep, modifying the HTML that's created. – TIMEX Commented Jan 6, 2011 at 22:18
• 1 you don't, it's Django, you do what it tells you to do... – jondavidjohn Commented Jan 6, 2011 at 22:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

Add the attrs keyword argument to your field constructor's widget, and include write your attribute in there:

address = forms.TextField(widget=forms.TextInput(attrs={'placeholder': 'username'}))

If you want to see it in action, take a look at django-registration's forms.py.

Alternatively, you can use the http://pypi.python/pypi/django-widget-tweaks app:

{% load widget_tweaks %}
... 
{{ theform.address|attr:"placeholder:username" }}

In the class wherein you specify your forms, you can set the 'widgets' per each form element. The 'widget' contains information on that element's attributes, etc.

Here's an example (applies if you're creating your form through ModelForm):

class BlogEntryForm(ModelForm):
    class Meta:
        model = BlogEntry
        fields = (
            'title',
            'category',
            'text_entry',
            'private'
        )

        widgets = {
            'category': forms.Select(
                attrs={
                    'class': 'form-control'
                },
                choices=[]
            ),
            'title': forms.TextInput(
                attrs={
                    'class': 'form-control',
                }
            ),
            'text_entry': forms.Textarea(
                attrs={
                    'id': 'text-editor',
                    'class': 'form-control',
                    'rows': '17',
                }
            ),
            'private': forms.CheckboxInput(
                attrs = {
                    'id': 'make-post-private',
                    'class': 'custom-control-input'
                }
            )
        }