Setting an example answer in a text input field

Question

I'm trying to set a default value in a text input field which gives the user an example of what to enter. This should be greyed-out and should disappear as soon as they start typing. I've tried setting an initial value but this isn't automatically replaced when the user starts to type and is formatted the same as the user-entered answer.

form = VerbTestForm(initial={'answer': tip.tip})

What do I need to pass to my form to get the behaviour I'm looking for?

score 1 · Answer 1 · answered May 04 '15 at 08:49

1

Set the widget's placeholder attribute:

form = VerbTestForm()
form.fields['answer'].widget.attrs['placeholder'] = tip.tip

answered May 04 '15 at 08:49

catavaran

44,703
8
98
85

score 1 · Accepted Answer · answered May 04 '15 at 08:49

You are setting an initial value but you're looking for a placeholder.

You should try something like this:

class VerbTestForm(forms.ModelForm):
    # Your code ...
    class Meta:
        # Your code ...

        widgets = {
            'answer': forms.TextInput(attrs={'placeholder': tip.tip}),
        }

or you can add the placeholder after defining the form like:

form = VerbTestForm()
form.fields['answer'].widget.attrs['placeholder'] = tip.tip

The official documentation is quite well explained, you should check:

Django Form Widgets

I was missing the name "placeholder" – Jamie Bull May 04 '15 at 08:57 — Jamie Bull, May 04 '15 at 08:57

score 1 · Answer 3 · answered May 04 '15 at 08:50

A widget placeholder is your answer:

 class VerbTestForm(forms.Form):
     answer = forms.CharField(widget=forms.TextInput(attrs={'placeholder': tip.tip}))

you can quickly test the generated HTML by calling the as_p or as_table methods

>>> f = VerbTestForm(auto_id=False)
>>> f.as_table()

Setting an example answer in a text input field

3 Answers3