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. 洛谷 P3975 [TJOI2015]弦论 解题报告

    P3975 [TJOI2015]弦论 题目描述 为了提高智商,ZJY开始学习弦论.这一天,她在<String theory>中看到了这样一道问题:对于一个给定的长度为\(n\)的字符串,求 ...

  2. CF1110C Meaningless Operations（构造题）

    这可能是我打那么多次CF比赛时,做出来的最难的一道题了……而且这题也是个绝世好题…… 题目链接:CF原网  洛谷 题目大意:$q$ 组询问,每次给定 $a$ 询问 $\gcd(a\&b,a\o ...

  3. 前端学习 -- Css -- 行间距

    在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大.使用line-height来设置行高 .行高类似于我们上学单线本,单线本是一行一行,线与线 ...

  4. QeePHP View视图的默认变量与新增变量

    新版本的QeePHP(V13.1)中,视图页面已经默认添加了几个常用变量 $_app; //控制器所属的应用程序 $_login_user;  //登陆用户信息 直接在视图页面直接使用变量即可. 如果 ...

  5. 「Vue」vue cli3项目打包为APP方法及坑点

    1.执行npm run build之后生成dist文件夹 2.打开HBuilderX新建一个APP项目 3.把dist文件夹里的所有文件拷贝替换到APP文件夹下 4.打开manifest.json文件 ...

  6. python爬虫 抓取一个网站的所有网址链接

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

  7. yolo2详解

    转自:https://blog.csdn.net/u014380165/article/details/77961414 YOLOV2要是YOLO的升级版(Better faster) Better ...

  8. Hadoop基础-MapReduce的排序

    Hadoop基础-MapReduce的排序 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MapReduce的排序分类 1>.部分排序 部分排序是对单个分区进行排序,举个 ...

  9. 【转】在Mac OS X 10.8中配置Apache ＋ PHP ＋ MySQL

    CHENYILONG Blog 在Mac OS X 10.8中配置Apache + PHP + MySQL 在Mac OS X 10.8中配置Apache+PHP+MySQL的内容包括: 配置Apac ...

  10. 用MFC（C++）实现拼音搜索

    2015年4月1日更新: 我在github开源了Objective-C版的拼音搜索项目,感兴趣的可以去看看: OC版拼音搜索 最近项目需要实现按照拼音搜索资源.在网上找了一下,这方面的东西太少了. J ...