Как отформатировать поля формы для комментариев django?

Question

Я использую форму, сгенерированную для меня django.Я использую это как форму комментария после поста в моем блоге.

В настоящее время он отображается хорошо, но не выровнен.Это то, что у меня есть. Это то, что я хотел бы.

Спасибо

edit: Это результат, когда я использую {{form.as_table}}

Answer 1

Я знаю, что уже немного поздно, но для всех остальных вы можете попробовать это

<table>
{{ form.as_table }}
</table>

Устраняет надоедливую проблему форматирования и выглядит прилично.

Answer 2

Размещение моего решения в надежде, что оно поможет кому-то еще в один день. Я знал, что вы бы стилизовали поля с помощью css, но не знал, как назначить классы каждому элементу. Но если вы посмотрите на шаблон по умолчанию при условии, что вы заметите, что класс ошибок назначается полю с помощью оператора if в цикле foreach, который автоматически генерирует каждое поле в вашей форме. есть

{% for field in form %}    
< p{% if field.errors %} 
    class="error"
{% endif %}
    {{ field.label_tag }}<'/' p> 
{% endfor %}

Итак, я добавил эту функцию.

< p{% if field.errors %} 
    class="error"
{% endif %}
{% ifequal field.name "honeypot" %} 
    id="hide"
{% else %}
     id="left"
{% endifequal %}>
    {{ field.label_tag }}<'/' p> 

мой css был

#hide{
    display:none;

}

#left{
    width: 200px;
    text-align: left;

}

#right{
    width: 300px;
    text-align: left;

}

Теперь, когда вы можете установить свои классы, вы можете легко настроить ваши классы или идентификатор в вашем файле CSS. Это для комментариев. Если вы используете {{form.as_p}} или {{form.as_table}} для генерации вашей формы, тогда вы просто устанавливаете общий класс формы в вашем css для его стилизации. т

form {
width: 350px;
padding: 20px;
border: 1px solid #270644;
}

Answer 3

Посмотрите на Настройка шаблона формы .Это одно из возможных решений.

Может быть, вы можете просто использовать CSS для стилизации вашей формы и визуализировать форму , как вам нравится.(т.е. as_table () ).

Answer 4

При использовании значения по умолчанию {% render_comment_form for app.model %} будет генерироваться:

<p>
      <label for="id_name">Name</label> 
      <input id="id_name" type="text" name="name" maxlength="50">
    </p>
    <p>
      <label for="id_email">Email address</label> 
      <input type="text" name="email" id="id_email">

</p>
... etc

Поэтому вы можете настроить таргетинг label в таблице стилей CSS, используя:

label {
  width: 15%;
}

Answer 5

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

Тем не менее, лучший и простой способ - использовать CSS:

Отобразите страницу, содержащую поля формы, и проведите некоторую проверку (например, щелкните правой кнопкой мыши> inspect или F12 в Chrome), чтобы узнать, какие HTML-теги генерирует ваша форма при визуализации. Тогда вы можете легко написать свой CSS.

В вашей форме есть поля input и textarea, поэтому ваш CSS будет:

input, textarea{
    width:350px;
}

Не забудьте позвонить для вашего CSS-файла вверху вашего HTML-шаблона:

<link rel="stylesheet" type="text/css" href="{% static 'styles/form.css' %}">

Вот снимок того, что у меня есть для моей собственной формы: