Django 美化使用ModelForm的输入框

news/2025/2/21 7:37:34/

在初次使用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的使用更加的美观好看

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 添加 class 和 placeholder 属性。

  2. 添加 Bootstrap 样式

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

  3. 设置占位符文本

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

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


http://www.ppmy.cn/news/1573380.html

相关文章

数据结构之BST、AVL、红黑树、哈夫曼树与B族树

数据结构之BST、AVL、红黑树、哈夫曼树与B族树 数据结构之BST、AVL、红黑树、哈夫曼树与B族树一、二叉搜索树&#xff08;Binary Search Tree, BST&#xff09;1. 什么是二叉搜索树&#xff1f;重要性质 2. 二叉搜索树实现1. 节点结构定义2. 核心操作接口3. 插入算法实现4. 删除…

二、几何体BufferGeometry顶点笔记

一、几何体顶点位置数据和点模型 1、缓冲类型几何体BufferGeometry threejs的长方体BoxGeometry、球体SphereGeometry等几何体都是基于BufferGeometry类构建的&#xff0c;BufferGeometry是一个没有任何形状的空几何体&#xff0c;你可以通过BufferGeometry自定义任何几何形状…

C语言之easyX

目录 概要 easyX整体架构 图形绘制 画布宽高 圆形 图片的贴图 加载图像 游戏框架 概要 easyX是一个轻量级的图形库&#xff0c;用于在Windows平台上进行简单的2D图形绘制。它提供了一组简单易用的函数&#xff0c;可以方便地绘制基本的图形元素&#xff0c;如线条、矩形、圆形…

.Net9.0访问MSSQL数据库读取表中数据行

1.表结构与表中数据 查询记录语句&#xff1a; SELECT TOP (1000) [StatusName],[StatusValue],[StatusString],[StatusTip],[StatusDescription],[SortID]FROM [WHQJAccountsDB].[dbo].[SystemStatusInfo] 查询总记录数语句&#xff1a; select count(SortID) as row_count f…

Ubuntu下mysql主从复制搭建

本文介绍mysql 8.4主从集群的搭建&#xff0c;从单个机器安装到集群的配置&#xff0c;整体走了一遍&#xff0c;希望对大家有帮助。mysql 8.4和之前的版本命令上有些变化&#xff0c;大家用来参考。 0、环境 ubuntu&#xff1a; 22.04mysql&#xff1a;8.4 1、安装mysql 1…

2025年AI免费大战:从DeepSeek到GPT-5的商业逻辑与行业变革

引言&#xff1a;人工智能行业的2025年重大转折 2025年伊始&#xff0c;人工智能行业的竞争格局发生了深刻变化&#xff0c;尤其是以DeepSeek为代表的新兴力量&#xff0c;通过低成本开源策略迅速崛起&#xff0c;迫使OpenAI、百度文心一言等人工智能巨头纷纷调整策略&#xf…

AWS Lambda自动化部署流程指南

本文详细介绍从代码开发到AWS Lambda部署的完整自动化流程。 一、流程概览 © ivwdcwso (ID: u012172506) 1.1 流程图 #mermaid-svg-K7NI3p8n1wqwExc1 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-K7NI3p8…

Spring Boot(8)深入理解 @Autowired 注解:使用场景与实战示例

搞个引言 在 Spring 框架的开发中&#xff0c;依赖注入&#xff08;Dependency Injection&#xff0c;简称 DI&#xff09;是它的一个核心特性&#xff0c;它能够让代码更加模块化、可测试&#xff0c;并且易于维护。而 Autowired 注解作为 Spring 实现依赖注入的关键工具&…