Есть ли способ, которым я могу добавить класс или идентификатор в форму, созданную с помощью UserCreationForm в CreateView

Question

несмотря на часы борьбы, я не могу загрузить форму django, созданную с помощью UserCreationForm.я хочу добавить классы начальной загрузки к тегу, но из-за моего плохого знания представлений, основанных на классах django, я не могу обойти это решение.

urls.py

urlpatterns = [
    path('signup/', views.SignUp.as_view(), name='signup'),
    path('', include('django.contrib.auth.urls')),
]

views.py

class SignUp(CreateView):
    form_class = CustomUserCreationForm
    success_url = reverse_lazy('accounts:login')
    template_name = 'accounts/signup.html'

forms.py

class CustomUserCreationForm(UserCreationForm):
    class Meta:
        fields = ('first_name', 'last_name', 'email', 'age', 'height', 'avatar', 'password1', 'password2')
        model = get_user_model()

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['password2'].label = "Confirm Password"

Текущий вывод введите описание изображения здесь

Вывод Я хочу введите описание изображения здесь

Answer 1

Итак, я отправляю ответ на свой вопрос, чтобы кто-то, ищущий ту же самую вещь, нашел решение в одном месте. Что именно я искал, так это

forms.py

class CustomUserCreationForm(UserCreationForm):
    class Meta:
        fields = ('first_name', 'last_name', 'email', 'age', 'height', 'avatar', 'password1', 'password2')
        model = get_user_model()
    first_name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'First Name',
                                                                'class': 'form-control',
                                                                }))
    last_name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Last Name',
                                                                'class': 'form-control',
                                                                }))
    email = forms.CharField(widget=forms.EmailInput(attrs={'placeholder': 'Email',
                                                                'class': 'form-control mb-4',
                                                                }))
    age = forms.IntegerField(widget=forms.NumberInput(attrs={'placeholder': 'Age',
                                                                'class': 'form-control',
                                                                }))
    height = forms.IntegerField(widget=forms.NumberInput(attrs={'placeholder': 'Height(cm)',
                                                                'class': 'form-control',
                                                                }))
    avatar = forms.ImageField(widget=forms.FileInput(attrs={'placeholder': 'Avatar',
                                                                'class': 'form-control  mb-4',
                                                                }))
    password1 = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Password',
                                                                'class': 'form-control mb-4',
                                                                }))
    password2 = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Confirm Password',
                                                                'class': 'form-control mb-4',
                                                                }))

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['password2'].label = "Confirm Password"

views.py

class SignUp(CreateView):
    form_class = CustomUserCreationForm
    success_url = reverse_lazy('accounts:login')
    template_name = 'accounts/register.html'

Счета / register.html

{% extends 'base.html' %}

{% block title %}
    SignUp
{% endblock title %}

{% block content %}
    <div style="margin: 75px 0px 0px 0px; background: rgb(87,77,255);
background: linear-gradient(276deg, rgba(87,77,255,0.8830882694874825) 24%, rgba(7,96,255,0.5385504543614321) 77%);" class="bg_cover">
        <form class="text-center col-md-5" method="POST" enctype="multipart/form-data">
            <p class="h4 mb-4">SignUp</p>
            {% csrf_token %}
            <div class="form-row mb-4">
                <div class="col">
                    {{ form.first_name }}
                </div>
                <div class="col">
                    {{ form.last_name }}
                </div>
            </div>
            {{ form.email }}
            <div class="form-row mb-4">
                <div class="col">
                    {{ form.age }}
                </div>
                <div class="col">
                    {{ form.height }}
                </div>
            </div>
            {{ form.avatar }}
            {{ form.password1 }}
            {{ form.password2 }}
            <button class="btn-block btn btn-primary my-4" type="submit">Sign up</button>
        </form>
    </div>
{% endblock content %}

Результаты

Вы можете создать подкласс UserCreationFrom, как я сделал в классе CustomUserCreationForm, тогда все, что вам нужно сделать, это добавить нужные атрибуты (имена классов начальной загрузки, идентификаторы и т. Д.) В поля формы, которые вы хотите изменить (украсить). Говоря об "account / register.html", написанном в представлении SignUp, я явно говорю django, где найти шаблон. В шаблоне вы можете визуализировать всю форму с помощью {{ form.as_p }} или визуализировать отдельные поля, как я делал в шаблоне!

Надеюсь, мой ответ избавит вас от головной боли, через которую я прошел, чтобы найти это!

Answer 2

Пожалуйста, посмотрите на это https://simpleisbetterthancomplex.com/tutorial/2018/08/13/how-to-use-bootstrap-4-forms-with-django.html

или https://django -bootstrap3.readthedocs.io / ен / последний / templatetags.html

А также при рендеринге поля в шаблоне, например {% bootstrap_field form.myfield form_group_class = 'custom-class-name'%}

Вы можете добавить собственный класс следующим образом. и он будет отображаться как класс в вашем HTML при проверке, чтобы вы могли использовать его для своего CSS