javascript - 在CSS中将CSS样式应用于表单项

Question

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

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

当我仅使用模板标签{{ form.as_p }}获得表单时，如何将css效果应用于登录表单？

Answer 1

这很容易以基于类的形式进行。我的项目中的表单控制为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中的哪个小部件，然后可以定义所需的任何属性。在这里，我们使用“类”并将其参数设置为“表单控制”。您可以轻松替换所需的多个CSS类，即

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

我经常将其与bootstrap一起使用，并且效果很好，只要您沿该行的某个位置导入bootstrap(从django-bootstrap插件或仅通过基本模板中的静态文件导入)