HTML5 - 智能表单

最新推荐文章于 2022-04-23 15:34:14 发布

wsxlgg

最新推荐文章于 2022-04-23 15:34:14 发布

阅读量521

点赞数

分类专栏： html5 文章标签： HTML5

本文链接：https://blog.csdn.net/shangdi1988/article/details/45322691

版权

html5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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>