personalizados - modelform django

El botón Enviar ya no funciona con formularios django crujientes

Question

Agregué bootstrap a mis páginas e intento que las formas django crujientes funcionen. En realidad, todo lo que hice fue pip install django-crispy-forms , agregué crispy_forms a INSTALLED_APPS y cambié {{ form }} a {% crispy form %} en mi plantilla (después de agregar bootstrap y jquery a mi directorio estático):

{% load crispy_forms_tags %}

{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}

<form action="." method="post">
{% csrf_token %}
{% crispy form %}
<input type="submit" value="Submit" class="btn btn-success">
</form>

Esta forma solía funcionar bien. Después del cambio, se ve mucho mejor, pero el botón de enviar ya no hace nada porque se mueve fuera del formulario :

Me sorprende ver que el cambio de plantilla afecta el diseño del resto del documento. ¿He hecho algo mal o es esto un error?

_{Django 1.8.1, django-crispy-forms 1.4.0}

Answer 1

Para agregar el botón de enviar a su formulario, la documentación de crispy_form lo hizo de esta manera:

import floppyforms.__future__ as forms # you can use django''s own ModelForm here
from crispy_forms.helper import FormHelper
from django.core.urlresolvers import reverse_lazy

class YourForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(YourForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = ''post'' # this line sets your form''s method to post
        self.helper.form_action = reverse_lazy(''your_post_url'') # this line sets the form action
        self.helper.layout = Layout( # the order of the items in this layout is important
            ''field1_of_your_model'',  # field1 will appear first in HTML
            ''field2_of_your_model'',  # field2 will appear second in HTML
            # this is how to add the submit button to your form and since it is the last item in this tuple, it will be rendered last in the HTML
            Submit(''submit'', u''Submit'', css_class=''btn btn-success''), 
    )

    class Meta:
        model = YourModel

Luego, en su plantilla, todo lo que tiene que hacer es esto

{% load crispy_forms_tags %}
{% crispy form %}

Y eso es. No es necesario escribir CUALQUIER html en su plantilla.

Creo que el objetivo de crispy_forms es definir HTML en Python. Para que no tenga que escribir mucho HTML en su plantilla.

Algunas notas adicionales:

Ya que estás usando bootstrap. Hay tres campos más que le serán útiles, dentro de __init__() definidos anteriormente, agréguelos si los necesita:

self.helper.form_class = ''form-horizontal'' # if you want to have a horizontally layout form
self.helper.label_class = ''col-md-3'' # this css class attribute will be added to all of the labels in your form. For instance, the "Username: " label will have ''col-md-3''
self.helper.field_class = ''col-md-9'' # this css class attribute will be added to all of the input fields in your form. For isntance, the input text box for "Username" will have ''col-md-9''

Answer 2

Como usted mismo está incluyendo las etiquetas de formulario, el token csrf y el botón de envío en la plantilla, debe usar el filtro crujiente en lugar de la etiqueta crujiente.

<form action="." method="post">
    {% csrf_token %}
    {{ form|crispy }}
    <input type="submit" value="Submit" class="btn btn-success">
</form>

Si desea usar la etiqueta, puede definir su botón de envío dentro de FormHelper . Consulte los documentos de etiqueta crujientes para obtener más información.