Question

使用django-recaptcha包在我的django-allauth注册表单中使用reCaptcha（并不重要，没有包，我遇到了同样的问题）。

所以我只需在表单输入后放置reCaptcha（{{ form.captcha }}）（但在提交输入之前）：

<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
  {% csrf_token %}
  {{ form.as_p }}
  {{ form.captcha }}
  {{ form.captcha.errors }}
  {% if redirect_field_value %}
  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
  {% endif %}
  <button type="submit">{% trans "Sign Up" %} &raquo;</button>
</form>

form.as_p是表单输入。

但是，这就是它在页面上呈现的方式：

<form class="signup" id="signup_form" method="post" action="/accounts/signup/">
  <input type='hidden' name='csrfmiddlewaretoken' value='nnq5OVApZrOs00ryvyPpVZYVHPKveyZzIQrP7E9PjBdFOHo4kfhEqBzGWg0ug' />
  <p><label for="id_captcha">Captcha:</label> <script src="https://www.google.com/recaptcha/api.js?hl=en"></script>
<div class="g-recaptcha" data-sitekey="l0eIxAcTAAXXAJcZVRqyHxc1UMIEGNQ_23jiZKhI" data-theme="clean" data-id="id_captcha" data-required="True" ></div>
<noscript>
  <div style="width: 302px; height: 352px;">
    <div style="width: 302px; height: 352px; position: relative;">
      <div style="width: 302px; height: 352px; position: absolute;">
        <iframe src="https://www.google.com/recaptcha/api/fallback?k=l0eIxAcTAAXXAJcZVRqyHxc1UMIEGNQ_23jiZKhI"
                frameborder="0" scrolling="no"
                style="width: 302px; height:352px; border-style: none;">
        </iframe>
      </div>
      <div style="width: 250px; height: 80px; position: absolute; border-style: none;
                  bottom: 21px; left: 25px; margin: 0px; padding: 0px; right: 25px;">
        <textarea id="g-recaptcha-response" name="g-recaptcha-response"
                  class="recaptcha_challenge_field"
                  style="width: 250px; height: 80px; border: 1px solid #c1c1c1;
                         margin: 0px; padding: 0px; resize: none;" value="">
        </textarea>
        <input type="hidden" name="recaptcha_response_field" value="manual_challenge" />
      </div>
    </div>
  </div>
</noscript></p>
<p><label for="id_username">Username:</label> <input type="text" name="username" placeholder="Username" autofocus="autofocus" required maxlength="150" id="id_username" minlength="1" /></p>
<p><label for="id_email">E-mail (optional):</label> <input type="email" name="email" placeholder="E-mail address" id="id_email" /></p>
<p><label for="id_password1">Password:</label> <input type="password" name="password1" placeholder="Password" id="id_password1" required /></p>
<p><label for="id_password2">Password (again):</label> <input type="password" name="password2" placeholder="Password (again)" id="id_password2" required /></p>

  <button type="submit">Register</button>
</form>

你可以看到reCaptcha位于表单的顶部。我能把它放到最底层的唯一方法是通过position:absolute和一个荒谬的top: 150px;，但这不是动态和可持续的，所以我想知道是否有更简单的解决方案。

reCaptcha出现在我的表单顶部，即使我把它放在HTML的底部

0 个答案: