html5新标签

标签：

<div class="wrap">
   <form class="main form-horizontal"  action="main/active"  onsubmit="return check();">
        <fieldset>
            <legend>修改密码</legend>
           
             <div class="control-group">
                <label class="control-label">用户名</label>
                <div class="controls">
                    <input id="userName" name="pwd" type="password" placeholder="" class="input-xlarge"
                        required onchange="checkPasswords()">
                </div>
            </div>
           
            <div class="control-group">
                <label class="control-label">旧密码</label>
                <div class="controls">
                    <input id="oldPwd" name="pwd" type="password" placeholder="" class="input-xlarge"
                        required onchange="checkPasswords()">
                </div>
            </div>
           
            <div class="control-group">
                <label class="control-label"> 新密码</label>
                <div class="controls">
                    <input id="newPwd" name="pwd1" type="password" placeholder="" class="input-xlarge"
                        required onchange="checkPasswords()">
                </div>
            </div>
           
             <div class="control-group">
                <label class="control-label"> 确认密码</label>
                <div class="controls">
                    <input id="fnlPwd" name="pwd1" type="password" placeholder="" class="input-xlarge"
                        required onchange="checkPasswords()">
                </div>
            </div>
            
            <div class="control-group">
                <label class="control-label">
                </label>
                <div class="controls">
                     <button type="submit" id="submit-set" class="btn btn-default">提交</button>
                     <button class="btn" type="reset"> 重 置</button>
                </div>
            </div>
        </fieldset>
        </form>
     </div>

   
    <style>
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .form-horizontal .control-group
        {
            margin-bottom: 16px;
        }
        .wrap
        {
            height: 100%;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
            overflow: auto;
        }
        .main
        {
            width: 600px;
        }
        .info
        {
            margin-bottom: 20px;
            font-size: 21px;
            line-height: 40px;
            color: #333;
            border: 0;
            border-bottom: 1px solid #e5e5e5;
        }
    </style> 

<script>
        function checkPasswords() {
            var passl = document.getElementById("fnlPwd");
            var pass2 = document.getElementById("newPwd");
            if (passl.value != pass2.value)
                passl.setCustomValidity("两次密码必须输入一致！");
            else
                passl.setCustomValidity(‘‘);
        }

        function check() {
            document.getElementById("submit-set").disabled = ‘disabled‘;
        }
    </script>

html5新标签

标签：

原文地址：http://my.oschina.net/lizy/blog/510570