form-group 两种常用使用

最新推荐文章于 2024-08-08 18:58:30 发布
最新推荐文章于 2024-08-08 18:58:30 发布
阅读量3.7w 收藏 23
点赞数 12
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15267341/article/details/63736215
版权

用法一：
这里写图片描述

运行结果如下：
这里写图片描述

form-group ：增加盒子的下边界
form-control： 充满整个父元素，并且有换行作用

用法二：
这里写图片描述

运行结果如下：
这里写图片描述

control-label :元素内实现包含内容右对齐

FR:海涛高软（QQ技术交流群：386476712）

海涛高软
关注
专栏目录
SGroupForm:基于vue + element的配置化表单组件
04-02
s群形式 安装依赖 yarn install 运行示例 yarn run serve 打包组件 yarn run build 运行说明文档 yarn run docs 打包说明文档 yarn run docs:build
FormGroup的属性和常用方法
weixin_48290187的博客
10-15 4488
FormGroup跟踪一组FormControl实例的值和有效性状态。 FormGroup把每个子FormControl的值聚合进一个对象，它的key是每个控件的名字。它通过归集其子控件的状态值来计算出自己的状态 。比如，若组中的任何一个控件是无效的，那么整个组就是无效的。 FormCroup是Angular中用来定义表单的三大基本构造块之一，就像FormControl、FormArray一样。 当实例化FormGroup时，在第一个参数中传入一组子控件。每个子控件会用控件名把自己注册进去。 属性 cont
【Material-UI】FormGroup 组件：多选框分组的最佳实践详解
最新发布
lph159的博客
08-08 929
FormGroup是 Material-UI 中用于分组选择控件的容器组件。它通常被用来包裹一组复选框或单选按钮，使得这些控件在视觉和逻辑上被看作一个整体。通过将相关的表单控件放入FormGroup中，可以使表单布局更加清晰，同时也便于开发者进行状态管理和事件处理。Material-UI 的FormGroup组件是一个强大而灵活的工具，能够帮助开发者轻松地管理多个选择控件。在多选项管理、逻辑验证、用户偏好设置等场景中，FormGroup都能够提供优雅的解决方案。通过合理地使用FormGroup。
4.bootstrap的form表单的form-group和form-control的区别与联系
weixin_30906425的博客
10-13 3720
1. form-group一般用于div form-control一般用于置于div中的标签元素，为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”，如： <form role="form"> <div class="form-group"> <input type="email" class="for...
form-group与input-group （Bootstrap）
海涛高软
01-04 3万+
整体是一个from-group，下面分两列，一列放入文本标签，一列放入输入项文本标签要加上control-label类修饰，其实control-label 具有靠右对齐功能input标签加上form-control类修饰，使输入框更加好看输入项中每一行都要用input-group修饰最后运行的效果如下： 再举一个例子运行效果如下： 运行后的效果如下： input-group表示一行 form
form-inline、form-control和form-group
热门推荐
海涛高软
03-19 4万+
FR:Hunk xu (QQ技术交流群：386476712）
初识ansible—— ansible基础及ad-hoc常用模块的使用
绮梦寒宵的博客
09-18 1576
文章目录一、介绍二、安装三、配置四、命令 一、介绍 1.定义     ansible是一种新出现的自动化运维工具，是基于python开发的，集合了众多运维工具的优点，包括puppet、chef、func、fabric，实现了批量系统配置，批量程序部署，批量运行命令等功能。     ansible是基于 paramiko（框架） 开发的，并且是基于模块工作的，本身没有批量部署的能力。真正具有批量部署的是ansible所运行的模块，ansible只是提供了一种框架。     ansible不需要在远程主机上安
笔记--数据库分类及常用SQL语句
VictorHan01的博客
07-24 308
数据库简介 数据库是按照一定的数据结构来组织、存储和管理数据的。 数据库分类： 关系型数据库： 约束性较强，采用关系模型来组织数据。 常见数据库有： Oracle、DB2、Microsoft SQL Server、 Microsoft Access、MySQL. 非关系型数据库： 基于非关系模型，分布式的数据库 **列模型：**面向检索的列式存储，同于关系型数据库的行式结构，这种结构让很多统计聚合操作简单方便，如 BigTable 键值对模型： Key-Value，存储的数据是一个个“键值对”，如：Redi
C#WindowsForm常用窗体工具
weixin_73959356的博客
06-10 7235
如果用户选择了一个或多个文件并点击了打开按钮，那么在 DialogResult.OK 的条件下，可以通过 FileName 或 FileNames 属性获取用户选择的文件路径和文件名。如果用户选择了文件夹并点击了确定按钮，在 DialogResult.OK 的条件下，可以通过 SelectedPath 属性获取用户选择的文件夹路径。如果用户指定了保存位置和文件名，并点击了保存按钮，那么在 DialogResult.OK 的条件下，可以通过 FileName 属性获取用户指定的保存文件路径和文件名。
自动化运维工具--ansible详解（常用模块篇）
hanguofei的博客
10-11 523
1、主机连通性测试 我们使用ansible web -m ping命令来进行主机连通性测试，效果如下： [root@server ~]# ansible web -m ping 172.17.0.3 | SUCCESS => { "ansible_facts": { "discovered_interpreter_python": "/usr/bin/python" ...
css常用属性速查-急速查找
JackieDYH的博客
05-06 670
CSS 选择器 选择器 例子 例子描述 .class .intro 选择 class="intro" 的所有元素。 .class1.class2 .name1.name2 选择 class 属性中同时有 name1 和 name2 的所有元素。 .class1.class2 .name1 .name2 选择作为类名 name1 元素后代的所有类名 name2 元素。 #id #firstname 选择 id="firstname.
angular之formgroup
李卓书
08-21 3054
最后检查发现啊，是clsChange事件没有触发，但是我们知道ngmodelchange是angular内置的绑定事件，在patchvalue中是会被触发的。属性是继承 AbstracControl，下面翻译一下：（这里要说明一下，这里翻译的，都是针对formgroup的，因为对于formArray,formControl可能是不同的）这里呢，在构造函数里，用valueChanges进行数据监控，当name里的数值发生变化时，会订阅这个回调函数。其实，编辑要做的就是回显以及初始化数据之后的联动。
bootstarp 的表单控件大小设置和class="form-group"，row使用
chuncui2576的博客
02-07 2345
表单控件都正常的大小。可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是： 1、input-sm:让控件比正常大小更小 2、input-lg...
bootstrap中的class=“form-group“是什么意思
weixin_45709255的博客
07-16 1万+
form-group 你可以理解为一个格式化 就是一个小集体他就是集体的圈 就是把需要的东西放在一个集体中 <h2 class="page-header">增</h2> <form id="addForm" action="" method="post"> <div class="form-group"> <label for="userName">姓名</label><span style="color:
Angular学习笔记43：响应式表单：FormGroup嵌套
W先生
06-06 1880
继Angular学习笔记42：响应式表单：表单分组FormGroup-新建、获取FormGroup的值以后。 在UserInfo中还有属性是 Address，不过这个 Address属性 是由三个控件组成，分别是：area:地区；street:街道；houseId:门牌号。 这个时候，就涉及到了FormGroup嵌套。 将area:地区；street:街道；houseId:门牌号这三个进行分组，它...
BootStrap-CSS样式_排版_表单、表单控件
LoveyourselfJiuhao的博客
12-01 2035
1. 基本表单 form样式：默认不显示，基本表单 form-group样式：表单内设置分组 form-control样式：设置控件并绑定控件默认样式 2. 内联表单 form-inline样式：设置为内联排列表单 3. 水平排列表单 form-horizontal样式：设置为水平排列表单 4. 表单支持控件 type="text"：文本框 textarea标签：多行文本框 ...
表单的布局
chenmo2001的博客
05-27 2228
表单的布局 自从Bootstrap使用display:block和width:100%在全部的input控件上后，表单默认都是基于垂直堆叠排列的，可以使用其他Class类来改变表单的布局。 .form-group（表单组） .form-group 可以向为表单赋予一些结构样式，目的是提供标签的控制配对以及margin-bottom属性，由于它是一个类选择器，可以在<div>或其他元素中使用它。 例如： <form> <div class="form-g...
Vue3如何使用el-form-item-group
06-15
在Vue3中，`el-form-item-group`是Element UI库中的一个组件，用于组织和分组表单元素，通常用于展示复杂的表单结构，如嵌套的字段。`el-form-item`用于单独的表单项，而`el-form-item-group`则可以包含多个`el-form-item`。下面是一个基本的使用示例： 1. 引入依赖： 首先确保已经安装了Element UI，如果还没有，可以通过npm或yarn安装： ```bash npm install element-ui // 或者 yarn add element-ui ``` 2. 在Vue组件中导入并使用： ```html <template> <div> <el-form :model="form"> <!-- 使用el-form-item-group --> <el-form-item-group label="分组标题1" :rules="rules1"> <el-form-item prop="item1.1">...</el-form-item> <el-form-item prop="item1.2">...</el-form-item> </el-form-item-group> <el-form-item-group label="分组标题2"> <el-form-item prop="item2.1">...</el-form-item> <!-- 可以省略label，它会显示为第一个子元素的标签 --> <el-form-item>...</el-form-item> </el-form-item-group> </el-form> </div> </template> <script> import { ElFormItem, ElFormItemGroup } from 'element-ui'; export default { components: { ElFormItem, ElFormItemGroup }, data() { return { form: {}, // 表单数据模型 rules1: { ... }, // 分组1对应的验证规则 }; }, }; </script> ``` 3. 验证规则： `rules1`属性可以用来设置每个`el-form-item-group`内的验证规则，例如： ```javascript rules1: { item1: { required: true, message: '请输入内容', trigger: 'blur' // 触发验证事件 }, item2: [ { required: true, message: '不能为空', trigger: 'blur' }, { min: 5, message: '长度必须大于5', trigger: 'blur' } ] } ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值