Рендеринг элементов формы по отдельности в Django

Я новичок в django и пытаюсь понять, как выводить элементы формы по отдельности, поскольку я думаю, что это лучший способ для моего файла, так как у меня есть несколько родительских CSS классов. Я хочу заменить практически все label и input, которые вы видите, на мои forms.py модели формы с сохранением CSS Styling.

Вот мой HTML код:

Вот мой файл 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")

Из 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_case, а не в camelCase, поэтому его можно записать как user_settings вместо userSettings.

Вернуться на верх