HTML5 智能表单

【HTML5 智能表单】的更多相关文章

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

HTML5智能表单

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

第86天：HTML5应用程序标签和智能表单

一.HTML5应用程序标签 1.datalist需要数据载体 input list属性指向数据源 2.progress进度条 -webkit-appearance: none; /*如果要改默认样式要先取消默认样式 */ .my-progress::-moz-progress-bar { /*选中背景元素*/ /*兼容火狐浏览器*/ yellow; } .my-progress::-webkit-progress-bar { /*拿到progress的-webkit-pro…

HTML5_智能表单

1.HTML5中为了方便排版,可以使from中的表单标签脱离from的嵌套.方法:from指定ID,所有表单标签均添加from=id属性. <form action="http://localhost/test.php" method="post" id="register"></form> <input type="text" name="user" value="…

BootStrap 智能表单系列八表单配置json详解

本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数量来自动使用不同的栅格, '1,2,2,4':使用指定的栅格来布局,如果配置的列数不足的情况将使用第一项(n,n 为一项) 2.hides的配置项 hides:[{id:'xxx',value:''}] 此项是可选的,主要用于编辑时存放一些不可见的列(如主键ID的值) 3.eles 表单元素的配置(…

hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把选择的文件显示在img标签中, 实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. <!DOCTYPE html><html><head><title>HTML5上传图片预览</title><meta http…

BootStrap 智能表单系列首页 (持续更新中...)

背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可使用中发现还是蛮实用的,于是开源出来贡献与广大博友,技术含量不算高,就一个小插件,代码量不多但是短小精悍比较实用,大神勿喷~~~ 源码地址(github):BootStrap智能表单(https://github.com/xiexingen/Bootstrap-SmartForm) 欢迎 fuck 本系列将包括 1.BootStrap…

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

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

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

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

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 智能表单系列六表单数据绑定(编辑页面的数据绑定)

本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form4-initData.html): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t…

BootStrap 智能表单系列七验证的支持

但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题: 客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性该插件也为您支持到了表单验证,在需要验证的列的配置中加一项required:true 再生成表单元素前面的label的时候会自动在label前面生成一个*,用于提示改列数据会进行校验验证是使用了jquery validation,具体使用方式请参照jquery validation的api 代码如下(页面地址:h…

BootStrap 智能表单系列五表单依赖插件处理

这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-picker").datepicker({ format: 'yyyy-MM-dd', autoclose: true }).next("span.input-group-btn").bind("click", function () { $(this).prev(…

BootStrap 智能表单系列四表单布局介绍

表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局自动以布局就是根据autoLayout来决定使用的栅格,通过设置autoLayout:'1,2,1,2,2,4' 表示第一.二列占3格,第三列占6格子自动布局代码如下所示(https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/for…

BootStrap 智能表单系列三分块表单配置的介绍

相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form2-group-layout.html): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &…

BootStrap 智能表单系列二 BootStrap支持的类型简介

代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form1-basic.html): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础配置</title> <link rel="st…

bootstrap 智能表单 demo示例

1.基本配置,支持的元素类型 2.自动布局 3.自定义布局 4.自定义表单 5.数据绑定 6.带验证的表单 7.智能搜索 8.级联下拉 9.图片上传图片有点大了,屏幕不够大的话可能看的不习惯,没事后面我截图的实际尽量弄小点O(∩_∩)O~~ 接下来进入实战吧: 下一章:BootStrap 智能表单系列二 BootStrap支持的类型简介本系列首页:BootStrap 智能表单系列首页 (已完结)…

form的智能表单

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

精美的HTML5/CSS3表单带小图标

今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题,你可以在演示页的菜单栏中选择一种样式.需要高版本的浏览器才能支持. 你也可以在这里在线演示下面我们来简单分析一下这款表单的源代码,源代码由HTML代码.CSS代码及Javascript代码组成.一共3组样式,我们只对其中一组作解说. HTML代码: <ul data-for="prefix&…

H5智能表单

表单 keygen元素的作用是提供一种验证用户的可靠方法 datalist 元素规定输入域的选项列表 output元素用于不同类型的输出,比如计算或脚本输出智能表单 input 新增type值 email 邮箱地址 url 网址 number 输入值必须是数字属性 min最小 max最大 step指定跳跃 value默认值 range取值范围属性 min/max/step/value tel 用于电话号,因为存在 - 等字符,所以等同于text 但是用移动设备,会直接弹出数字键盘 sear…

HTML5新表单新功能解析

HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale…

HTML5的表单input元素的新属性

知识点 <HTML5的表单input元素的新属性>,留待学习分享...  <!--<input type=email ....限制用户输入emain格式 url ....限制用户输入网址格式 data ....限制用户输入日期格式…

玩转html5(三)---智能表单（form），使排版更加方便

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>form表单学习笔记</title> </head> <body> <!-- 在旧版的html中,form表单与input等元素必须嵌套使用,为了排版方便,在html中提出了新方法…

学习HTML5之表单

HTML5 的标准已经定了,应该火了,或者已经火了.那么是不是可以学习一下呢? 目前h5的主场还是在手机端,pc还是受困于浏览器的兼容,主要是IE在拖后腿.所以这里侧重的是手机里面的表现. 先来看看表单.h5里面增加了一些新的标签和属性,解决了我们以前比较头疼或者繁琐的功能. 先看看input里面的type属性,新增了一些属性,比如email.number.date.range等,那么他们的表现到底如何呢?我们来罗列一下. <form > <input type="checkb…

【HTML5】表单属性

* autocomplete autocomplete 属性规定 form 或 input 域应该拥有自动完成功能. 注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color. 当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项: <!DOCTYPE HTML> <…

【HTML5】表单元素

* datalist datalist 元素规定输入域的选项列表. 列表是通过 datalist 内的 option 元素创建的. 如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id: <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Webpa…

疯狂的表单-html5新增表单元素和属性

疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性表单结构更灵活要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body> <form action="upload.php" method="post" accept-charset="utf-8&…

HTML5 总结-表单-表单元素

HTML5 表单元素 HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefox Opera Chrome Safari datalist No No 9.5 No No keygen No No 10.5 3.0 No output No No 9.5 No No datalist 元素 datalist 元素规定输入域的选项列表. 列表是通过 dat…

HTML5 总结-表单-输入类型

HTML5 Input 类型 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range Date pickers (date, month, week, time, datetime, datetime-local) search color 浏览器支持 Input type IE Firefox Opera Chrome Safari email No 4.0…

HTML5新增表单验证

HTML5新增属性: 属性描述 placeholder 提供一种提示,输入域为空时显示,获得焦点输入内容后消失 required 规定输入域不能为空 pattern 规定验证input域的模式(正则表达式) 示例: <input type=”text” id=”uName” placeholder=”英文.数字长度为6-10个字符” required pattern=”[a-zA-Z0-9]{6,10}”/> validity属性: validityState对象: 属性描述 valueM…