HTML5 对于表单的增强 Demo-阿里云开发者社区

HTML5 对于表单的增强 Demo

2017-11-15 1008

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

HTML5对表单有了极大的增强，不仅加了很多表单属性而且加了许多类型的表单元素，

下面例子就对所有新增的表单属性和表单元素做了一个演示

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/common.css" type="text/css">
<script type="text/javascript" src="js/validateform.js"></script>
<meta charset="UTF-8">
<title>HTML5 表单DEMO</title>
</head>
<h3>Part1：新增的input 元素的属性</h3><br>
<form method="post" action="action1.jsp">
实验1：demo 文本框的placeholder属性，这个属性可以用于未输入状态时的文本提示 <br>
输入textfield:<input type="text" placeholder="请输入内容到文本框" />
<br><br>
实验2：demo autofocus属性，这个属性可以让某控件自动获得焦点<br>
输入搜索文本:<input type='search' autofocus/>
<br><br>
实验3：demo list属性，这个属性可以和datalist配合，当用户获得焦点时候给用户提示<br>
输入文本（有提示哦）：<input type="text" name="charles" list="charles info" >
<datalist id="charles info" stype="display:none;">
<option value="charles wang">charles wang</option>
<option value="charles_wang888">charles_wang888</option>
<option value="charles王子">charles王子</option>
</datalist>
<br><br>
</form>
<hr>
<h3>Part2：新增的input 元素的类型</h3><br>
<form method="post" action="action2.jsp">
输入url: <input name="url1" type="url" size="60" value="http://www.sina.com.cn"/>
<br><br>
输入邮箱地址:<input name="email1" type="email" size="60" value="charles_wang888@126.com" pattern="^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"/>
<br><br>
选择大好时间：<input name="datetime1" type="datetime" required="true"/>
<br><br>
输入数字:<input name="number1" type="number" value="25" min="10" max="25" step="5"/>
<br><br>
选择数值：<input name="range1" type="range" value="25" min="0" max="100" step="5"/>
<br><br>
<input type="submit"/>
</form>

最后效果图是：

部分控件比如<date> <datetime> <range>控件在Firefox 11上不支持，所以我的截图是用的Opera 11浏览器的截图

本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/853312，如需转载请自行联系原作者

HTML5 对于表单的增强 Demo

热门文章

最新文章

相关课程

相关电子书

相关实验场景