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. 【arc093f】Dark Horse（容斥原理，动态规划，状态压缩）

    [arc093f]Dark Horse(容斥原理,动态规划,状态压缩) 题面 atcoder 有 \(2^n\) 名选手,编号为 \(1\) 至 \(2^n\) .现在这 \(2^n\) 名选手将进行 ...

  2. 关于NIO一些优化

    1. 使用NIO开发web服务,传输文件内容,可以使用FileChannel.transferTo(position,count,socketChannel)来提升性能: 经过测试,确实能提升10% ...

  3. mybatis异常invalid comparison: java.util.Date and java.lang.String

    原文链接:http://blog.csdn.net/wanghailong_qd/article/details/50673144 mybatis异常invalid comparison: java. ...

  4. springboot配置文件的配置

    转:https://www.cnblogs.com/zheting/p/6707036.html Spring Boot使用了一个全局的配置文件application.properties,放在src ...

  5. Lucene6.6.0 案例与学习路线

    之前在学习Lucene这个全文检索工具,为项目搜索引擎的开发打下基础.在这里先分享一下关于Lucene的学习心得. 核心的学习流程是:索引文件格式--索引创建过程--检索流程. 1.首先建议参看这篇精 ...

  6. HDU 3094 树上删边 NIM变形

    基本的树上删边游戏 写过很多遍了 /** @Date : 2017-10-13 18:19:37 * @FileName: HDU 3094 树上删边 NIM变形.cpp * @Platform: W ...

  7. [软件]Xcode查找系统framework所在路径

    有的时候, 我们不小心改了头文件, 导致Xcode系统库被修改(改回去也不行) 假设我改的是UIKit.framework类库里面的一个文件, 那么你只需要从另一个好使的电脑上, 在这个路径找到UIK ...

  8. jdk1.8.0_45源码解读——HashSet的实现

    jdk1.8.0_45源码解读——HashSet的实现 一.HashSet概述 HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持.主要具有以下的特点: 不保证set的迭代顺 ...

  9. html5 canvas loading(这可怕的编辑器，自动把我的canvas转义了)---以前收藏的整理了一下

    /* super inefficient right now, could be improved */ var c = document.getElementById('canvasload'), ...

  10. html5 canvas画布上合成

    source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...