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. 【BZOJ1293】[SCOI2009]生日礼物（单调队列）

    [BZOJ1293][SCOI2009]生日礼物(单调队列) 题面 BZOJ 洛谷 题解 离散之后随便拿单调队列维护一下就好了. #include<iostream> #include&l ...

  2. 解题：SPOJ 422 Transposing is Even More Fun

    题面 这种换来换去的东西很容易想到置换群那一套,然后题目甚至还暗示了二进制=.= 直接换的话显然是$2^{a+b}$次,但是一个循环节里可以少换一次,然后问题就变成了数循环节 在一个循环节里的位置有什 ...

  3. StringEscapeUtils的常用使用，防止SQL注入及XSS注入

    StringEscapeUtils的常用使用,防止SQL注入及XSS注入 2017年10月20日 11:29:44 小狮王 阅读数:8974   版权声明:本文为博主原创文章,转载请注明出处. htt ...

  4. 实战：使用SVN+apache搭建一个版本控制服务器

    今天讲的内容: 实战:使用SVN+apache搭建一个版本控制服务器 每天: 10:00 晚上:21:00 服务端:xuegod63.cn   IP:192.168.10.63 服务概述: SVN(s ...

  5. 集合框架基础知识-----java基础知识

    Java集合框架 :接口:Collection.List .Set. Map:实现类:ArrayList.LinkedList.Vector.HashSet.TreeSet.HashMap.HashT ...

  6. Hadoop生态圈-Flume的主流Channel源配置

    Hadoop生态圈-Flume的主流Channel源配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   一. 二. 三.

  7. C语言复习---选择法排序

    选择排序也是一种简单直观的排序算法 它的工作原理很容易理解:初始时在序列中找到最小(大)元素,放到序列的起始位置作为已排序序列:然后,再从剩余未排序元素中继续寻找最小(大)元素,放到已排序序列的末尾. ...

  8. Google-403-Forbidden

    Author:KillerLegend Date:2014.8.14 From:http://www.cnblogs.com/killerlegend/p/3913554.html www.googl ...

  9. bzoj千题计划237：bzoj1492: [NOI2007]货币兑换Cash

    http://www.lydsy.com/JudgeOnline/problem.php?id=1492 dp[i] 表示 第i天卖完的最大收益 朴素的dp: 枚举从哪一天买来的在第i天卖掉,或者是不 ...

  10. C++ map & set

    山东第六届ACM省赛B题 超时代码: #include<iostream> #include<cstdio> #include<string.h> #include ...