当前位置: 首页 > news >正文

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

优化:

class UserModelForm(forms.ModelForm):class Meta:model = models.UserInfofields = ["name","password","age", "account", "create_time", "gender", "depart"]def __init__(self, *args, **kwargs):super().__init__(*args, **kwargs)# 循环ModelForm中的所有字段,给每个字段的插件设置for name, field in self.fields.items():# 字段中有属性,保留原来的属性,没有属性,才增加。if field.widget.attrs:field.widget.attrs["class"] = "form-control"field.widget.attrs["placeholder"] = field.labelelse:field.widget.attrs = {"class": "form-control", "placeholder": field.label}

如果有多个modelform类都要写def __init__中的内容,我们可以用继承

class BootStrapModelForm(forms.ModelForm):def __init__(self, *args, **kwargs):super().__init__(*args, **kwargs)# 循环ModelForm中的所有字段,给每个字段的插件设置for name, field in self.fields.items():# 字段中有属性,保留原来的属性,没有属性,才增加。if field.widget.attrs:field.widget.attrs["class"] = "form-control"field.widget.attrs["placeholder"] = field.labelelse:field.widget.attrs = {"class": "form-control", "placeholder": field.label}class UserEditModelForm(BootStrapModelForm):class Meta:model = models.UserInfofields = ["name","password","age", "account", "create_time", "gender", "depart"]

学习:B站(银角大王-武沛齐-真身)


http://www.mrgr.cn/news/91540.html

相关文章:

  • java听书项目
  • SolidWorks速成教程P3-7【零件 | 第七节】——3D设计打印手机支架+草图文本草图图片材质与质量属性测量
  • uni-app发起网络请求的三种方式
  • electron下载文件,弹窗选择下载路径,并通知下载进度
  • c# -01新属性-模式匹配、弃元、析构元组和其他类型
  • Linux驱动学习(二)--字符设备
  • docker修改镜像默认存储路径(基于 WSL2 的迁移方法)
  • Ubuntu20.04安装IsaacSim4.5与IsaacLab2.0
  • 2015年下半年试题二:论软件系统架构风格
  • wps中的js开发
  • Web后端 Tomcat服务器
  • 15. 三数之和(LeetCode 热题 100)
  • Flutter
  • 【亚马逊开发者账号02】终审问题SA+review_Pre-review+Doc.xlsx
  • 单元测试方法的使用
  • 力扣 跳跃游戏 II
  • 计算机视觉:卷积神经网络(CNN)基本概念(二)
  • 大模型 + cursor应用案例
  • 基于Django快递物流管理可视化分析系统(完整系统源码+数据库+详细开发文档+万字详细论文+答辩PPT+详细部署教程等资料)
  • QT移植,交叉编译至泰山派RK3566开发板,.pro文件解析