I'm trying to figure out how to render my form elements individually, since I think it's the best way for my file as I have several parent CSS classes. I want to replace pretty much every label and input you see with my forms.py form models with keeping the CSS Styling.

Here is my HTML code:

   <form method="post" action="." enctype="multipart/form-data">
        {% csrf_token %}
        <div id="Profile" >
            <div >
                <div >
                    <div >
                        <div >
                            <input type="file" id="imageUpload" accept=".png, .jpg, .jpeg">
                            <label for="imageUpload"></label>
                        </div>
                        <div >
                            <div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);">
                            </div>
                        </div>
                    </div>
                    <div >
                        <h2>{{user}}</h2>
                        <p>Created: 10.3.2022</p>
                    </div>
                    <hr>
                    <div >
                        <div >
                            <ul >
                                <li id="member"><i ></i><p>Member</p></li>
                                <li id="admin"><i ></i><p>Admin</p></li>
                            </ul>
                        </div>  
                        <div >
                            <p>
                                Lorem Ipsum Biography, Lorem Ipsum dolor sit amum amoret dolor sit
                                mum amoret dolor sitmum amoret dolor sit
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div >
                <div >
                    <h2>User Informations</h2>
                    <div >
                        <label for="username">Username</label>
                        <br>
                        <input type="text" id="username" placeholder="Username">
                    </div>
                    <div >
                        <label for="mail">E-Mail</label>
                        <br>
                        <input type="text" id="mail" placeholder="[email protected]">
                    </div>
                    <div >
                        <label for="password">Password</label>
                        <br>
                        <input type="password" id="password" placeholder="*********">
                    </div>
                </div>
                <div >
                    <label for="bio">Your description</label>
                    <br>
                    <textarea id="bio" rows="11" cols="50">Hey This is my bio.</textarea>
                </div>
            </div>
            <div >
                <button type="submit" value="Update">Save Changes</button>
            </div>
        </div>
    </form>

Here is my forms.py file:

class UpdateForm(forms.ModelForm):
    username = forms.CharField(
        label=_("Username"),
        widget=forms.TextInput(attrs={'class': 'info-1', 'placeholder': '{{user}}'}),
        error_messages = {'required': 'Username is required'},
    )
    
    email = forms.EmailField(
        label=_("E-Mail"),
        widget=forms.EmailInput(
        attrs={'class': 'info-2', 'placeholder': '[email protected]'})
    )

    password = forms.CharField(
        label=_("Password"),
        strip=False,
        widget=forms.PasswordInput(
            attrs={'autocomplete': 'new-password', 'class': 'info-3', 'placeholder': '******'}),
        help_text=password_validation.password_validators_help_text_html(),
    )
    
    avatar = ResizedImageField(
        size=[30, 30], 
        quality=100, 
        upload_to="authors", 
        default=None, 
        null=True, 
        blank=True,

    )
    
    bio = forms.CharField(
        label=_("Your description"),
        widget=forms.Textarea(
            attrs={'class': 'user-edit user-bio'}
        )
    )
    
    class Meta:
        model = Author
        fields = ("username","email","bio","roles","avatar")

My views.py file:

def userSettings(request):
    context = {}
    user = request.user
    form = UpdateForm(request.POST, request.FILES)
    if request.method == 'POST':
        if form.is_valid():
            userSettings = form.save(commit=False)
            userSettings.user = user
            userSettings.save()
            return redirect(request, '#')
        
    context.update({
        "form":form,
        "title":"Update"
    })
    
    return render(request, 'users/webContent/userSettings.html')

CodePudding user response：

From Django-doc, you can implement rendering of individual fields, their labels, and the errors as well in the following way:

Try this:

<div >
    <div >
        <h2>User Informations</h2>
        <div >
            {{form.username.label_tag}}
            <br>
            {{form.username}}
            {% for error in form.username.errors  %}
                <span style='color:red;'>{{error}}</span>
            {% endfor %}
        </div>
        <div >
             {{form.email.label_tag}}
            <br>
            {{form.email}}
            {% for error in form.email.errors  %}
                <span style='color:red;'>{{error}}</span>
            {% endfor %}
        </div>
        <div >
            {{form.password.label_tag}}
            <br>
            {{form.password}}
            {% for error in form.password.errors  %}
            <span style='color:red;'>{{error}}</span>
            {% endfor %}
        </div>
    </div>
    <div >
        {{form.bio.label_tag}}
        <br>
        {{form.bio}}
        {% for error in form.bio.errors  %}
        <span style='color:red;'>{{error}}</span>
        {% endfor %}
    </div>
</div>

Note: Function based views are generally written in snake_case not camelCase, so it can be write as user_settings instead of userSettings.