bootstrap 智能表单 demo示例

1.基本配置，支持的元素类型

2.自动布局

3.自定义布局

4.自定义表单

5.数据绑定

6.带验证的表单

时间： 2024-10-10 18:23:02

bootstrap 智能表单 demo示例的相关文章

BootStrap 智能表单系列十自动完成组件的支持

web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说输入产品编号,需要将产品的编号.产品的名称.产品的单价.产品的备注信息等填写会表单中的某个位置代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-autocomplete.html): 自动完成

BootStrap 智能表单系列十一级联下拉的支持

像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然后通过关联来显示或隐藏与上一级别无关的项感觉还是第二种简单一些,于是使用了第二种方式来实现的,其余的就不废话了代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-cascade

BootStrap 智能表单系列九表单图片上传的支持

本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-img.html): 依赖jquery-file-upload插件,需要引用jquery.ui.widget.js.jquery.iframe-transport.js.jquery.fileload.js 调用global.Fn.InitPlugin('img',

BootStrap 智能表单

背景:本码农.NET后端工程师,由于现在的公司后端能玩到的东西不怎么深入(一般也就sql.linq.反射.wcf....),所以申请玩玩前端的东西,在负责的一个电商项目中发现很大一部分是根据表结构来构建form表单的,而且模块还很多的,特别是表的列名都还没确定的时候需要先出界面,等后面表列名确定后又的重新来给表单元素加上id.name等,尼玛感觉这样下去就是一真正的码农了,于是自己整了一套根据配置来生成form表单的插件源码地址(github):BootStrap智能表单本系列将包括 1.表

HTML5 智能表单

1.表单新增属性 ? autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文本框自动获得焦点注意:一个页面中最多只能有一个表单元素设置该属性,否则功能将失效,建议对第一个input元素设置autofocus属性. ? formaction 属性 <input type="submit" formaction="处理逻辑"><!-- 处理逻辑可为a

form的智能表单

1.智能表单的介绍其中,(1)中的使用格式使得form不会太臃肿. 2.使用规范 3.新属性 4.举例二.程序 1.关于邮件的问题 1 <!DOCTYPE html> 2 <head> 3 <meta charset=utf-8> 4 <title>form test</title> 5 </head> 6 <body> 7 <form id="for" action=""

Bootstrap之表单控件状态

Bootstrap中的表单控件状态主要有三种:焦点状态,禁用状态,验证状态. 一.焦点状态:该状态告诉用户可输入或选择东西焦点状态通过伪类“:focus”以实现. bootstrap.css相应源码: .form-control:focus { border-color: #66afe9; outline: 0; //删除了outline的默认样式 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 1

HTML5学习之智能表单（二）

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form

网页版智能表单，在线开发平台设计界面，控件简单说明

智能表单开发界面如下图: 设计预览后的界面由图可视智能表单分为:设计区与工具条工具条是为了方便进行快速开发的工具,进行开发主要控件为下图红色框中的控件: 控件名称图标作用控件编号复选框按钮常规的复选框html控件 UC-001 单选框常规的单选框html控件 UC-002 文本框常规的文本框html控件 UC-003 多文本框常规的多文本框html控件 UC-004 下拉列表框常规的下拉列表html控件 UC-005 按钮常规的按钮html控件 U