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 等前端框架结合使用,同时减少了模板中的重复代码。

相关推荐
hhzz2 分钟前
Pythoner 的Flask项目实践-在web页面实现矢量数据转换工具集功能(附源码)
前端·python·flask
青衿先生22 分钟前
返璞归真-SQL基本语法
数据库·sql
学习的学习者27 分钟前
CS课程项目设计19:基于DeepFace人脸识别库的课堂签到系统
人工智能·python·深度学习·人脸识别算法
悠哉悠哉愿意1 小时前
【数据结构与算法学习笔记】双指针
数据结构·笔记·python·学习·算法
MoRanzhi12031 小时前
5. Pandas 缺失值与异常值处理
数据结构·python·数据挖掘·数据分析·pandas·缺失值处理·异常值处理
weixin_456904271 小时前
数据库设计与UML图
数据库·uml
codecrafter1231 小时前
MATLAB中的while循环:从入门到精通的完整指南
java·数据库·其他·matlab
程序员的奶茶馆2 小时前
Python 字典速查:键值对操作与高频函数
python·面试
tryCbest2 小时前
Python 使用 Redis 详细教程
redis·python·bootstrap
程序新视界2 小时前
三种常见的MySQL数据库设计最佳实践
数据库·后端·mysql