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="get">

     <!--email-->

         邮件<input id="" type="email" name="email" placeholder="请输入正确mail地址"/><br/>

         提交<input type="submit" value="提交"/>

     </form>

 </body>

 </html>

2.结果

　　

3.网址

 <!DOCTYPE html>

 <head>

     <meta charset=utf-8>

     <title>form test</title>

 </head>

 <body>

     <form id="for" action="" method="get">

     <!--email-->

         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>

     <!--url---->

         网址<input id="u1" type="url" name="url"/>

         提交<input type="submit" value="提交"/>

     </form>

 </body>

 </html>

4.结果

　　网址的开头需要http://

　　

5.各种日期

 <!DOCTYPE html>

 <head>

     <meta charset=utf-8>

     <title>form test</title>

 </head>

 <body>

     <form id="for" action="" method="get">

     <!--email-->

         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>

     <!--url---->

         网址<input id="u1" type="url" name="url"/><br/><br/>

     <!--time,date-->

         日期<input id="d1" type="date" name="time"/><br/>

         月份<input id="m1" type="month" name="month"/><br/>

         星期<input id="w1" type="week" name="week"/><br/>

         时间<input id="t1" type="time" name="time"/><br/><br/>

         提交<input type="submit" value="提交"/>

     </form>

 </body>

 </html>

6.结果

　　

7.数字

 <!DOCTYPE html>

 <head>

     <meta charset=utf-8>

     <title>form test</title>

 </head>

 <body>

     <form id="for" action="" method="get">

     <!--email-->

         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>

     <!--url---->

         网址<input id="u1" type="url" name="url"/><br/><br/>

     <!--time,date-->

         日期<input id="d1" type="date" name="time"/><br/>

         月份<input id="m1" type="month" name="month"/><br/>

         星期<input id="w1" type="week" name="week"/><br/>

         时间<input id="t1" type="time" name="time"/><br/><br/>

     <!--number-->

         数字<input id="n1" type="number" name="number"/><br/>

     <!--range-->

         提交<input type="submit" value="提交"/>

     </form>

 </body>

 </html>

8.结果

　　

9.滑动

 <!DOCTYPE html>

 <head>

     <meta charset=utf-8>

     <title>form test</title>

 </head>

 <body>

     <form id="for" action="" method="get">

     <!--email-->

         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>

     <!--url---->

         网址<input id="u1" type="url" name="url"/><br/><br/>

     <!--time,date-->

         日期<input id="d1" type="date" name="time"/><br/>

         月份<input id="m1" type="month" name="month"/><br/>

         星期<input id="w1" type="week" name="week"/><br/>

         时间<input id="t1" type="time" name="time"/><br/><br/>

     <!--number-->

         数字<input id="n1" type="number" name="number"/><br/>

     <!--range-->

         滑动<input id="r1" type="range" min="0" max="3" step="1"/><br/>

         提交<input type="submit" value="提交"/>

     </form>

 </body>

 </html>

10.结果

　　

11.搜索

 <!DOCTYPE html>

 <head>

     <meta charset=utf-8>

     <title>form test</title>

 </head>

 <body>

     <form id="for" action="" method="get">

     <!--email-->

         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>

     <!--url---->

         网址<input id="u1" type="url" name="url"/><br/><br/>

     <!--time,date-->

         日期<input id="d1" type="date" name="time"/><br/>

         月份<input id="m1" type="month" name="month"/><br/>

         星期<input id="w1" type="week" name="week"/><br/>

         时间<input id="t1" type="time" name="time"/><br/><br/>

     <!--number-->

         数字<input id="n1" type="number" name="number"/><br/>

     <!--range-->

         滑动<input id="r1" type="range" min="0" max="3" step="1"/><br/><br/>

     <!--search-->

         搜索<input id="s1" type="search" name="search" results="n" value="搜索"/><br/><br/>

         提交<input type="submit" value="提交"/>

     </form>

 </body>

 </html>

12.结果

　　

13.list属性

 <!DOCTYPE html>

 <head>

     <meta charset=utf-8>

     <title>form test</title>

 </head>

 <body>

     <form id="for" action="" method="get">

     <!--email-->

         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>

     <!--url---->

         网址<input id="u1" type="url" name="url"/><br/><br/>

     <!--time,date-->

         日期<input id="d1" type="date" name="time"/><br/>

         月份<input id="m1" type="month" name="month"/><br/>

         星期<input id="w1" type="week" name="week"/><br/>

         时间<input id="t1" type="time" name="time"/><br/><br/>

     <!--number-->

         数字<input id="n1" type="number" name="number"/><br/>

     <!--range-->

         滑动<input id="r1" type="range" min="0" max="3" step="1"/><br/><br/>

     <!--search-->

         搜索<input id="s1" type="search" name="search" results="n" value="搜索"/><br/><br/>

     <!--text--list-->

         list<input id="t2" type="text" list="ilist"/>

         <datalist id="ilist">

             <option label="o1" value="oo1">

             <option label="o2" value="oo2">

             <option label="o3" value="oo3">

         </datalist>

         <br/><br/><br/><br/><br/>

         提交<input type="submit" value="提交"/>

     </form>

 </body>

 </html>

14.结果

　　

15.颜色与正则

 <!DOCTYPE html>

 <head>

     <meta charset=utf-8>

     <title>form test</title>

 </head>

 <body>

     <form id="for" action="" method="get">

     <!--email-->

         邮件<input id="e1" type="email" name="email" placeholder="请输入正确mail地址"/><br/>

     <!--url---->

         网址<input id="u1" type="url" name="url"/><br/><br/>

     <!--time,date-->

         日期<input id="d1" type="date" name="time"/><br/>

         月份<input id="m1" type="month" name="month"/><br/>

         星期<input id="w1" type="week" name="week"/><br/>

         时间<input id="t1" type="time" name="time"/><br/><br/>

     <!--number-->

         数字<input id="n1" type="number" name="number"/><br/>

     <!--range-->

         滑动<input id="r1" type="range" min="0" max="3" step="1"/><br/><br/>

     <!--search-->

         搜索<input id="s1" type="search" name="search" results="n" value="搜索"/><br/><br/>

     <!--text--list-->

         list<input id="t2" type="text" list="ilist"/>

         <datalist id="ilist">

             <option label="o1" value="oo1">

             <option label="o2" value="oo2">

             <option label="o3" value="oo3">

         </datalist>

     <!--color required pattern-->

         颜色<INPUT type=color><br>

         正则测试<input type="text" pattern="[789]+" required />

         <br/><br/><br/><br/><br/>

         提交<input type="submit" value="提交"/>

     </form>

 </body>

 </html>

16.结果

　　

　　

form的智能表单的更多相关文章

  1. HTML5_智能表单

    1.HTML5中为了方便排版,可以使from中的表单标签脱离from的嵌套.方法:from指定ID,所有表单标签均添加from=id属性. <form action="http://l ...

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

    背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...

  3. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

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

    但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题: 客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性 该插件也为您支持到 ...

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

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

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

    相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

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

    代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form1-basic.html): <! ...

  8. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  9. HTML5智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

随机推荐

  1. 【uoj126】 NOI2013—快餐店

    http://uoj.ac/problem/126 (题目链接) 题意 求基环树直径. Solution zz选手迟早退役,唉,右转题解→_→:LCF 细节 拓扑排序的时候度数为0时入队.我在想什么w ...

  2. 51nod1134——（最长上升子序列）

    给出长度为N的数组,找出这个数组的最长递增子序列.(递增子序列是指,子序列的元素是递增的) 例如:5 1 6 8 2 4 5 10,最长递增子序列是1 2 4 5 10.   Input 第1行:1个 ...

  3. POJ 1797 Heavy Transportation / SCU 1819 Heavy Transportation （图论，最短路径）

    POJ 1797 Heavy Transportation / SCU 1819 Heavy Transportation (图论,最短路径) Description Background Hugo ...

  4. UiAutomator2.0入门

    总是听说UiAutomator这个框架,但从来没有使用过.找了篇入门,实践一下.实践之后感觉,uiautomator写测试代码,还是有点费劲.接口名比较多,比较长.网易的atx里使用的uiautoma ...

  5. Redis与memecache的区别

    转载连接: https://www.biaodianfu.com/redis-vs-memcached.html Redis的作者Salvatore Sanfilippo曾经对这两种基于内存的数据存储 ...

  6. C++委托模式

    希望想理解C++委托的同学,能够从代码中悟出其中的原理.有什么不太清楚的地方,欢迎留言交流. #include <bits/stdc++.h> using namespace std; # ...

  7. NameError: name 'reload' is not defined

    对于 Python 2.X: import sys reload(sys) sys.setdefaultencoding("utf-8") 对于 <= Python 3.3: ...

  8. HTML的自定义属性

    用Angular这些框架的时候会发现一系列的指令,如ng-app.ng-repeat等,这些都属于用户自定义属性 但是HTML5规范要求所有的用户自定义属性以"data-"开头,如 ...

  9. ideau 2018.1.2安装和使用

    此博文的各安装软件.方法技巧仅供研究使用,请勿用于商业活动.下载.操作后请于24小时内删除.对于使用过程中出现的一切问题.责任.纠纷,概不负责. 1.下载ideau-2018.1.2,点击下载,提取码 ...

  10. C语言复习---获取最小公倍数（公式法：两个数相乘等于最小公倍数乘以最大公约数）

    公式法:两个数相乘等于最小公倍数乘以最大公约数 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib ...