使用清晰的样式 Django 表单 - Python

简介

Django 是一个流行的开源 Web 框架，用于构建高质量的 Web 应用程序。其中表单是 Django 中的一个核心组件，帮助我们轻松地处理用户输入的数据。但默认样式并不一定符合我们的需求，因此本文将介绍如何使用清晰的样式 Django 表单。

示例

我们先来看一个简单的 Django 表单示例：

from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(max_length=30)
    email = forms.EmailField(max_length=254)
    message = forms.CharField(widget=forms.Textarea)

这是一个简单的联系表单，包括姓名、电子邮件和消息。然而，如果直接使用默认的样式渲染，表单会显得很混乱。因此我们需要修改它的 CSS 样式。

添加 CSS 样式

我们可以通过 Django 自带的 widget_tweaks 库来修改表单的样式，这个库提供了一些有用的过滤器，包括添加类、添加属性等等。在 Django 3.1 中，这个库已经成为官方的一部分，因此无需安装。

首先，我们需要在模板中加载 widget_tweaks：

{% load widget_tweaks %}

接着，我们就可以使用过滤器 add_class 来添加类，进而修改表单样式了。

例如，我们可以将上述联系表单的模板渲染为：

{% extends 'base.html' %}

{% block content %}
  <form method="post">
    {% csrf_token %}
    {{ form.name|add_class:"form-control" }}
    {{ form.email|add_class:"form-control" }}
    {{ form.message|add_class:"form-control" }}
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
{% endblock %}

这里我们给每个表单字段添加了一个名为 form-control 的 Bootstrap 类，使表单看起来更加清晰。

定制化样式

如果我们需要更加定制化的样式，可以通过自定义 CSS 来达到目的。例如，我们可以创建一个名为 forms.css 的静态文件，用于存放表单的样式：

/* 添加 form-control 类 */
.form-control {
  border-radius: 0;
  background-color: #f8f9fa;
  border: none;
  box-shadow: none;
}

/* 定制化按钮 */
.btn {
  background-color: #007bff;
  color: #fff;
  border-radius: 0;
  padding: .375rem .75rem;
}

/* 鼠标悬停和聚焦样式 */
.btn:hover, .btn:focus {
  background-color: #0062cc;
  border-color: #005cbf;
  box-shadow: none;
}

然后我们可以在模板中引入这个 CSS 形式：

{% extends 'base.html' %}

{% block css %}
  <link rel="stylesheet" href="{% static 'css/forms.css' %}">
{% endblock %}

{% block content %}
  <form method="post">
    {% csrf_token %}
    {{ form.name|add_class:"form-control" }}
    {{ form.email|add_class:"form-control" }}
    {{ form.message|add_class:"form-control" }}
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
{% endblock %}

这里我们使用 {% block %} 模板语法来添加一个静态文件引入块。注意，我们应该将 forms.css 放在 static/css 目录下，并在 settings.py 中添加 STATICFILES_DIRS 设置。

总结

本文介绍了如何使用清晰的样式 Django 表单。我们使用了 widget_tweaks 库来添加类、添加属性等等，以修改表单样式；同时也展示了如何使用自定义 CSS 文件来实现更加定制化的样式。希望可以帮助你轻松地构建出漂亮的 Django 表单。