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

Question

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

В настоящее время он отлично подойдет, но не очень удачно выровнен. Это то, что у меня есть. Это то, что я хотел бы.

Благодаря

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

Answer 1

Публикация моего решения в надежде, что это поможет кому-то еще в будущем. Я знал, что вы создадите поля с помощью 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 2

Посмотрите Customizing the form template. Это одно из возможных решений.

Возможно, вы можете просто использовать CSS для стилизации своей формы и render the form, как вам нравится. (т. е. as_table()).

Answer 3

Использование по умолчанию {% 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 4

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

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

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

Answer 5

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

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

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

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

input, textarea{ 
    width:350px; 
} 

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

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

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