zoukankan      html  css  js  c++  java
  • 简单的祖册

    学习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 += "
    电话:";
                    str += $('phone').value;
                    str +='
    性别:';
                    str += $('man').checked ? '':'';
                    str += '
    学历:';
                    str += $('school').value;
                    alert(str);
                }
            </script>
        </body>
    </html>
  • 相关阅读:
    SQLite学习手册(开篇)
    SQLite学习手册(索引和数据分析/清理)
    SQLite学习手册(在线备份)
    SQLite学习手册(数据类型)
    SQLite学习手册(表达式)
    SQLite学习手册(C/C++接口简介)
    SQLite学习手册(命令行工具)
    (转)Graphical Execution Plans for Simple SQL Queries
    诡异的Request
    今天用windows live writer 2009写博客了
  • 原文地址:https://www.cnblogs.com/shangguancn/p/6913453.html
Copyright © 2011-2022 走看看