在Django中單獨渲染表單元素

我試圖弄清楚如何單獨呈現我的表單元素，因為我認為這是我的檔案的最佳方式，因為我有幾個父 CSS 類。我想用我的表單模型替換幾乎所有你看到的東西，label并保持 CSS 樣式。inputforms.py

這是我的 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="[email protected]">
                    </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': '[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")

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

uj5u.com熱心網友回復：

從 開始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:基于函式的視圖一般用snake_casenot寫camelCase，所以可以寫 asuser_settings而不是userSettings。

標籤：Python django django-views django-forms django-模板

上一篇：在Django中創建動態模型欄位？

下一篇：Django管理模型欄位驗證