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="" method="get">
 8     <!--email-->
 9         邮件<input id="" type="email" name="email" placeholder="请输入正确mail地址"/><br/>
10
11         提交<input type="submit" value="提交"/>
12     </form>
13 </body>
14 </html>

2.结果

3.网址

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>
10
11     <!--url---->
12         网址<input id="u1" type="url" name="url"/>
13
14         提交<input type="submit" value="提交"/>
15     </form>
16 </body>
17 </html>

4.结果

　　网址的开头需要http://

5.各种日期

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>
10
11     <!--url---->
12         网址<input id="u1" type="url" name="url"/><br/><br/>
13
14     <!--time,date-->
15         日期<input id="d1" type="date" name="time"/><br/>
16         月份<input id="m1" type="month" name="month"/><br/>
17         星期<input id="w1" type="week" name="week"/><br/>
18         时间<input id="t1" type="time" name="time"/><br/><br/>
19
20         提交<input type="submit" value="提交"/>
21     </form>
22 </body>
23 </html>

6.结果

7.数字

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>
10
11     <!--url---->
12         网址<input id="u1" type="url" name="url"/><br/><br/>
13
14     <!--time,date-->
15         日期<input id="d1" type="date" name="time"/><br/>
16         月份<input id="m1" type="month" name="month"/><br/>
17         星期<input id="w1" type="week" name="week"/><br/>
18         时间<input id="t1" type="time" name="time"/><br/><br/>
19
20     <!--number-->
21         数字<input id="n1" type="number" name="number"/><br/>
22
23     <!--range-->
24
25         提交<input type="submit" value="提交"/>
26     </form>
27 </body>
28 </html>

8.结果

9.滑动

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>
10
11     <!--url---->
12         网址<input id="u1" type="url" name="url"/><br/><br/>
13
14     <!--time,date-->
15         日期<input id="d1" type="date" name="time"/><br/>
16         月份<input id="m1" type="month" name="month"/><br/>
17         星期<input id="w1" type="week" name="week"/><br/>
18         时间<input id="t1" type="time" name="time"/><br/><br/>
19
20     <!--number-->
21         数字<input id="n1" type="number" name="number"/><br/>
22
23     <!--range-->
24         滑动<input id="r1" type="range" min="0" max="3" step="1"/><br/>
25
26         提交<input type="submit" value="提交"/>
27     </form>
28 </body>
29 </html>

10.结果

11.搜索

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>
10
11     <!--url---->
12         网址<input id="u1" type="url" name="url"/><br/><br/>
13
14     <!--time,date-->
15         日期<input id="d1" type="date" name="time"/><br/>
16         月份<input id="m1" type="month" name="month"/><br/>
17         星期<input id="w1" type="week" name="week"/><br/>
18         时间<input id="t1" type="time" name="time"/><br/><br/>
19
20     <!--number-->
21         数字<input id="n1" type="number" name="number"/><br/>
22
23     <!--range-->
24         滑动<input id="r1" type="range" min="0" max="3" step="1"/><br/><br/>
25
26     <!--search-->
27         搜索<input id="s1" type="search" name="search" results="n" value="搜索"/><br/><br/>
28         提交<input type="submit" value="提交"/>
29     </form>
30 </body>
31 </html>

12.结果

13.list属性

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>
10
11     <!--url---->
12         网址<input id="u1" type="url" name="url"/><br/><br/>
13
14     <!--time,date-->
15         日期<input id="d1" type="date" name="time"/><br/>
16         月份<input id="m1" type="month" name="month"/><br/>
17         星期<input id="w1" type="week" name="week"/><br/>
18         时间<input id="t1" type="time" name="time"/><br/><br/>
19
20     <!--number-->
21         数字<input id="n1" type="number" name="number"/><br/>
22
23     <!--range-->
24         滑动<input id="r1" type="range" min="0" max="3" step="1"/><br/><br/>
25
26     <!--search-->
27         搜索<input id="s1" type="search" name="search" results="n" value="搜索"/><br/><br/>
28
29     <!--text--list-->
30         list<input id="t2" type="text" list="ilist"/>
31         <datalist id="ilist">
32             <option label="o1" value="oo1">
33             <option label="o2" value="oo2">
34             <option label="o3" value="oo3">
35         </datalist>
36         <br/><br/><br/><br/><br/>
37
38         提交<input type="submit" value="提交"/>
39     </form>
40 </body>
41 </html>

14.结果

15.颜色与正则

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset=utf-8>
 4     <title>form test</title>
 5 </head>
 6 <body>
 7     <form id="for" action="" method="get">
 8     <!--email-->
 9         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>
10
11     <!--url---->
12         网址<input id="u1" type="url" name="url"/><br/><br/>
13
14     <!--time,date-->
15         日期<input id="d1" type="date" name="time"/><br/>
16         月份<input id="m1" type="month" name="month"/><br/>
17         星期<input id="w1" type="week" name="week"/><br/>
18         时间<input id="t1" type="time" name="time"/><br/><br/>
19
20     <!--number-->
21         数字<input id="n1" type="number" name="number"/><br/>
22
23     <!--range-->
24         滑动<input id="r1" type="range" min="0" max="3" step="1"/><br/><br/>
25
26     <!--search-->
27         搜索<input id="s1" type="search" name="search" results="n" value="搜索"/><br/><br/>
28
29     <!--text--list-->
30         list<input id="t2" type="text" list="ilist"/>
31         <datalist id="ilist">
32             <option label="o1" value="oo1">
33             <option label="o2" value="oo2">
34             <option label="o3" value="oo3">
35         </datalist>
36
37     <!--color required pattern-->
38         颜色<INPUT type=color><br>
39         正则测试<input type="text" pattern="[789]+" required />
40         <br/><br/><br/><br/><br/>
41
42         提交<input type="submit" value="提交"/>
43     </form>
44 </body>
45 </html>

16.结果

时间： 2024-08-24 23:47:36

form的智能表单的相关文章

HTML5 智能表单

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

BootStrap 智能表单

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

$('#itemAddForm').form('reset');重置表单是报错？

$('#itemAddForm').form('reset');重置表单是报错Uncaught TypeError: $(...).reset is not a function 以为是方法错误于是就换了$('#itemAddForm').reset()和$('#itemAddForm').resetForm()依然报错. 后来把重置按钮的type属性换成了submit就OK了,<input type="sbumit" onclick="clearForm()"

通过getElementById来取得Form里的表单元素

<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>湖南易通</title> <script src="jquery-1.10.2.js" type="text/javascript"></script> <script type="text/javascript"&

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',