Django Каков наилучший способ форматирования форм?

Question

Я только что попал в Django и прочитал кучу книг, теперь я создаю свое первое приложение. Когда я делаю свои формы в своем шаблоне im using ...

{{ form.as_ul }} 

И теперь я пытаюсь применить некоторый CSS к моей форме. Трудно заставить его выглядеть красиво. Мне было интересно, есть ли лучший способ визуализации и стилизации?

Answer 1

Ну, есть несколько вариантов, которые вы можете воспользоваться как:

1. form.as_p
2. form.as_ul
3. form.as_table

Его от вас, чтобы решить, что вы бы как. Что касается настройки его с помощью CSS, посмотрите на то, как они структурированы форма здесь (taken from django docs):

<form action="/contact/" method="post"> 
    {{ form.non_field_errors }} 
    <div class="fieldWrapper"> 
     {{ form.subject.errors }} 
     <label for="id_subject">Email subject:</label> 
     {{ form.subject }} 
    </div> 
    <div class="fieldWrapper"> 
     {{ form.message.errors }} 
     <label for="id_message">Your message:</label> 
     {{ form.message }} 
    </div> 
    <div class="fieldWrapper"> 
     {{ form.sender.errors }} 
     <label for="id_sender">Your email address:</label> 
     {{ form.sender }} 
    </div> 
    <div class="fieldWrapper"> 
     {{ form.cc_myself.errors }} 
     <label for="id_cc_myself">CC yourself?</label> 
     {{ form.cc_myself }} 
    </div> 
    <p><input type="submit" value="Send message" /></p> 
</form> 

Оригинальная форма выглядит следующим образом:

from django import forms 

class ContactForm(forms.Form): 
    subject = forms.CharField(max_length=100) 
    message = forms.CharField() 
    sender = forms.EmailField() 
    cc_myself = forms.BooleanField(required=False) 

Итак, как вы можете видеть, вас может просто получить доступ к элементу формы, по

{{ form.<element_name>.<element_properties> }}

Вы можете добавить свой собственный CSS в label с или div с. Его полностью зависит от вас, чтобы решить, что вы хотите сделать. На стороне примечания, если вы хотите формы, отформатированные с помощью Bootstrap 3, я могу предложить вам использовать django-crispyforms extension for django.

Answer 2

Ну, это не отвечает на вопрос прямо, но если вы используете Bootstrap у вас есть несколько вариантов:

• django-bootstrap3
• django-bootstrap-toolkit
• django-crispy-forms

и more from djangopackages.com

Answer 3

Существует av простой в установке и отличный инструмент для Django, который я использую для стилизации, и его можно использовать для всех интерфейсных фреймов, таких как Bootstrap, Materialize, Foundation и т. д.Это называется виджет-твики Документацией: Widget Tweaks

1. Вы можете использовать его с родовым видом Джанго

2. Или с вашими собственными формами:

   from django.forms import Form 
   
   class MyForm(Form): 
   
       field1 = forms.CharField(max_length=512) 
       field2 = forms.CharField(max_length=256) 
   

Вместо использования по умолчанию:

{{ form.as_p }} or {{ form.as_ul }} 

Вы можете настроить его, используя re nder_field атрибут, который дает вам больше HTML-подобный способ укладки его как в этом примере:

template.html

{% load widget_tweaks %} 

<div class="container"> 
    <div class="col-md-6"> 
     {% render_field form.field1 class+="form-control myCSSclass" placeholder="Placeholder for field1" %} 
    </div> 
    <div class="col-md-6"> 
     {% render_field form.field2 class+="myCSSclassX myCSSclass2" placeholder=form.field2.label %} 
    </div> 
</div> 

Что делает легче сохранить внешний интерфейс в веб-интерфейсе и бэкэндом в бэкэндом вместо того, чтобы сделать это как:

class MyForm(forms.Form): 
    field1 = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myCSSclass'})) 
    field2 = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myCSSclassX myCSSclass2'})) 

, который по моему мнению, очень ограничен, и проще запутаться