HTML5的表单(绝对特别强大的功能)使用示例


Posted in HTML / CSS onJune 20, 2013

1、邮箱的自动验证 只需要type=“email”
2、日期的验证(年月日):type="date"
3、时间的验证(格式:00:00):type="time"
4、数字的验证 (可以向上加 向下减)type="number"
5、月份(--年--月)type="month"
6、周(--年--周)type="week"
7、range(范围0-100) type="range"
8、search type="search"
9、颜色的颜色大全:type="color"
10、url验证 (必须前面有http://---) type="url"

复制代码
代码如下:

<form action="Myform.php" id='Myform' method='post'>
邮箱:<input type="email" id='email' required="required" /><br/>
日期:<input type="date" id='date' /><br/>
时间:<input type="time" id='time' /><br/>
数字:<input type="number" id='number' /><br/>
月份:<input type="month" id='month' /><br/>
星期:<input type="week" id='week'/><br/>
range:<input type="range" id='range' /><br/>
search:<input type="search" id='search'/><br/>
颜色:<input type="color" id='color' /><br/>
<input type="text" name="auto" value="" list="movie"/>
<datalist id="movie">
<option>呵呵呵</option>
<option>喂喂喂</option>
<option>嘿嘿嘿</option>
</datalist>
<input type="submit" value="提交"/>
</form>
url:<input type="url" id='url' required="required" name="url" form="Myform" /><br/>
用户名:<input type="text" required="required" placeholder="请输入用户名" form="Myform" autofocus="autofocus" pattern='\w{5}'/>

html新增表单属性
1、required=“required” 验证时 需要必填
2、placeholder="请输入用户名" 默认值,给用户提示的,不是提交到服务器的
3、autofocus="autofocus" 自动聚焦功能,提升用户友好
4、pattern='\w{5}' 在html元素中填写正则表达式
在表单之外也可以提交表单 但是需要 在<input form="Myform"/>中 form=“Myform”需要和form表单中的id的值相等即:<form id="Myform"></form>
自动填充表单:(效果感觉要比下拉列表好多了 而且感觉效果挺好的)list的值要和datalist中的id的值相等这样才能识别到我要显示你的内容:
复制代码
代码如下:

<input type="text" name="auto" value="" list="movie"/>
<datalist id="movie">
<option>呵呵呵</option>
<option>喂喂喂</option>
<option>嘿嘿嘿</option>
</datalist>

贴图一张:
HTML5的表单(绝对特别强大的功能)使用示例
HTML / CSS 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 #HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 #HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 #HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 #HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 #HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 #HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 #HTML / CSS
You might like
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
Python中的作用域规则详解
2015/01/30 Python
Python中动态创建类实例的方法
2017/03/24 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
财务管理专业自荐信范文
2013/12/24 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
商铺租赁意向书
2014/04/01 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL