脆皮表格创建具有其他表格ID的字段

Question

我想在我的密码字段中添加一些 JS，所以我需要它的 ID。我收到错误： 如果我使用 inspect 查看 HTML，这是有道理的。有 2 个相同的密码字段，但在我的表单中，我只将 ID 添加到其中一个。 形式：

class CustomUserSignUpForm(UserCreationForm):
    email = forms.CharField(widget=forms.EmailInput(attrs={'placeholder': 'Enter email'}))
    password1 = forms.CharField(label='Password', widget=forms.PasswordInput(attrs={'placeholder': 'Enter password', 'id': 'password-input'}))
     
    
class CustomUserLogInForm(forms.Form):
    email = forms.CharField(widget=forms.EmailInput(attrs={'placeholder': 'Enter email'}))
    password1 = forms.CharField(label='Password', widget=forms.PasswordInput(attrs={'placeholder': 'Enter password'}))

HTML：

<!-- LOG IN FORM -->
  <div class="form-group log-in-form" id="log-in-form">
    <button type="button" class="btn-close" id="close-log-in" aria-label="Close"></button>
    <form method="POST" action="">
      {% csrf_token %}
      <h1>Log in</h1>
      {{ form.email|as_crispy_field }}
      {{ form.password1|as_crispy_field }}
      <input type="checkbox" name="remember">Remember me<br>
      <button type="submit" class="btn log-in-btn" id="log-in-btn">Log in</button>
      <p>Forgot password? <a href="#">Reset</a></p>
    </form>
    <a href="{% url 'sign_up' %}" class="btn sign-up-btn">Sign up</a>
  </div>

  {% block content %}

  {% endblock %}

Other HTML (different view, but I am inheriting template):

{% block content %}

<div class="form-group sign-up-form container-fluid">
  <form method="POST" action="">
    {% csrf_token %}
    <h1>Sign up</h1>
    {{ form.email|as_crispy_field }}  
    {{ form.password1|as_crispy_field }}
    <input type="checkbox" id="show-password">Show Password<br>
    {{ form.nick|as_crispy_field }}
    <p id="sign-up-requirements">Password too short</p>
    <button type="submit" class="btn log-in-btn">Sign up</button>
    * required field
  </form>
</div>

{% endblock %}

现在我通过使用解决了这个问题

getElementsByClassName('...')[1]

但这是愚蠢的解决方案，我不喜欢它。

Answer 1

在实例化表单时，您应该能够使用前缀选项。

https://docs.djangoproject.com/en/dev/ref/forms/api/#prefixes-for-forms

sign_up_form = CustomUserSignUpForm(prefix='signup')

每个字段将在“id”之后获得前缀。因此将生成“id_signup-email”或类似的。