Django 美化使用ModelForm的输入框

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

{% 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的使用更加的美观好看

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  # 设置占位符为字段的标签}

代码功能

1. 动态设置表单字段的 HTML 属性：

   • 遍历表单中的所有字段（self.fields.items()）。

   • 为每个字段的 widget.attrs 添加 class 和 placeholder 属性。

2. 添加 Bootstrap 样式：

   • 为每个字段的 HTML 输入元素添加 class="form-control"，使其符合 Bootstrap 的表单样式。

3. 设置占位符文本：

   • 将字段的 label 作为 placeholder 属性值，显示在输入框中作为提示文本。

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