CODEWITHSUNDEEP
pythonhtmldjangoformsplaceholder
Jaron787
Jaron787

Reputation: 560

django add placeholder text to form field

In Django I have the below code which is creating a username and password form on an HTML Page:

<div class="control-group">
    {{ form.username }}
</div>
<div class="control-group">
    {{ form.password }}
</div>

I want to add "Username" and "Password" placeholder text within the field, and then when the user clicks on the field the word dissapears. What is the best way to achieve this ?

Upvotes: 6

Views: 18613

Answers (4)

aziminia
aziminia

Reputation: 449

You must use the placeholder properties

class LoginForm(forms.Form):
    username = forms.CharField(label='username')
    password = forms.CharField(label='password')


    def __init__(self, *args, **kwargs):
        super(LoginForm, self).__init__(*args, **kwargs)
        self.fields['username'].widget.attrs['placeholder'] = 'username'
        self.fields['password'].widget.attrs['placeholder'] = 'password'

or

class LoginForm(forms.Form):
    username = forms.CharField(label='username',widget=forms.TextInput(attrs={'placeholder':'username'}))
    password = forms.CharField(label='password',widget=forms.PasswordInput(attrs={'placeholder':'password'}))

Upvotes: 14

martinarroyo
martinarroyo

Reputation: 9701

I wanted to use the help_text property of a model as the placeholder. This is the simplest way I could figure it out, based on aziminia's answer:

class MyForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for _, value in self.fields.items():
            value.widget.attrs['placeholder'] = value.help_text

    class Meta:
        model = models.MyModel
        fields = (...)

Upvotes: 9

codewithrashid
codewithrashid

Reputation: 353

In case if you want to have field name as a placeholder, you can use code below:

class LoginForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(LoginForm, self).__init__(*args, **kwargs)
        for k,v in self.fields.items():
            v.widget.attrs['placeholder'] = k.capitalize()

Otherwise please refere to this answer.

Upvotes: 0

Sijan Bhandari
Sijan Bhandari

Reputation: 3061

I hope you do have a forms.py file in your project. While creating your form, you can use following to set placeholder for your fields:

username = forms.CharField(label='username', 
                widget=forms.TextInput(attrs={'placeholder': 'username'}))

If you have ModelForm in your project you can implement as:

 class MyForm(forms.ModelForm):
    class Meta:
        model = User
        widgets = {
            'username': forms.TextInput(attrs={'placeholder': 'username'}),
             ..........
        }

Upvotes: 4

Related Questions