Still working on the online market place tutorial from Code with Stein. To my untrained eyes I have created signup.html and forms.py as shown in the tut. When I restart the server I do not see the placeholder text. Below pls find the files. First is forms.py
from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
class SignupForm(UserCreationForm):
class Meta:
model = User
fields = ('username', 'email', 'password1', 'password2')
username = forms.CharField(widget=forms.TextInput(attrs={
'placeholder': 'Your username',
'class': 'w-full py-4 px-6 rounded-xl'
}))
email = forms.CharField(widget=forms.EmailInput(attrs={
'placeholder': 'Your email address',
'class': 'w-full py-4 px-6 rounded-xl'
}))
password1 = forms.CharField(widget=forms.PasswordInput(attrs={
'placeholder': 'Your password',
'class': 'w-full py-4 px-6 rounded-xl'
}))
password2 = forms.CharField(widget=forms.PasswordInput(attrs={
'placeholder': 'Repeat your password',
'class': 'w-full py-4 px-6 rounded-xl'
}))
Next is signup.html:
{% extends "core/base.html" %}
{% block title %}Sign up{% endblock title %}
{% block content %}
<div class="w-1/2 my-6 mx-auto p-6 bg-gray-100 rounded-xl">
<h1 class="mb-6 text-3xl">Sign up</h1>
<form method="post" action=".">
{% csrf_token %}
<div class="mb-3">
<label class="inline-block" mb-2 for="username">Username</label> <br>
{{ form.username }}
</div>
<div class="mb-3">
<label class="inline-block" mb-2 for="email">Email</label> <br>
{{ form.email }}
</div>
<div class="mb-3">
<label class="inline-block" mb-2 for="password1">Password</label> <br>
{{ form.password1 }}
</div>
<div class="mb-3">
<label class="inline-block" mb-2 for="password2">Repeat Password</label> <br>
{{ form.password2 }}
</div>
{% if form.errors or form.non_field_errors %}
<div class="mb-3 p-6 bg-red-100 rounded-xl">
{% for field in form %}
{{ field.errors }}
{% endfor %}
{{ form.non_field_errors }}
</div>
{% endif %}
<button class="py-4 px-8 text-lg bg-teal-500 hover:bg-teal-700 rounded-xl text-white">Submit</button>
</form>
</div>
{% endblock content %}
class SignupForm(UserCreationForm):
class Meta:
widgets = {
# {fieldname}: {widget}(attrs={'placeholder})
'email': forms.EmailInput(attrs={
'placeholder': 'Your email address',
'class': 'w-full py-4 px-6 rounded-xl'
})
}
Hi @white-seolpyo thanks for your reply. I would like you to understand two pieces of information. First I am a novice, a beginner and a kindergarten learner when it comes to coding, Python and Django. Second I am 73 years old and I am a slow learner. Could you please explain a bit more. Thanks
class SignupForm(UserCreationForm):
class Meta:
model = User
fields = ('username', 'email', 'password1', 'password2')
username = forms.CharField(widget=forms.TextInput(attrs={
'placeholder': 'Your username',
'class': 'w-full py-4 px-6 rounded-xl'
}))
email = forms.CharField(widget=forms.EmailInput(attrs={
'placeholder': 'Your email address',
'class': 'w-full py-4 px-6 rounded-xl'
}))
password1 = forms.CharField(widget=forms.PasswordInput(attrs={
'placeholder': 'Your password',
'class': 'w-full py-4 px-6 rounded-xl'
}))
password2 = forms.CharField(widget=forms.PasswordInput(attrs={
'placeholder': 'Repeat your password',
'class': 'w-full py-4 px-6 rounded-xl'
}))
Thank you very much @white-seolpyo. I followed your code(which looks very much like mine), and the placeholder text is yet to display on the form. I tried opening the code in Google Chrome, Microsoft Edge, Brave browser and Firefox; the placeholder text does not appear. what else can I do, or what should I not do so that the placeholder text appears and I can continue with learning Django?
Hello, ZacAmata
Have you tried inspecting the input element with Chrome Dev tools, for example? Is the input field really missing a placeholder?
The form posted above works for me.
Please ensure that the alignment (indentation) of your code matches that which was shown here. (Make sure that your field definitions are not indented under the Meta class.)
If you think you’ve got it right, please post your current form code here for verification.
Also ensure you don’t have a duplicate copy of that form in your project, and that you are restarting your project after making these changes.
@jkandrashina, no I have not. I did not even think of that. Thank you for your suggestion I will do so right now. Once again thanks for your patience and your help
@KenWhitesell thank you for letting me know that the form works. That means I can go back to my own form here and go over the code to check for indentation issues.
Wow!!! It works. I can now see the placeholder text displayed in my form. Thank you so much to all you guys. Thank you. At 73 years old I may not get a developer job in some big tech company But just like people my age and people younger than me derive joy from watching Manchester City, Arsenal, Real Madrid football clubs in Europe, and Chicago Bulls, Los Angeles Lakers, Boston Celtics and Golden State Warriors basket ball teams in the USA and Dravid’s Soldiers, Kapil’s Devils, Ganguly’s Brigade, Dhoni’s Cool Guys and Kohli’s Fighters cricket teams in India; I derive my joy and happiness seeing my code coming to life in my browser. Thank you to all of you. Thank you Ken Whitesell.