How to create a custom edit profile page

I want to make my custom edit profile page. I am almost done but I don’t know to show the user details in that form.
edit_profile.html

{% extends "index.html" %}
{% block content %}
{% load static %}

<div class="wrapper fadeInDown">
  <div id="formContent">

    <h2 class="active"> Edit Profile </h2>
    <!-- Icon -->
    <div class="fadeIn first">
      <img src="{% static 'login.png' %}" id="icon" alt="User Icon" />
    </div>

    <!-- Login Form -->
    <form method="post">
      {% csrf_token %}
      <input type="text" id="username" class="fadeIn second" name="username" placeholder="Username">
      <input type="text" id="id_email" class="fadeIn second" name="id_email" placeholder="Email ID">
      <input type="text" id="D_Auth" class="fadeIn second" name="D_Auth" placeholder="Authentication Key">
      <input type="text" id="D_ChID" class="fadeIn third" name="D_ChID" placeholder="Channel ID">
      <select type="text" name="U_Type" id="U_Type" class="fadeIn third">
        <option type="text" value="Normal">Normal Player</option>
        <option type="text" value="Patron">Patron Player</option>
      </select>
      <select type="text" name="N_Loss" id="N_Loss" class="fadeIn third">
        <option type="text" value="Noloss">No Loss</option>
        <option type="text" value="Normal">Normal</option>
      </select>
      <input type="submit" class="fadeIn fourth" value="Log In">
    </form>

    <div id="formFooter">
      <a class="underlineHover" href="{% url 'forgetpass' %}">Forgot Password?</a>
    </div>

  </div>

  <div class="message">
    {% if messages %}
      {% for message in messages %}
        <script>
          $(document).ready(function() {
            
            toastr.options.closeButton = true;
            toastr.options.progressBar = true;
            toastr.options.positionClass = "toast-bottom-right";
            toastr.options.showDuration = "300";
            toastr.options.hideDuration = "1000";
            toastr.options.timeOut = "5000";
            toastr.options.extendedTimeOut = "1000";
            toastr.options.showEasing = "swing";
            toastr.options.hideEasing = "linear";
            toastr.options.showMethod = "fadeIn";
            toastr.options.hideMethod = "fadeOut";

            toastr.success("{{message}}");

          });
        </script>
      {% endfor %}
    {% endif %}
  </div>

</div>

{% endblock content %}

ScreenShot of edit profile page


views.py

def EditProfile(request):

    if request.method == 'POST':

        usern = request.user.username        
        email = request.POST.get('id_email')
        auth = request.POST.get('D_Auth')
        chid = request.POST.get('D_ChID')
        utyp = request.POST.get('U_Type')
        loss = request.POST.get('N_Loss')

        if loss == 'on':
            flos = True
        else:
            flos = False

        if usern is None:
            messages.info(request, 'You must enter Username')
            return redirect('edit_profile')

        elif email is None:
            messages.info(request, 'You must enter Email')
            return redirect('edit_profile')

        elif User.objects.filter(username=usern).exists():
            messages.info(request, 'Username is already taken')
            return redirect('edit_profile')

        elif User.objects.filter(email=email).exists():
            messages.info(request, 'Email is already Taken')
            return redirect('edit_profile')

        elif auth is None:
            messages.info(request, 'Authentication Key Must be Entered')
            return redirect('edit_profile')

        elif chid is None:
            messages.info(request, 'Channel ID Must be Entered')
            return redirect('edit_profile')

        elif UserAuthentication.objects.filter(D_Auth=auth).exists():
            messages.info(request, 'Authentication key in Use')
            return redirect('edit_profile')

        else:
            user = User.objects.get(username=user)
            userauth_obj = UserAuthentication.objects.update(
                U_User = user,
                defaults = {
                    "D_Auth": auth,
                    "D_ChID": chid,
                    "U_Type": utyp,
                    "N_Loss": flos,
                }
            )
            user_obj = User.objects.update(
                defaults = {
                "username": username,
                "email": email
                }
            )

    return render(request, 'registration/edit_profile.html')

Now my thing is I want to show the user details in the respective column in an editable way

You should review the Working with forms page in the docs to see how to properly create an html form and the associated view in Django.

@KenWhitesell thanks for your suggestion bro. But, I already know those kinds of stuff bro. For me, it is kinda hard to work with it, in the front end so I came with that above thing. Can you help me with my problem?

Yes, that’s what I’m actually trying to do here. I see the fundamental issue as being your attempt to work around Django rather than trying to work with it. There are a lot of things with Django that become a whole lot simpler and easier when used as designed and intended.

@KenWhitesell I can understand what you are trying to say. But, as a learner, I want to experiment with all things so, I don’t want to use Django forms. So, please help me with my problem and if you have any doubts about my question ask me I will try to explain it more clearly

As a learner, then you should be focused on using what is available to you.

The solution to your problem is to properly use a Model Form. It really does address your issue.

I got the perfect answer

I’m just curious here - if you’re not going to use Django, why are you using Django?