首页 > 代码库 > 简单的祖册

简单的祖册

2024-09-26 14:23:39   216人阅读

学习JavaScript，练习其中的案例

一个简单的注册

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            table {
                margin: 20px auto;
                background: rgba(126,126,126,.8);
                text-align: center;
            }
            table tr td {
                padding: 3px;
                background: #fff;
            }
            table tr td:first-child {
                text-align: left;
            }
            table tr:last-child td:first-child {
                text-align: center;
            }
            input[type="text"],
            input[type="password"] {
                border: 1px solid #ccc;
                border-radius: 4px;
                padding: 8px 5px;
                outline: none;
            }
            select {
                width: 100px;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>姓名</td>
                <td><input type="text" name="username" id="username" placeholder="请输入用户名" /></td>
            </tr>
            <tr>
                <td>电话</td>
                <td><input type="text" name="phone" id="phone" placeholder="请输入电话" /></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="pass" id="pass" /></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="password" name="apass" id="apass" onblur="checkPass()" /></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" id="man" value="男" /><label for="man">男</label>
                    <input type="radio" name="sex" id="women" value="女" /><label for="women">女</label>
                </td>
            </tr>
            <tr>
                <td>学历</td>
                <td>
                    <select name="school" id="school">
                        <option value="大学">大学</option>
                        <option value="高中">高中</option>
                        <option value="初中">初中</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" name="submit" id="submit" value="提交" onclick="getId()" />
                    <input type="reset" name="reset" id="reset" value="重置" />
                </td>
            </tr>
        </table>
        
        
        <script type="text/javascript">
            function $(id){
                return document.getElementById(id);
            }
            function checkPass(){
                var o = ($(‘pass‘).value == $(‘apass‘).value);
                if (o) {
                    return true;
                } else{
                    alert("密码不一致");
                    return false;
                }
                o = null;
            }
            function getId(){
                var str = ‘‘;
                str += "用户名：";
                str += $(‘username‘).value;
                str += "\n电话：";
                str += $(‘phone‘).value;
                str +=‘\n性别：‘;
                str += $(‘man‘).checked ? ‘男‘:‘女‘;
                str += ‘\n学历：‘;
                str += $(‘school‘).value;
                alert(str);
            }
        </script>
    </body>
</html>

 

简单的祖册


联系
我们