您的位置：首页 > Web前端 > HTML5

HTML5 - 智能表单

2015-04-28 00:15 351 查看

<!doctype html>

<html lang="zh-CN">

<head>

<meta charset="utf-8" />

<title>智能表单</title>

<style>

body{ line-height:25px;}

</style>

<script>

//对用户提交的表单进行校验

function checkInput(){

var flag=false;

var username=$("username").value;

var pwd=$("pwd").value;

var email=$("email").value;

if(username==""){

alert("用户名不能为空！");

}else if(username.length<3){

alert("用户名长度必须大于3！");

}else if(pwd.length<6||pwd.length>14){

alert("密码长度必须在6-14之间！");

}else if(email.indexOf("@")==-1){

alert("邮箱格式不正确！");

}else{

flag=true;

}

return flag;

}

function $(id){

return document.getElementById(id);

}

</script>

<head>

<body>

<form action="login.html" method="post" id="register">

</form>

用户名：<input type="text" name="username" form="register" id="username" placeholder="请输入用户名" pattern="u\d{4}" autocomplete="off"/><br/>

密码：<input type="password" name="pwd" form="register" id="pwd"/><br/>

邮箱：<input type="email" name="email" form="register" id="email" required /><br/>

URL：<input type="url" name="url" form="register" /><br/>

日期：<input type="date" name="date" form="register" /><br/>

时间：<input type="time" name="time" form="register" /><br/>

月份：<input type="month" name="month" form="register" /><br/>

星期：<input type="week" name="week" form="register" /><br/>

数字：<input type="number" name="number" min="1" max="10" step="2" form="register" autofocus/><br/>

滚动条：<input type="range" name="range" min="1" max="10" form="register"/><br/>

搜索：<input type="search" name="search" results="n" form="register" /><br/>

颜色：<input type="color" name="color" form="register"/><br/>

学历：<input type="text" name="degree" form="register" list="degree"/><br/>

<datalist id="degree">

<option>大专</option>

<option>本科</option>

<option>研究生</option>

</datalist>

<input type="submit" value="登陆" form="register" />

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML5

相关文章推荐

新的分享

章节导航