HTML5_智能表单
<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" />
| 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>
<body>
自动填充表单<br />
<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>人在囧途</option>
<option>车在囧途</option>
<option>泰囧</option>
</datalist>
</body>
<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_智能表单的更多相关文章
- BootStrap 智能表单系列 首页 (持续更新中...)
背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...
- BootStrap 智能表单系列 十一 级联下拉的支持
像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...
- BootStrap 智能表单系列 十 自动完成组件的支持
web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需 ...
- BootStrap 智能表单系列 九 表单图片上传的支持
本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...
- BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)
本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
- BootStrap 智能表单系列 八 表单配置json详解
本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...
- BootStrap 智能表单系列 七 验证的支持
但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题: 客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性 该插件也为您支持到 ...
- BootStrap 智能表单系列 五 表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
- BootStrap 智能表单系列 四 表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...
随机推荐
- windows phone MVVM开发心得第一天
之前刚刚学了asp.net网站的三层架构,为其中的优点着迷,可惜寒假本来决定学下MVC的计划泡汤了,刚开学,学了下windows phone 的MVVM模式的开发,在此留下点心得和脚印,第一天只是学了 ...
- css之margin && padding讲解
margin && padding盒子模型: margin是模块与模块的空隙,padding是内容与边框的空隙 注: 1.margin:边缘.空白 2.padding:填充 margi ...
- Ajax HTML, JS
Ajax Request HTML <script></script>及外部的js文件,都需要 var scriptStrs = response.match(/\<[\ ...
- 上海9000辆出租车上铺设免费微信连WiFi
据了解,去年7月,2000辆贴有Wi-Fi标识的上海大众出租车已经正式上路.近期,为了加大方便市民的力度,上海云联将上海大众等9000辆出租车上铺设免费微信连WiFi,为上海乘客提供简单便捷的微信连W ...
- Java 8怎么了：局部套用vs闭包
[编者按]本文作者为专注于自然语言处理多年的 Pierre-Yves Saumont,Pierre-Yves 著有30多本主讲 Java 软件开发的书籍,自2008开始供职于 Alcatel-Luce ...
- POJ3525 Most Distant Point from the Sea(半平面交)
给你一个凸多边形,问在里面距离凸边形最远的点. 方法就是二分这个距离,然后将对应的半平面沿着法向平移这个距离,然后判断是否交集为空,为空说明这个距离太大了,否则太小了,二分即可. #pragma wa ...
- UVA 562 Dividing coins
题目描述:给出一些不同面值的硬币,每个硬币只有一个.将这些硬币分成两堆,并且两堆硬币的面值和尽可能接近. 分析:将所有能够取到的面值数标记出来,然后选择最接近sum/2的两个面值 状态表示:d[j]表 ...
- UVA 11481 - Arrange the Numbers 数学
Consider this sequence {1, 2, 3, . . . , N}, as a initial sequence of first N natural numbers. You ca ...
- lintcode :First bad version 第一个错误的代码版本
题目 第一个错误的代码版本 代码库的版本号是从 1 到 n 的整数.某一天,有人提交了错误版本的代码,因此造成自身及之后版本的代码在单元测试中均出错.请找出第一个错误的版本号. 你可以通过 isBad ...
- socket异步编程--libevent的使用
使用 libevent 和 libev 提高网络应用性能 http://www.ibm.com/developerworks/cn/aix/library/au-libev/ libevent实现ht ...