<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 form 表单练习</title>
<style type="text/css">
article,aside,figure,footer,hgroup,nav{
display: block;
}
</style>
<script type="text/javascript">
document.createElement("header");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("nav");
document.createElement("footer");
</script>
<script type="text/javascript">
//当遇到不支持html5的浏览器的时候，我们需要自己来验证数据的有效性，来保证 传给后台的数据是有效的
function check(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var email = document.getElementById("email");
if(username.length>11 || username.length<4){
alert("请输入正确的username格式！");
username.setCustomValidity("用户名格式不对！");
return false;
}
else if(!/^([a-zA-Z0-9_-])+@([a-zA-A0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email.value)){
alert("Email格式不对！");
//自己定义错误信息，目前只有Opera浏览器支持
email.setCustomValidity("电子邮件格式不对！");
return false;
}
}
</script>
</head>
<body>
<div id="wrapper">
<section>
<article>
<!-- 保存的数据，显示的时候通过元素的list属性来引用，类型与select下拉列表的形式-->
<datalist id="user_names" style="display:none">
<option value="Nick">Nick</option>
<option value="Jobe">Jobe</option>
<option value="Lili">Lili</option>
<option value="Lucy">Lucy</option>
<option value="Henny">Henny</option>
</datalist>
<form id="reg_form" action="#" method="post" onSubmit="check();">
<label for="username">用户名：</label>
<input type="text" list="user_names" id="username" required autocomplete="on" pattern="[0-9a-zA-Z]{3,11}" placeholder="用户名" ></br>
<label for="password">密 码：</label>
<input type="password" id="password"/> </br>
<label for="email">邮 箱：</label>
<input type="text" id="email" required autofocus/></br>
<label for="birthday">生 日：</label>
<input type="date"/></br>
<input type="submit" value="提交"/>
</form>
</article>
</section>
</div>
</body>
</html>
分享到：
相关推荐
本文实例讲述了JavaScript实现动态添加Form表单元素的方法。分享给大家供大家参考，具体如下： 之前写过类似的文章（如：javascript实现的动态添加表单元素input,button等）,现在看来比较初级,弄一个高级的简单的 ...
HTML5对表单元素提供了patern属性，它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值，如果控件的值不匹配这个正则表达就会弹出提示框，并阻止表达提交。提示框内的文字可以使用...
Amazon畅销书，被翻译成西班牙语等多种文字，广受好评，被誉为HTML5领域的...第14章讲解了HTML5中Web Workers的使用方法和实现原理，以及它的API；第15章和第16章介绍了HTML5中的历史接口和脱机功能，以及它们的API。
在HTML5 中，在增加了大量的表单元素与属性的同时，也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能，接下来我们来讲一下自动验证。 在Html5中，通过对元素使用属性的方法，可以实现在表单提交...
为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用，并以大量的示例涵盖全部HTML5 API。此外，还介绍...
从第2 章起，分别围绕构建令人神往的富web 应用，逐一讨论了html5 的canvas、geolocation 、communication、websocket、forms、web workers、storage 等api 的使用， 辅以直观明了的客户端和服务器端示例代码，让...
为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用，并以大量的示例涵盖全部HTML5 API。此外，还介绍...
output 元素 output 元素 01 output 元素 <output> 标记定义不同类型的输出（比如脚本的输出）执行计算然后在 <output> 标记中显示结果 ...熟知output元素的用法 掌握output元素书写形式并熟练运用 总结 THANKS
为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用，并以大量的示例涵盖全部HTML5 API。此外，还介绍...
从第 2章起，分别围绕构建令人神往的富Web 应用，逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用，辅以直观明了的客户端和服务器端示例代码，让开发人员...
为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用，并以大量的示例涵盖全部HTML5 API。此外，还介绍...
代替自己创建这些元素，你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。 你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为...
为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用，并以大量的示例涵盖全部HTML5 API。此外，还介绍...
为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用，并以大量的示例涵盖全部HTML5 API。此外，还介绍...
为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用，并以大量的示例涵盖全部HTML5 API。此外，还介绍...
为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用，并以大量的示例涵盖全部HTML5 API。此外，还介绍...
为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用，并以大量的示例涵盖全部HTML5 API。此外，还介绍...
nojs.css HTML 表单元素的纯 CSS 方法演示构建要求建造sass nojs.scss > nojs.css 用examples.html文件包含如何使用每个组件的示例。 它期望在同一目录中存在nojs.css文件。浏览器兼容性nojs.css 已经在以下浏览器中...
2.4.html 逻辑运算符使用方法。 2.5.html 位运算符使用方法。 2.6.html 赋值运算符使用方法。 2.7.html 条件运算符使用方法。 2.8.html 位操作运算符使用方法。 2.9.html 字符串运算符用法...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括...