Django Как сделать так, чтобы форма соответствовала полю ввода HTML

У меня есть небольшой вопрос.

Вот моя "Страница регистрации": enter image description here

Но когда я добавляю свою форму, например, к логину, я получаю следующее:

enter image description here

Я хочу знать, как я могу сделать так, чтобы поле формы соответствовало полю ввода html? Я не знаю, должен ли я изменить его размер в forms.py или есть способ, чтобы он всегда привязывался к размеру ввода, который находится в html файле.

Это HTML:

{% load static %}

<!DOCTYPE html> 

        {% csrf_token %}

        <html lang="en">
  <head>
    
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IPV QS Tool Registration</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="registration.css" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/style_register.css' %}" />
  </head>
  <body>
    <form method="POST" action="">
      <label>
        <p class="label-txt">ENTER YOUR AMAZON EMAIL</p>
        <input type="email" class="input" required />
        <div class="line-box"></div>
          <div class="line"></div>
        </div>
      </label>
      <label>
        <p class="label-txt">ENTER YOUR AMAZON LOGIN</p>
        {{form.username}}
        <div class="line-box">
          <div class="line"></div>
        </div>
      </label>
      <label>
        <p class="label-txt">CREATE A PASSWORD</p>
        <input
          type="password"
          class="input password"
          pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
          title="Must contain at least one  number and one uppercase and lowercase letter, and at least 8 or more characters"
          required
        />
        <div class="line-box">
          <div class="line"></div>
        </div>
      </label>
      <button type="submit">Submit</button>
    </form>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
    <script src="registration.js"></script>
  </body>
</html>

Forms.py:

class createUserForm(UserCreationForm):
    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']

Похоже, что в вашем поле ввода отсутствует class="input". Пожалуйста, попробуйте следующее,

username = forms.CharField(max_length=100,
                       widget= forms.TextInput
                       (attrs={'class':'input'}))

widget= forms.TextInput(attrs={'class':'input'})

Это приведет к добавлению этого класса к вашему CharField.

Надеюсь, это поможет. Не стесняйтесь подключаться в случае, если проблема все еще сохраняется.

Спасибо.

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