При проверке на W3C django переносит поля ввода в <tr><th>

Вот мой код шаблона для формы регистрации

<form id="user_form" method="post" action="/accounts/register/">
    {% csrf_token %}
    {{ user_form }}
    <br>
    <input type="submit" class="btn btn-default pull-right" value="Register">
    <br>
</form>

Когда я проверяю HTML моего живого сайта или моего локального окружения, я вижу следующий HTML

<form id="user_form" method="post" action="/accounts/register/">
   <input type="hidden" name="csrfmiddlewaretoken" value="blah">
   <label for="id_username">Username:</label><input class="form-control" id="id_username" name="username" type="text">
   <label for="id_email">Email:</label><input class="form-control" id="id_email" name="email" type="email">
   <label for="id_password">Password:</label><input class="form-control" id="id_password" name="password" type="password">
    <br>
    <input type="submit" class="btn btn-default pull-right" value="Register">
    <br>
</form>

Но когда я проверяю на W3C, я получаю ошибки, потому что моя форма

Stray start tag tr. <tr><th><label for="id_username">Username:</label></th><td><inp…

И я вижу, разметка изменилась

<form id="user_form" method="post" action="/accounts/register/">
    <input type='hidden' name='csrfmiddlewaretoken' value='blah' />
    <tr><th><label for="id_username">Username:</label></th><td><input class="form-control" id="id_username" name="username" type="text" /></td></tr>
    <tr><th><label for="id_email">Email:</label></th><td><input class="form-control" id="id_email" name="email" type="email" /></td></tr>
    <tr><th><label for="id_password">Password:</label></th><td><input class="form-control" id="id_password" name="password" type="password" /></td></tr>
    <br>
    <input type="submit" class="btn btn-default pull-right" value="Register">
    <br>
</form>

1 ответ

Решение

Вам просто нужно использовать:

{{ user_form.as_p }}

Это будет визуализировать метки формы и поля внутри <p> теги. Документы предоставляют вам несколько вариантов вывода, или вы можете вручную визуализировать форму, просматривая поля следующим образом:

    <!-- first output any hidden fields first -->
    <div style="display: none;">
        <!-- I've wrapped this in a div for W3C validation -->
        {{ user_form.hidden_fields }}
    </div>

{% for field in user_form.visible_fields %}
    <div class="some-class">
        {{ field.label_tag }}
        {{ field }}
    </div><!--/.some-class-->
{% endfor %}

Я бы рекомендовал попробовать описанное выше, просто чтобы поэкспериментировать с ручным рендерингом.

Другие вопросы по тегам