Метод POST не получает никакой информации от формы (DJANGO & BOOTSTRAP)

У меня есть форма, которая регистрирует нового пользователя, я использовал Bootstrap 5, чтобы она выглядела красиво. Однако, когда я нажимаю кнопку отправки, форма не проверяется. Ошибка, которую она выдает, когда я пишу print(form.errors), говорит, что каждое поле обязательно для заполнения, что означает, что она ничего не получила. Почему это происходит? Вот мой код:

HTML

<div class="card" id='signup_card'>
<div class='card-header'>
    <h2 class='card-title'>Sign Up</h2>
</div>
<div class='card-body'>
    <form method='POST' action="" id='create_user_form' style="color: #fff;">
        {% csrf_token %}
        <label for='usernameInput' class="form-label">{{form.username.label}}:</label>
        <input type="text" id='usernameInput' style="margin-bottom: 20px;">

        <label for='phoneNumberInput' class="form-label">{{form.phone_number.label}}:</label>
        <input type="text" id='phoneNumberInput' style="margin-bottom: 20px;">

        <label for='emailInput' class="form-label">{{form.email.label}}:</label>
        <input type="text" id='emailInput' style="margin-bottom: 20px;">

        <label for='password1Input' class="form-label">{{form.password1.label}}:</label>
        <input type="text" id='password1Input' style="margin-bottom: 20px;">

        <label for='password2Input' class="form-label">{{form.password2.label}}:</label>
        <input type="text" id='password2Input' style="margin-bottom: 20px;">
        
        <button class="btn btn-primary" type='submit'>Submit</button>
    </form>
</div>

models.py

class Account(User):
    phone_number = BigIntegerField()

forms.py

class CreateAccountForm(UserCreationForm):
    class Meta:
        model = Account
        fields = ['username', 'email', 'phone_number', 'password1', 'password2']

views.py

def signup(request):
    if request.method == 'GET':
        form = CreateAccountForm()
        ctx = {
            'form':form
        }
        return render(request, 'signup.html', ctx)

    if request.method == 'POST':
        form = CreateAccountForm(request.POST)
        if form.is_valid():
            form.save()
        else:
            print(form.errors)

        return render(request, 'index.html')

Ваша ошибка нормальна, потому что вам нужно добавить атрибут name к полю ввода :

<label for='usernameInput' class="form-label">{{form.username.label}}:</label>
<input type="text" id='usernameInput' name='username' style="margin-bottom: 20px;">

Вы также можете использовать полную форму Django, как это :

<label for='usernameInput' class="form-label">{{form.username.label}}:</label>
{{ form.username }}

Теперь, если вы хотите добавить какое-нибудь имя класса boostrap, чтобы иметь красивый вид, вы можете переопределить метод класса Form __init__ следующим образом :

class CreateAccountForm(UserCreationForm):
    class Meta:
        model = Account
        fields = ['username', 'email', 'phone_number', 'password1', 'password2']
    
    # Here we override the form elements attributes to add boostrap class
    def __init__(self, *args, **kwargs):
        super(RegistrationForm, self).__init__(*args, **kwargs)
        # Add some placeholder to username input field
        self.fields['username'].widget.attrs['placeholder'] = 'Your username'
        # add an id to username input field
        self.fields['username'].widget.attrs['id'] = 'usernameInput'

        # add the same class to all the fields (commom attribute value for all)
        for field in self.fields:
            self.fields[field].widget.attrs['class'] = 'form-control'

Подробнее о форме модели Django здесь

Ваши элементы ввода должны указать атрибут name="…", чтобы определить, с каким именем они будут ассоциировать значение:

<form method='POST' action="" id='create_user_form' style="color: #fff;">
    <label for='usernameInput' class="form-label">{{form.username.label}}:</label>
    <input type="text"name="username" id='usernameInput' style="margin-bottom: 20px;">

    <label for='phoneNumberInput' class="form-label">{{form.phone_number.label}}:</label>
    <input type="text" name="phone_number" id='phoneNumberInput' style="margin-bottom: 20px;">

    <label for='emailInput' class="form-label">{{form.email.label}}:</label>
    <input type="text" name="email" id='emailInput' style="margin-bottom: 20px;">

    <label for='password1Input' class="form-label">{{form.password1.label}}:</label>
    <input type="text" name="password1" id='password1Input' style="margin-bottom: 20px;">

    <label for='password2Input' class="form-label">{{form.password2.label}}:</label>
    <input type="text" name="password2" id='password2Input' style="margin-bottom: 20px;">
    <button class="btn btn-primary" type='submit'>Submit</button>
</form>
Вернуться на верх