How to style a Django editable form in bootstrap - django

Question

I have a form that returns the following fields:
fields = ['username', 'first_name', 'last_name', 'email']
So in my profile/edit view(I mean an HTML page) I have this code:
<div class="col-xl-9">
<div class="widget has-shadow" style="height:100%">
<div class="widget-header bordered no-actions d-flex align-items-center">
<h4>edit profile</h4>
</div>
<div class="widget-body">
<form method="POST">
{% csrf_token %}
<div class="form-group row d-flex align-items-center mb-5">
<label class="col-lg-2 form-control-label d-flex justify-content-lg-end">username</label>
<div class="col-lg-6">
<input type="text" name="username" class="form-control" placeholder="{{update_profile_form.username}}">
</div>
</div>
<div class="em-separator separator-dashed"></div>
<div class="text-right">
<button class="btn btn-gradient-01" type="submit">Save</button>
<button class="btn btn-shadow" type="reset">Cancel</button>
</div>
</form>
</div>
</div>
</div>
And you see I want to show username field from update_profile_form form. But when I reload the page I have an extra "> below of my username field.
I don't know how to get rid of these characters in my page.
Update
my forms.py looks like:
class AccountUpdateForm(forms.ModelForm):
class Meta:
model = Account
fields = ['username', 'first_name', 'last_name', 'email']
def clean_username(self):
if self.is_valid():
username = self.cleaned_data['username']
try:
account = Account.objects.exclude(pk=self.instance.pk).get(username=username)
except Account.DoesNotExist:
return username
raise forms.ValidationError('The username "%s" is now allowed to be used!', username)
and my views.py is:
def edit_profile_view(request):
context = {}
if not request.user.is_authenticated:
return redirect('login')
if request.POST:
upd_form = AccountUpdateForm(request.POST, instance=request.user)
if upd_form.is_valid():
upd_form.save()
else: # Get request
upd_form = AccountUpdateForm(
initial = {
"username": request.user.username,
}
)
context = {'update_profile_form': upd_form}
return render(request, 'account/user/edit-profile.html', context)

Answer 1

you have to replace this line
<input type="text" name="username" class="form-control" placeholder="{{update_profile_form.username}}">
with
<input type="text" name="username" class="form-control" placeholder="{{request.user.username}}">
you do not have to provide initial values to your form in your views.

Answer 2

Because of initials I need to do:
<input type="text" name="username" class="form-control" value="{{update_profile_form.initial.username}}">