HTML5 - 智能表单

浏览数：21 / 时间：2015年06月09日

智能表单

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