Django 美化使用ModelForm的输入框

多想和从前一样2025-02-16 10:17

在初次使用ModelForm时，我的html文件代码如下，主要内容是显示一个卡片式表单，通过循环遍历 form 对象动态生成表单字段

html 复制代码

{% extends 'layout.html' %}

{% block content %}
<div class="container">
    <div class="c1">
        <a class="btn btn-success" href="/user/add">新建用户</a>
    </div>

    <div class="c1">
        <a class="btn btn-success" href="/user/model/form/add">新建用户ModelForm</a>
    </div>

    <div class="card c1">
        <div class="card-header">
            新建用户
        </div>
        <div class="card-body">
            <form method="post">
                {% csrf_token %}
                {% for field in form%}
                <div class="form-label">
                    <label>{{ field.label }}</label>
                    {{ field }}
                </div>
                {% endfor %}

                <button type="submit" class="btn btn-primary">提交</button>
            </form>

        </div>

    </div>

</div>
{% endblock %}

实现效果

但看着效果不太美观，通过增加下面的代码，来让ModelForm的使用更加的美观好看

python 复制代码

def __init__(self, *args, **kwargs):
    # 调用父类的初始化方法
    super().__init__(*args, **kwargs)

    # 遍历表单中的所有字段
    for name, field in self.fields.items():
        # 为每个字段的 widget 添加 HTML 属性
        field.widget.attrs = {
            "class": "form-control",  # 添加 Bootstrap 样式
            "placeholder": field.label  # 设置占位符为字段的标签
        }

代码功能

动态设置表单字段的 HTML 属性：
- 遍历表单中的所有字段（self.fields.items()）。
- 为每个字段的 widget.attrs 添加 class 和 placeholder 属性。
添加 Bootstrap 样式：
- 为每个字段的 HTML 输入元素添加 class="form-control"，使其符合 Bootstrap 的表单样式。
设置占位符文本：
- 将字段的 label 作为 placeholder 属性值，显示在输入框中作为提示文本。

这段代码通过重写 init 方法，动态为表单字段添加 HTML 属性和样式，提升了表单的可用性和美观性。它特别适合与 Bootstrap 等前端框架结合使用，同时减少了模板中的重复代码。