html5 表单元素的用法示例
<!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>
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...