在 Django 中单独呈现表单元素

Question

我正在尝试弄清楚如何单独呈现我的表单元素，因为我认为这是我的文件的最佳方式，因为我有多个父项 CSS 类。我想用我的 forms.py 表单模型替换几乎所有 label 和 input，同时保持 CSS 样式。

这是我的 HTML 代码：

   <form method="post" action="." enctype="multipart/form-data">
        {% csrf_token %}
        <div id="Profile" class="tabcontent">
            <div class="profile-show">
                <div class="profile-show-content">
                    <div class="avatar-upload">
                        <div class="avatar-edit">
                            <input type="file" id="imageUpload" accept=".png, .jpg, .jpeg">
                            <label for="imageUpload"></label>
                        </div>
                        <div class="avatar-preview">
                            <div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);">
                            </div>
                        </div>
                    </div>
                    <div class="user-first">
                        <h2>{{user}}</h2>
                        <p>Created: 10.3.2022</p>
                    </div>
                    <hr>
                    <div class="user-second">
                        <div class="user-roles">
                            <ul class="list-wrapper">
                                <li id="member"><i class="fa-solid fa-user"></i><p>Member</p></li>
                                <li id="admin"><i class="fa-solid fa-shield-halved"></i><p>Admin</p></li>
                            </ul>
                        </div>  
                        <div class="user-second-bio">
                            <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 class="user-edit">
                <div class="user-info">
                    <h2>User Informations</h2>
                    <div class="info-1">
                        <label for="username">Username</label>
                        <br>
                        <input type="text" id="username" placeholder="Username">
                    </div>
                    <div class="info-2">
                        <label for="mail">E-Mail</label>
                        <br>
                        <input type="text" id="mail" placeholder="user@gmail.com">
                    </div>
                    <div class="info-3">
                        <label for="password">Password</label>
                        <br>
                        <input type="password" id="password" placeholder="*********">
                    </div>
                </div>
                <div class="user-bio">
                    <label for="bio">Your description</label>
                    <br>
                    <textarea id="bio" rows="11" cols="50">Hey This is my bio.</textarea>
                </div>
            </div>
            <div class="avatar-select">
                <button type="submit" value="Update">Save Changes</button>
            </div>
        </div>
    </form>

这是我的 forms.py 文件：

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': 'user@gmail.com'})
    )

    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")

我的 views.py 文件：

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')

Answer 1

从 Django-doc 开始，您可以通过以下方式实现单个字段、它们的标签和错误的呈现：

试试这个：


<div class="user-edit">
    <div class="user-info">
        <h2>User Informations</h2>
        <div class="info-1">
            {{form.username.label_tag}}
            <br>
            {{form.username}}
            {% for error in form.username.errors  %}
                <span style='color:red;'>{{error}}</span>
            {% endfor %}
        </div>
        <div class="info-2">
             {{form.email.label_tag}}
            <br>
            {{form.email}}
            {% for error in form.email.errors  %}
                <span style='color:red;'>{{error}}</span>
            {% endfor %}
        </div>
        <div class="info-3">
            {{form.password.label_tag}}
            <br>
            {{form.password}}
            {% for error in form.password.errors  %}
            <span style='color:red;'>{{error}}</span>
            {% endfor %}
        </div>
    </div>
    <div class="user-bio">
        {{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~~.

在 Django 中单独呈现表单元素

Render Form Elements Individually in Django

python

django

django-views

django-forms

django-templates