将css样式应用于Django中的表单项

Applying css styles to form items in Django

本文关键字：表单 Django css 样式 应用于      更新时间：2023-09-26

我在forms.py 中有以下表格

from django import forms
class LoginForm(forms.Form):
    username = forms.CharField()
    password = forms.CharField(label='Password', widget=forms.PasswordInput)

在我的templates/login.html文件中，我有以下内容：

{% load staticfiles %}
<div>
     <form action="" method="post" style="">
            {% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="SignIn">
     </form>
</div>

我想使用ui的引导工具[http://getbootstrap.com/examples/signin/]为此，我应该在login.html 中加载一些js和css静态文件

当我只获得带有模板标记{{ form.as_p }}的表单时，如何将css效果应用于我的登录表单？

这在基于类的表单中很容易做到。我的项目中的示例，其中表单控件是一个css类。

from django.forms import ModelForm, TextInput
class ServerForm(ModelForm):
    class Meta:
        model = Server
        fields = ['name', 'ip', 'port']
        widgets = {
            'name': TextInput(attrs={'class': 'form-control'}),
            'ip': TextInput(attrs={'class': "form-control"}),
            'port': TextInput(attrs={'class': 'form-control'}),
            }

然后我的模板看起来像：

{% for field in form %}
    <div class="form-group">
        {{ field.label_tag }} {{ field }}
    </div>
{% endfor %}

哪个生成

<form method="POST">
    <input type="hidden" name="csrfmiddlewaretoken" value="xxxxxx">
    <div class="form-group">
        <label for="id_name">Name:</label>
        <input class="form-control" id="id_name" maxlength="64" name="name" type="text">
    </div>
    <div class="form-group">
        <label for="id_ip">Ip:</label>
        <input class="form-control" id="id_ip" maxlength="20" name="ip" type="text">
    </div>
    <div class="form-group">
        <label for="id_port">Port:</label> <input class="form-control" id="id_port" name="port" type="text">
    </div>
    <div class="form-group">
        <button type="submit" class="save btn btn-default">Add/Edit Server</button>
    </div>
</form>

关键是Meta类的窗口小部件字段。在那里，你可以定义你想使用django.forms中的哪个小部件，然后可以定义你想要的任何属性。这里我们使用"class"并将其参数设置为"form control"。您可以很容易地替换任意多个css类，如

'name': TextInput(attrs={'class': 'form-control xs my-other-css-class'}),

我经常在bootstrap中使用它，它工作得很好，只要你在某个地方导入bootstrap（从django bootstrap插件，或者只是通过基本模板中的静态文件）

有一个很棒的包用于自定义表单小部件的显示，称为django小部件调整。该包允许您自定义css类和属性。

不使用form.as_p，您可以单独访问每个项目，并使用render_field标记添加css类。

{% load widget_tweaks %}
{% for field in form %}
    {% render_field field class+="css_class_1 css_class_2" %}
{% endfor %}

或者使用包装中包含的自定义过滤器以实现紧凑性：

{% load widget_tweaks %}
{% for field in form %}
    {{ field|add_class:"my-css-class" }}
{% endfor %}

或者没有环路：

{% load widget_tweaks %}
{% render_field form.name class+="css_class_1 css_class_2" %}
{% render_field form.email class+="css_class_1 other_class" %}
{% render_field form.title class+="css_class_1 css_class_3" %}
相关文章：