Pregunta Django ¿Cuál es la mejor forma de formatear los formularios?


Acabo de entrar en Django y leer un montón de libros, ahora estoy construyendo mi primera aplicación. Cuando renderizo mis formularios en mi plantilla im usando ...

{{ form.as_ul }}

Y ahora estoy tratando de aplicar algo de CSS a mi formulario. Está resultando difícil conseguir que se vea bien. Me preguntaba si hay una mejor manera de renderizar y estilizar las formas.


5
2017-09-11 13:15


origen


Respuestas:


Bueno, hay un par de opciones que puedes aprovechar como:

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

Depende de usted decidir lo que le gustaría. En cuanto a la personalización con CSS, observe cómo estructuraron el formulario aquí (tomado de documentos django)

<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>

La forma original se veía así:

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)

Entonces, como puede ver, puede acceder al elemento de formulario, mediante

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

Puedes agregar tu propio CSS al labels o divs. Depende totalmente de ti decidir lo que quieres hacer. En una nota al margen, si quieres formularios formateados con Bootstrap 3, entonces te sugiero que uses django-crispyforms extensión para django.


7
2017-09-11 13:27



Bueno, esto no responde directamente a la pregunta, pero si estás usando Bootstrap tienes un par de opciones:

y más de djangopackages.com


1
2017-09-11 13:55



Hay una herramienta muy fácil de instalar y excelente para Django que uso para el diseño y puede usarse para cualquier framework de frontend como Bootstrap, Materialise, Foundation, etc. Se llama documentación de widgets-ajustes: Widget Tweaks

  1. Puedes usarlo con las vistas genéricas de Django
  2. O con tus propios formularios:

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

En lugar de usar el valor predeterminado:

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

Puede aplicarle el estilo utilizando el atributo render_field, que le brinda una forma más html de estilo, como en este ejemplo:

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>

Lo que hace que sea más fácil mantener el frontend en el frontend y el backend en el backend en lugar de tener que hacerlo como:

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

que en mi opinión es muy limitado y más fácil de confundir


0
2018-04-13 20:32