1、HTML5中为了方便排版，可以使from中的表单标签脱离from的嵌套。方法:from指定ID，所有表单标签均添加from=id属性。
<form action="http://localhost/test.php" method="post" id="register"></form>

    <input type="text" name="user" value="" from="register" />

    <input type="password" name="pwd" value="" form="register" />

    <select name="year" form="register">

            <option value="1970">1970</option>

            <option value="1980">1980</option>

            <option value="1990">1990</option>

    </select>　　

 　　<input type="submit" value="注册" form="register" />
2、智能表单的使用和规范、新增的表单属性：
Input表单的type新属性值
Type="email" 限制用户输入必须为Email类型
Type="url" 限制用户输入必须为URL类型
Type="date" 限制用户输入必须为日期类型
Type="time" 限制用户输入必须为时间类型O
Type="month" 限制用户输入必须为月类型O
Type="week" 限制用户输入必须为周类型O
Type="number" 限制用户输入必须为数字类型
Type="range" 产生一个滑动条的表单
Type="search" 产生一个搜索意义的表单 配合results="n"属性 C
Type="color" 生成一个颜色选择表单
属性 值 说明
Required required 表单拥有该属性表示其内容不能为空，必填
placeholder 提示文本 表单的提示信息，存在默认值将不显示（就是当表单的value的值不为空的话，该属性的值就不显示）
Autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单（如果有两个表单都有这属性，那么第一个生效，其他的无效）
Pattern 正则表达式 输入的内容必须匹配到指定正<body>pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。 
 <form action="http://localhost/test.php" method="post" id="register"></form>

    <input type="submit" value="注册" form="register" />

    <hr/>

    默认值:<input type="text" name="test" value="" pattern="\d{3}" placeholder="我是新的HTML5的默认值" form="register" /><br />

    邮箱：<input type="email" name="youxiang" value="" form="register" required="required" /><br />

    URL：<input type="url" name="url" value="" form="register" /><br />

    DATE:<input type="date" name="riqi" value="" form="register" /><br />

    TIME：<input type="time" name="shijian" value="" form="register" /><br />

    Month：<input type="month" name="yue" value="" form="register" /><br />

    WEEK：<input type="week" name="zhou" value="" form="register" /><br />

　　datetime-local：<input type="datetime-local" name="shijian" value="" form="register" /><br /><!--选择日期和时间-->

    数字：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus"  step="3"/><br /><!--min属性表示允许最小值，max表示允许最大值。

                                                                                                step属性表示规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）-->

    滑动条：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br /><!--step="2"设置合法值 是2的倍数就是合法的,默认值是一般，设置value值可以设置默认值，同样可以设置最大　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　值和最小值-->

    搜索：<input type="search" name="sousuo" value="" form="register" results="n"  /><br /><!--results="n" 会增加一个搜索的小图标-->

    颜色：<input type="color" name="yanse" value="" form="register" /><br />

</body>
<input type="tel" /><!--在移动端的时候会有键盘的切换-
<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" /><!--autocomplete是否自动保存用户输入值   默认为on--
<form action="http://www.baidu.com">

    <input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" pattern="\d{1,5}" />

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

    <input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" /> <!--formaction在submit里定义提交地址-->

</form>
3、Autocomplete列表：Datalist标签配合option标签实现的自动填充表单功能（就是当输入一点东西的时候会自动出现相关联的东西，比如百度的搜索）：
<body>

       自动填充表单<br />

    <input type="text" name="auto" value="" list="movie" />

    <datalist id="movie">

        <option>人在囧途</option>

        <option>车在囧途</option>

        <option>泰囧</option>

    </datalist>

</body>
4、output的使用：
<body>

       输出表单output<br />

    　　<form action="" method="post" oninput="result.value=parseInt(no1.value)*parseInt(no2.value)">

        <input type="number" name="no1" value="" />

        <input type="number" name="no2" value="" />

        <output name="result"></output>

    </form>

</body>

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

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

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

  2. BootStrap 智能表单系列 十一 级联下拉的支持

    像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...

  3. BootStrap 智能表单系列 十 自动完成组件的支持

    web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需 ...

  4. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

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

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

  6. BootStrap 智能表单系列 八 表单配置json详解

    本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...

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

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

  8. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

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

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

随机推荐

  1. .NET设计模式（5）：工厂方法模式（Factory Method）（转）

    工厂方法模式(Factory Method) ——.NET设计模式系列之五 Terrylee,2004年1月2日 概述 在软件系统中,经常面临着“某个对象”的创建工作,由于需求的变化,这个对象的具体实 ...

  2. POJ 1700 Crossing River (贪心)

    Crossing River Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9585 Accepted: 3622 Descri ...

  3. BZOJ1502: [NOI2005]月下柠檬树

    Simpson法相当好用啊!神奇的骗分算法! /************************************************************** Problem: 1502 ...

  4. git的安装使用和代码自动部署

    1.安装 http://www.cnblogs.com/sunada2005/archive/2013/06/06/3121098.html http://www.cnblogs.com/zhcncn ...

  5. 为jquery qrcode生成的二维码嵌入图片

    在一次微信项目中,需要实现通过扫描二维码来进行会议签到,二维码的生成选择了qrcode.js的版本,然后使用jquery.qrcode.js插件来绘制二维码. <script type=&quo ...

  6. java基础知识回顾之javaIO类---BufferedReader和BufferedWriter

    使用了装饰设计模式:此类的设计是为了提高流操作数据的效率.思想就是定义容器将数据进行临时存储,对于缓冲区对象,其实就是将这个容器进行了分装,并提供了更高效的操作方法. BufferReader: pa ...

  7. ***iOS开发中@selector的理解与应用

    @selector 是什么? 1一种类型 SEL2代表你要发送的消息(方法), 跟字符串有点像, 也可以互转.: NSSelectorFromString() / NSSelectorFromStri ...

  8. HDU 1016 Prime Ring Problem （素数筛+DFS）

    题目链接 题意 : 就是把n个数安排在环上,要求每两个相邻的数之和一定是素数,第一个数一定是1.输出所有可能的排列. 思路 : 先打个素数表.然后循环去搜..... #include <cstd ...

  9. BZOJ 1008: [HNOI2008]越狱 快速幂

    1008: [HNOI2008]越狱 Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生 ...

  10. linux read命令详解

    read命令从键盘读取变量的值,通常用在shell脚本中与用户进行交互的场合.该命令可以一次读取多个变量的值,变量和输入的值都需要使用空格隔开. 语法 read(选项)(参数) 选项 -p:指定读取值 ...