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 相关文章推荐
手把手教你用纯css3实现轮播图效果实例
May 04 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
详解flex:1什么意思
Jul 23 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安全配置
2006/10/09 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php DES加密算法实例分析
2019/09/18 PHP
DEFER怎么用?
2006/07/01 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
浅析Ajax语法
2016/12/05 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
python分析作业提交情况
2017/11/22 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
大学生入党思想汇报
2014/01/01 职场文书
运动会口号8字
2014/06/07 职场文书
环保标语口号
2014/06/13 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
配置nginx负载均衡
2022/05/06 Servers
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python