简单的祖册

学习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>
复制代码

 

posted @   上官靖宇  阅读(261)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示