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

• 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

3 Answers 3

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'
                }
            )
        }