HTML5 - 智能表单

来源：互联网发布：查看网络连接命令编辑：程序博客网时间：2024/06/16 18:13
智能表单

<!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>
0 0