Блог

Главная - Вопросы по программированию - Django, Как сделать форму подходящей для поля ввода HTML

Django, Как сделать форму подходящей для поля ввода HTML

#python #html #django

Вопрос:

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

Вот моя «Страница регистрации»: [![Страница регистрации][1]][1]

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

[![Страница с логином][2]][2]

Я хочу знать, как я могу сделать так, чтобы поле формы соответствовало этому полю ввода 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']

Ответ №1:

Похоже, вам не хватает class=»ввод» в вашем поле ввода. Пожалуйста, попробуйте это,

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

виджет= формы.TextInput(attrs={‘класс’:’ввод’})

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

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

Спасибо.

Комментарии:

1. Чувак, могу я угостить тебя выпивкой? Это был такой ясный и прямой ответ! Большое спасибо!

2. Ха-ха..не могу сказать » нет » на это 🙂 Рад быть вам полезным

Метки: ,