Django 美化使用ModelForm的输入框

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

代码功能

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

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

    • 为每个字段的 widget.attrs 添加 classplaceholder 属性。

  2. 添加 Bootstrap 样式

    • 为每个字段的 HTML 输入元素添加 class="form-control",使其符合 Bootstrap 的表单样式。
  3. 设置占位符文本

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

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

相关推荐
Jonathan Star8 分钟前
用Python轻松提取视频音频并去除静音片段
开发语言·python·音视频
一只叫煤球的猫25 分钟前
MySQL 索引的 “最左前缀原则”,用查字典的例子讲透
数据库·mysql·性能优化
麦麦大数据35 分钟前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
刘火锅1 小时前
Java 17 环境下 EasyPoi 反射访问异常分析与解决方案(ExcelImportUtil.importExcelMore)
java·开发语言·python
一只小bit2 小时前
MySQL常用内置函数整理:提高你的查询效率
数据库·mysql·数据完整性·表约束
Hi202402173 小时前
Qt+Qml客户端和Python服务端的网络通信原型
开发语言·python·qt·ui·网络通信·qml
chxii3 小时前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
程序员大雄学编程3 小时前
「用Python来学微积分」16. 导数问题举例
开发语言·python·数学·微积分