Javascript 在 ModelForm 生成的表单中
Javascript in forms generated by ModelForm
我正在使用 ModelForm
生成表单并使它们看起来不错 我使用 crispyforms
我的问题是如何在表单中包含 javascript 事件处理程序,因为 html 代码是由 django 生成的。
我正在使用 ModelForm
和 crispyforms
是因为我对 css 和 html 的了解还不足以使它们像现在这样具有吸引力?
或者我如何将 crispy forms
与 HTML 生成的表格一起使用,以防我自己编写 HTML 中的所有表格?我是新手。非常感谢任何帮助。
您可以在浏览器检查器中检查 id
表单和字段,并在此 id
上添加事件处理程序
或者您可以按每个字段呈现表单,如下所示:
<form action="">
{{ form.some_field }}
{{ form.other_field }}
<form>
并将 {{ form }}
标签放在 html 标签中,如你所愿,如下所示:
<p class="some-class"> {{ form.some_field }} </p>
脆皮形式可以使用FormHelper
,在forms.py
文件中添加类:
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout
class TestForm(forms.Form):
test_field = forms.CharField()
helper = FormHelper()
helper.layout = Layout(
Field('test_field', css_class="write_class_here")
)
如果您使用 FormHelper
,请注册所有字段,就像示例中那样,然后像这样将其加载到模板中 {% crispy form %}
这是文档 http://django-crispy-forms.readthedocs.org/en/d-0/layouts.html
对于 django,您的 javascript 是静态文件。请参阅 Django HOWTO on static files 以了解其工作原理。
很快,您编写带有附加事件监听器的 js
文件,并在模板中使用 scripts
标记加载它。
我正在使用 ModelForm
生成表单并使它们看起来不错 我使用 crispyforms
我的问题是如何在表单中包含 javascript 事件处理程序,因为 html 代码是由 django 生成的。
我正在使用 ModelForm
和 crispyforms
是因为我对 css 和 html 的了解还不足以使它们像现在这样具有吸引力?
或者我如何将 crispy forms
与 HTML 生成的表格一起使用,以防我自己编写 HTML 中的所有表格?我是新手。非常感谢任何帮助。
您可以在浏览器检查器中检查 id
表单和字段,并在此 id
上添加事件处理程序
或者您可以按每个字段呈现表单,如下所示:
<form action="">
{{ form.some_field }}
{{ form.other_field }}
<form>
并将 {{ form }}
标签放在 html 标签中,如你所愿,如下所示:
<p class="some-class"> {{ form.some_field }} </p>
脆皮形式可以使用FormHelper
,在forms.py
文件中添加类:
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout
class TestForm(forms.Form):
test_field = forms.CharField()
helper = FormHelper()
helper.layout = Layout(
Field('test_field', css_class="write_class_here")
)
如果您使用 FormHelper
,请注册所有字段,就像示例中那样,然后像这样将其加载到模板中 {% crispy form %}
这是文档 http://django-crispy-forms.readthedocs.org/en/d-0/layouts.html
对于 django,您的 javascript 是静态文件。请参阅 Django HOWTO on static files 以了解其工作原理。
很快,您编写带有附加事件监听器的 js
文件,并在模板中使用 scripts
标记加载它。