html5 智能表单验证
2024-05-24 02:43:59
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>HTML5智能表单</title>
<style>
#demo p{position:relative;margin:10px 0}
#demo p label{position:absolute;left:0;display:block;width:160px;font-weight:bolder}
#demo p input{width:200px;margin:0 8px 0 160px }
#demo p span{color:#555}
#demo p input[type=search]{-webkit-appearance:textfield}
</style>
</head>
<body>
<!--DEMO start-->
<div id="demo">
<form id="iform"><p><label for="email">email类型：</label><input type="email" name="email" id="email" placeholder="请输入正确mail地址" /><span>请在Opera10.5+中查看效果</span></p><p><label for="url">url类型：</label><input type="url" id="url" /><span>请在新版Opera中查看效果</span></p><p><label for="date">date类型：</label><input type="date" id="date" /><span>请在新版Opera或Chrome中查看</span></p><p><label for="time">time类型：</label><input type="time" id="time" /><span>请在新版Opera或Chrome中查看</span></p><p><label for="month">month类型：</label><input type="month" id="month" /><span>请在新版Opera或Chrome中查看</span></p><p><label for="week">week类型：</label><input type="week" id="week" /><span>请在新版Opera或Chrome中查看</span></p><p><label for="number">number类型：</label><input type="number" name="number" id="number" /><span>请在新版Opera或Chrome中查看</span></p><p><label for="range">range类型：</label><input type="range" id="range" /><span>请在新版Opera或Chrome或Safari中查看</span></p><p><label for="search">search类型：</label><input type="search" results="n" id="search" value="11"/>请在新版Chrome或Safari中查看</p><p><label for="color">color类型：</label><input type="color" id="color" /><span>请在新版Opera或Chrome中查看</span></p><p><label for="placeholder">placeholder属性：</label><input type="text" id="placeholder" placeholder="点击我会以清除" /><span>请在新版Opera或Chrome或Safari中查看</span></p><p><label for="autofocus">autofocus属性：</label><input type="text" id="autofocus" autofocus="true"/><span>请在新版Chrome或Safari中查看</span></p><p><label for="list">list属性：</label><input type="text" id="list" list="ilist"/><span>请在新版Opera中查看</span><datalist id="ilist"><option label="a" value="a"><option label="b" value="b"><option label="c" value="c"></datalist>
</p><p><label for="pattern">pattern属性：</label><input type="text" name="require2" id="pattern" placeholder="输入邮政编码" required pattern="^[1-9]\d{5}$" /><span>请在Opera10.5+中查看效果</span></p> <p><label for="require">require属性：</label><input type="text" name="require" id="require" placeholder="必填项" required /><span>请在Opera10.5+中查看效果</span></p> <p><label for="range2">pattern属性：</label><input type="range" id="range2" max="100" min="1" step="20" /><span>请在新版Opera或Chrome或Safari中查看</span></p><p><label for="sub"></label><input type="submit" id="sub" value="提交" /></p>
</form>
</div>
<!--DEMO end-->
<form action="" method="get" id=foo>
邮件<input type=email><br>
网址<input type=url><br>
日期<input type=date><br>
时间<input type=time><br>
月份<input type=month><br>周 <input type=week><br>
数字<input type=number><br>
滑动<INPUT type=range min="0" max="100" step="1"><br>
搜索<INPUT type=search value="搜索"><br>
搜索<INPUT type=color><br><input type="text" list="mydata" placeholder="热门电影排行" /><datalist id="mydata"><option label="Top1" value="让子弹飞"><option label="Top2" value="非诚勿扰2"><option label="Top3" value="大笑江湖"><option label="Top4" value="赵氏孤儿"><option label="Top5" value="初恋这件小事">
</datalist>
<br><input type="submit" value="提交">
</form>
<INPUT name="aa" value=我在id为iform的表单外 form="foo">
</body>
</html> html5 智能表单验证相关推荐
- html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
- html5 智能表单介绍
智能表单介绍 1.XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属 ...
- 知识梳理，HTML5智能表单
☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文本框自动获得焦点 注意:一个页面中最多只能 ...
- HTML5自定义表单验证错误提示信息
有如下HTML结构: <form action="ok.html"><input type="text" pattern="\d{1 ...
- HTML5 - 智能表单
智能表单 <!doctype html> <html lang="zh-CN"><head><meta charset="utf ...
- HTML5新增表单验证
HTML5新增属性: 属性 描述 placeholder 提供一种提示,输入域为空时显示,获得焦点输入内容后消失 required 规定输入域不能为空 pattern 规定验证input域的模式(正则 ...
- HTML5的表单验证属性--pattern
[转载]http://www.w3cplus.com/html5/html5-form-validation-with-the-pattern-attribute.html 转载于:https://w ...
- html5 智能表单
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
最新文章
- CentOS系统安装(上)：图形/文本界面安装
- Objective-C中的常量
- 一个退休程序员，用高中几何方法，让百年数学难题逼近理论极限
- apache php mysql是长连接吗_php关于mysql长连接问题
- 马拦过河卒(NOIP2002)
- 点是否在面内算法(Point-In-Polygon Algorithm)
- Gym 101964 2018-2019 ACM-ICPC Southeastern European Regional Programming Contest (SEERC 2018)
- 【渝粤教育】广东开放大学 刑法 形成性考核 (42)
- 【面向对象】面向对象程序设计测试题1-Java语言的发展与特性测试题
- 《C程序猿：从校园到职场》出版预告(4)：从“散兵游勇”到“正规部队”
- 关于地图制图大赛的8点说明，附地图学习资源
- od怎么解java打包的exe_关于打包java文件并生成可执行文件的问题
- VB .NET-文本文件读写
- 区块链：数字广告假量的“终结者”
- 计算机硬盘被配制成动态磁盘。在这种情况下无法进行重装？,动态磁盘转换为基本磁盘(完美解决方案)...
- docx文档怎么排列图片_腾讯、石墨、金山在线文档简单对比
- Example文件简介
- 毕业设计So Easy：基于Java Web学生选课系统
- 7.13 编程序，比较字符串大小。
- 圣诞节要到了，如何制作自己的一个给头像戴帽子的小程序，请看这