开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用cripsy修改django表单中的.form-group属性

使用crispy修改Django表单中的.form-group属性是通过使用crispy-forms这个第三方库来实现的。crispy-forms是一个强大的Django表单渲染器，可以帮助我们更轻松地渲染和定制表单。

首先，确保已经安装了crispy-forms库，可以通过在命令行中运行以下命令来安装它：

pip install django-crispy-forms

安装完成后，在Django的settings.py文件中添加以下配置：

CRISPY_TEMPLATE_PACK = 'bootstrap4'

接下来，在你的Django表单中，导入crispy-forms库，并在表单的定义类中添加crispy-forms的装饰器@crispy_forms.layout。然后，可以使用Div和Field这两个crispy-forms提供的组件来定义表单的布局和样式。

例如，将表单的所有字段都添加到一个带有.form-group属性的div中，可以这样做：

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Div, Field
from crispy_forms.bootstrap import FormActions

from django import forms

class MyForm(forms.Form):
    field1 = forms.CharField(label="Field 1")
    field2 = forms.CharField(label="Field 2")
    # 添加其他字段...

    @crispy_forms.layout
    def crispy_layout(self):
        helper = FormHelper()
        helper.form_method = 'post'
        helper.layout = crispy_forms.layout.Layout(
            Div(
                Field('field1', css_class="form-group"),
                Field('field2', css_class="form-group"),
                css_class="form-group",
            ),
            FormActions(
                crispy_forms.layout.Submit('submit', 'Submit'),
            )
        )
        return helper

在上述示例中，我们使用了Div和Field来包装每个字段，将它们放置在一个带有.form-group属性的div中。同时，我们还可以在Div中添加其他的CSS类名或样式。

最后，在模板中，使用{{ form|crispy }}来渲染表单，以及{{ form.media }}来加载所需的静态文件。

关于crispy-forms的更多信息和用法示例，你可以查阅腾讯云的相关产品和介绍链接：

腾讯云相关产品：Django
产品介绍链接地址：https://cloud.tencent.com/product/django

请注意，上述答案只涵盖了使用crispy-forms来修改Django表单中的.form-group属性的内容。还有其他方法和工具可以实现类似的效果，如自定义表单模板、使用CSS框架等。这只是其中一种解决方案。

相关搜索:更改视图的Django表单属性如何从Django表单中删除必需的属性模板中的Django check表单字段属性修改表单Django中的下拉菜单选项表单对象在django中没有'email‘属性如果我使用action属性，Django表单不会保存使用cookiecutter的django模板中的2个表单-django 作为HTML模板中的属性的Django表单名称表单中的django表单集/表单中的动态数组 ReactJs中的Django表单 django表单中的DateField 使用HTML模板的Django表单在clean()期间修改Django表单字段的值使用python在Django中搜索表单具有id属性的只读Django ModelAdmin表单域 Django admin:如何在ModelAdmin中迭代表单属性具有不同属性的Django表单链接到相同的Django模型？修改了django中的urlpattern 如何使用ModelForm过滤Django表单中的值？Django表单-使用数据库中的变量

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

利用Django通用类视图(class

最近在学习Django，官方文档介绍地十分详细。但是“大而全”就难免会有些不够速成，和我们这个浮躁的互联网时代格格不入，所以我就整理了这个文档。就像coolshell说的，一泡屎的时间就可以看完。

02

Django用户登录与注册系统

一、创建项目 1.1.创建项目和app django-admin startproject mysite_login python manage.py startapp login 1.2.设置时区和语言 Django默认使用美国时间和英语，在项目的settings文件中，如下所示： LANGUAGE_CODE = 'en-us' TIME_ZONE = 'UTC' USE_I18N = True USE_L10N = True USE_TZ = True 我们把它改为亚洲/上海时间和中文 LAN

07

Django用户登录与注册系统[通俗易懂]

运行测试一下工程，在本机的浏览器中访问http://127.0.0.1:8000/

02

CRM客户关系管理系统（七）第七章、动态modelform功能实现

第七章、动态modelform功能实现 7.1.动态modelform的实现（1）给第一列添加一个a标签 kingadmintag.py （2）kingadmin/urls.py urlpatt

00

Django之Ajax文件上传

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以默认格式application/x-www-form-urlencoded 方式提交数据，ajax默认也是这个。请求类似于下面这样（无关的请求头在本文中都省略掉了）：

01

解决django中form表单设置action后无法回到原页面的问题

django中form表单设置action后，点提交按钮是跳转到action页面的，比如设置action为login，网址为192.168.1.128，跳转后便会来到192.168.1.128/login，F5刷新也会是重新提交表单对话框，无法回到原页面。

01

12.Django基础十之Form和ModelForm组件

我们之前在HTML页面中利用form表单向后端提交数据时，都会写一些获取用户输入的标签并且用form标签把它们包起来。

02

Django实战-用户注册和登陆系统

每当我们开始一个新项目的时候，通常都会搭建一个全新、独立、隔离的项目环境，这样做的好处自然不必多说。有很多种建立项目虚拟环境的工具，使用比较普遍的是Python中的virtualenv。安装好virtualenv工具后，进入想要放置的项目文件夹，建立一个虚拟环境，激活环境，安装django。

04

Django教程第4章 | Web开发实战-三种验证码实现

验证码的存在是为了防止系统被暴力破解攻击，几乎每个系统都有验证码。下面将介绍三种生成验证码方式。

01

angularjs 表单验证

一、常用的表单验证指令 1. 必填项验证某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： <input type="text" required /> 2. 最小长度验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"： <input type="text" ng-minlength="5" /> 3. 最大长度验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength=

07

django重定向

return HttpResponseRedirect('/index/')# 重定向返回url格式：http://127.0.0.1:8000/index/会去掉前期的所有路由重新写入/index/'路由 urls代码 from django.urls import path from django.contrib import admin from ProductOutWarehouse import views urlpatterns = [ path('admin/', admin.s

01

从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（三）

这篇文章中，我们将讲解 Vue 实例的 Props 和 Methods，接着我们又讲解了最常见的 Vue 模板语法，并通过实例的方式将这些模板语法都实践了一番，最后我们讲解了 Vue 组件的组合，并完成了我们的发表商品页面。

05

Angular 从入坑到挖坑 - 表单控件概览

angular 入坑记录的笔记第三篇，介绍 angular 中表单控件的相关概念，了解如何在 angular 中创建一个表单，以及如何针对表单控件进行数据校验。

02

django2实战5.创建表单及发送邮件测试邮件发送创建表单页面业务逻辑搭建新建分享页面模板详情页添加分享入口结果展示

本篇要实现这样的功能：在文章详情页增加分享文章的入口，点击后跳到分享页面，提交要发送的email地址，程序将发送邮件到相应邮箱，邮件内容是文章的链接地址。

02

Django+Bootstrap+Mysql 搭建个人博客（六）

6.1.comments插件（1）安装 pip install django-contrib-comments （02）settings INSTALLED_APPS = [ '

02

从零到部署：用 Vue 和 Express 实现迷你全栈电商应用（三）

这篇文章中，我们将讲解 Vue 实例的 Props 和 Methods，接着我们又讲解了最常见的 Vue 模板语法，并通过实例的方式将这些模板语法都实践了一番，最后我们讲解了 Vue 组件的组合，并完成了我们的发表商品页面。

01

14. Django 2.1.7 模型 - MVT模型增删功能

上一篇Django 2.1.7 模型类 - 字段类型讲述了关于模型字段类的内容，丰富了不少模型中的字段类型。

02

Django之图片上传与展示

02

Python Django个人网站搭建6-对文章进行增加，删除及删除确认弹窗

作者： zifanwang 发布于2020-05-10

02

Django（二）

ps：配置静态文件完成后，那么在static文件下的文件都可以通过路径来访问到，eg:127.0.0.1:8000/static/a.txt

02

ASP.NET Core Razor Pages 初探

最近新建 Asp.net Core MVC 项目的时候不小心选错了个模板，发现了一种新的项目模板。它使用cshtml视图模板，但是没有Controller文件夹。后来才发现这是ASP.NET Core框架新推出的Razor Pages技术。

02

Angular 2 表单（下）

接下来我们使用 ngModel 进行双向数据绑定，通过监听 DOM 事件，来实现更新组件的属性。

01

Django 2.1.7 模型 - MVT模型增删功能

上一篇Django 2.1.7 模型类 - 字段类型讲述了关于模型字段类的内容，丰富了不少模型中的字段类型。

03

【原创】bootstrap框架的学习第八课 -[bootstrap表单]

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 内联表单</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body>

02

Django教程第2章| Web开发实战-用户管理

模板文件和静态文件分别放入templates和static文件夹，django会自动加载到容器。

01

python测试开发django -142.Bootstrap 表单(form）

单独的表单控件会被自动赋予一些全局样式。在输入框外面定义一个div标签，class属性设置.form-group <input>、<textarea> 和 <select> 元素设置 .form-control 类，将被默认设置宽度属性为 width: 100%;。将 label 元素绑定 input 输入框

05

ASP.NET MVC使用Bootstrap系列（2）——使用Bootstrap CSS和HTML元素

Bootstrap提供了一套丰富CSS设置、HTML元素以及高级的栅格系统来帮助开发人员快速布局网页。所有的CSS样式和HTML元素与移动设备优先的流式栅格系统结合，能让开发人员快速轻松的构建直观的界面并且不用担心在较小的设备上响应的具体细节。 Bootstrap 栅格（Grid）系统在移动互联网的今天，越来越多的网站被手机设备访问，移动流量在近几年猛增。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格参数 B

08

ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素

在移动互联网的今天，越来越多的网站被手机设备访问，移动流量在近几年猛增。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

04

简易登录页面实现

本文将介绍一个简单的登录页面的实现，使用HTML、CSS和JavaScript完成。该登录页面具有选项卡切换和表单提交功能。

02

简易登录页面实现

本文将介绍一个简单的登录页面的实现，使用HTML、CSS和JavaScript完成。该登录页面具有选项卡切换和表单提交功能。

03

django搭建BBS-登入&验证码的生成

django搭建BBS-登入&验证码的生成基于注册完成后文件结构 app 接口 migrations __inint__.py admin.py 管理员页面注册表单用 apps.py bbsform.py form组件相关设置 models.py 模型存放 tests.py views.py 业务逻辑 avatar 图片文件存储 BBS 项目名称以及路由存放 __inint__.py settings.py urls.py wsgi.py static bootstrap-3.3.7-dist b

02

Thinkphp5学习018-项目安全-添加学生-简单的异步调用(ajax)

content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">

02

通过 Laravel 创建一个 Vue 单页面应用（四）

我们在第三部分中放弃构建真实的用户端，而学习使用 Vue 路由获取组件数据的新方式。现在我们准备将注意力转移到为用户创建 CRUD（增删改查）的功能上 —— 本教程将聚焦在编辑已存在的用户。

01

Python Django个人网站搭建9-对用户注册和删除的实现

作者： zifanwang 发布于2020-05-15

02

Python Django个人网站搭建7-实现文章修改

作者： zifanwang 发布于2020-05-10

02

AngularDart4.0 指南- 表单顶

表单是商业应用程序的主流。您可以使用表单登录，提交帮助请求，下订单，预订航班，安排会议，并执行无数其他数据录入任务。

03

Form和ModelForm组件

我们之前在HTML页面中利用form表单向后端提交数据时，都会写一些获取用户输入的标签并且用form标签把它们包起来。

01

CRM客户关系管理系统（十一）第十一章、学员报名流程开发

第十一章、学员报名流程开发 11.1.面包屑的制作 Boorstrap路径导航条（1）table_obj_list.html页面面包屑 def table_obj_list 返回数据改成loca

00

Django+xadmin打造在线教育平台（三）

代码 github下载五、用户注册主要实现功能用户输入邮箱、密码和验证码，点注册按钮如果输入的不正确，提示错误信息如果正确，发送激活邮件，用户通过邮件激活后才能登陆即使注册功能，没有激活的用户也不能登陆 5.1.初步视图 users/views.py class RegisterView(View): '''用户注册''' def get(self,request): return render(request,'register.html') 用户以g

09

3分钟短文：Laravel Form，让你不再写 HTML 的好“库”

作为后端工程师的你，是不是面对一堆JS，CSS感觉无比抓狂。如果能摆脱大量的冗余的HTML代码块，

03

django 获取前端 form 的文本数据

正常情况，我们都是应该采用 django 的表单处理 form 数据，有时候为了方便会直接从前端表单获取 form 数据而不使用 django 的表单验证。

03

Python Django个人网站搭建8-对用户登陆注册的实现

作者： zifanwang 发布于2020-05-12

03

ASP.NET Core教程【二】从保存数据看Razor Page的特有属性与服务端验证

前文索引： ASP.NET Core教程【一】关于Razor Page的知识在layout.cshtml文件中，我们可以看到如下代码： RazorPagesMovie 这段代码中用到asp-page这样的一个特有属性，这是razor page特有的，这是一个锚点属性，它的值将被编译到a标签的href属性上；跟多的时候，我们会像下面这样使用锚点属性 <a asp-controller="Speaker" asp-

05

BootStrap干货篇之表单

作者说本人秉着方便他人的想法才开始写技术文章的，因为对于自学的人来说想要找到系统的学习教程很困难，这一点我深有体会，我也是在不断的摸索中才小有所成，如果你们觉得我写的不错就帮我推广一下，让更多的人看到。另外如果有什么错误的地方也要及时联系我，方便我改进，谢谢大家对我的支持

01

Bootstrap响应式前端框架笔记四——表单

在Bootstrap框架中，可以为表单标签添加form-control属性来为其设置默认样式，默认表单控件的宽度将充满父容器标签。需要注意，在布局表单时，可以为其设置一个label标签用于说明，将label标签的for属性与表单标签的id相对应，可以实现当用户点击label标签时使其对应的表单自动获取输入焦点。示例代码如下：

01

Python Django个人网站搭建10-扩展用户信息

作者： zifanwang 发布于2020-05-16

04

Bootstrap 表单

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

02

Django之Form组件

我们之前在HTML页面中利用form表单向后端提交数据时，都会写一些获取用户输入的标签并且用form标签把它们包起来。

02

JQuery.validationEngine表单验证插件

JQuery.validationEngine表单验证控件功能强大，自带了样式显示模式：

02

Django之Form表单

Django From简介我们之前在HTML页面中利用form表单向后端提交数据时，都会写一些获取用户输入的标签并且用form标签把它们包起来。与此同时我们在好多场景下都需要对用户的输入做校验，比如校验用户是否输入，输入的长度和格式等正不正确。如果用户输入的内容有错误就需要在页面上相应的位置显示显示对应的错误信息.。 Django form组件就实现了上面所述的功能。总结一下，其实form组件的主要功能如下: 生成页面可用的HTML标签对用户提交的数据进行校验保留上次输入内容 Django For

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭