master

分支 (2)

管理

管理

master

dev

hdjs
/
index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后盾网HDJS前端库</title>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shCore.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushDelphi.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushDiff.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushGroovy.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushPlain.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushRuby.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushScala.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushVb.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="Dev/SyntaxHighlighter/styles/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="Dev/SyntaxHighlighter/styles/shThemeDefault.css"/>
    <script type="text/javascript">
        SyntaxHighlighter.config.clipboardSwf = 'Dev/SyntaxHighlighter/scripts/clipboard.swf';
        SyntaxHighlighter.all();
    </script>
    <script type="text/javascript" src="Dev/jquery-1.8.2.min.js"></script>

    <link rel="stylesheet" href="Dev/base/base.css"/>
    <link rel="stylesheet" href="Dev/btn/btn.css"/>
    <link rel="stylesheet" href="Dev/size/size.css"/>

    <link rel="stylesheet" href="Dev/table/table.css"/>
    <link rel="stylesheet" href="Dev/menu-list/menu-list.css"/>

    <link rel="stylesheet" href="Dev/form/form.css"/>
    <script type="text/javascript" src="Dev/form/form.js"></script>

    <link rel="stylesheet" href="Dev/confirm/confirm.css"/>
    <script type="text/javascript" src="Dev/confirm/confirm.js"></script>

    <link rel="stylesheet" href="Dev/alert/alert.css"/>
    <script type="text/javascript" src="Dev/alert/alert.js"></script>

    <link rel="stylesheet" href="Dev/tab/tab.css"/>
    <script type="text/javascript" src="Dev/tab/tab.js"></script>

    <script type="text/javascript" src="Dev/slide/slide.js"></script>

    <script type="text/javascript" src="Dev/ajax/ajax.js"></script>

    <script type="text/javascript" src="Dev/cookie/cookie.js"></script>

    <link rel="stylesheet" href="Dev/modal/modal.css"/>
    <script type="text/javascript" src="Dev/modal/modal.js"></script>

    <link rel="stylesheet" href="Dev/page/page.css"/>

    <link rel="stylesheet" href="Dev/validate/validate.css"/>
    <script type="text/javascript" src="Dev/validate/validate.js"></script>

    <script type="text/javascript" src="Dev/cal/lhgcalendar.min.js"></script>
    <script>
        /**
         * 自动复制高亮部分代码
         */
        $(function () {
            $('.code').each(function (i) {
                var html = $(this).html();
                $(this).prev('pre').text(html);
            })
        })
        /**
         * 显示或隐藏高亮代码
         */
        $(function () {
            $('.show-code').toggle(function () {
                $(this).parent().next('div.syntaxhighlighter').show();
            }, function () {
                $(this).parent().next('div.syntaxhighlighter').hide();
            })
        })
    </script>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1 class="big-title">后盾网HDJS前端库</h1>

<div id="menu">
    <a href="#btn">按钮样式</a>
    <a href="#size">尺寸</a>
    <a href="#float">浮动与清除</a>
    <a href="#table-form">表单表格</a>
    <a href="#table-list">列表表格</a>
    <a href="#title-header">标题块 </a>
    <a href="#menu-nav">菜单导航</a>
    <a href="#alert">气泡提示 </a>
    <a href="#tab">Tab面板</a>
    <a href="#slide">轮换版</a>
    <a href="#modal">模态框</a>
    <a href="#ajax">Ajax请求</a>
    <a href="#hd_submit">表单提交</a>
    <a href="#cookie">Cookie</a>
    <a href="#checkbox">全选&反选</a>
    <a href="#validate">表单验证</a>
    <a href="#page">分页样式</a>
    <a href="#SyntaxHighlighter">代码高亮(单独下载)</a>
    <a href="#cal">日历(单独下载)</a>
</div>
<!--------------------------------------------------------------------------------------------->
<h2>按钮样式 <a href="javascript:;" class="show-code" name="btn">Code</a></h2>
<pre class="brush: html;"></pre>
<!--按钮Start-->
<div class="code">
    <button class="hd-btn hd-btn-primary hd-btn-lg">Large button</button>
    <button class="hd-btn hd-btn-danger hd-btn-lg">Large button</button>
    <button class="hd-btn hd-btn-success hd-btn-lg">Large button</button>
    <button class="hd-btn hd-btn-default hd-btn-lg">Large button</button>
    <br/><br/>

    <button class="hd-btn hd-btn-primary">Default button</button>
    <button class="hd-btn hd-btn-danger">Default button</button>
    <button class="hd-btn hd-btn-success">Default button</button>
    <button class="hd-btn hd-btn-default">Default button</button>
    <br/><br/>

    <button class="hd-btn hd-btn-primary hd-btn-sm">Small button</button>
    <button class="hd-btn hd-btn-danger hd-btn-sm">Small button</button>
    <button class="hd-btn hd-btn-success hd-btn-sm">Small button</button>
    <button class="hd-btn hd-btn-default hd-btn-sm">Small button</button>
    <br/><br/>

    <button class="hd-btn hd-btn-primary hd-btn-xm">Extra small button</button>
    <button class="hd-btn hd-btn-danger hd-btn-xm">Extra small button</button>
    <button class="hd-btn hd-btn-success hd-btn-xm">Extra small button</button>
    <button class="hd-btn hd-btn-default hd-btn-xm">Extra small button</button>
    <br/><br/>
</div>
<!--按钮End-->
<!--尺寸Start-->
<h2>尺寸 <a href="javascript:;" class="show-code" name="size">Code</a></h2>
<pre class="brush: html;"></pre>
<div class="code">
    <textarea class='hd-w800 hd-h100'></textarea>
</div>
<p>
    hdjs中定义了常用的宽度与高度，比如使用class='hd-w100'表示设置宽度为100px.
    从10px到500px以10px为间隔，从500px到1000px是以50px为间隔。
</p>

<!--------------------------------------------------------------------------------------------->

<!--------------------------------------------------------------------------------------------->
<h2>分页样式 <a href="javascript:;" class="show-code" name="page">Code</a></h2>
<pre class="brush: html;"></pre>
<!--分页样式-->
<div class="code">
    <div class="hd-page">
        <span class="count">[共6页] [11条记录]</span>
        <a href="#" class="pre">上一页</a>
        <a href="#">1</a>
        <strong class="selfpage">2</strong>
        <a href="#">3</a>
        <a href="#">4</a>
        <span class="close">下一页</span>
        <span class="nowPage">第3-4条</span>
        <select name="page" class="page_select" onchange="
		javascript:location.href=this.options[selectedIndex].value;">
            <option value="#">1</option>
            <option value="#">2</option>
        </select>
        <input name="page" class="pageinput" type="text">
        <button class="pagebt">进入</button>
        <a href="#" class="picList">&gt;</a>
        <a href="#" class="picList">&gt;&gt;</a>
    </div>
</div>
<!--分页样式-->
<!--------------------------------------------------------------------------------------------->

<!--------------------------------------------------------------------------------------------->
<!--浮动样式-->
<h2>浮动与清除 <a href="javascript:;" name="float"></a></h2>

<p>
    左浮动：class='hd-float-left'，右浮动：class='hd-float-right'，清除浮动：class='hd-float-clean'
</p>
<!--------------------------------------------------------------------------------------------->
<!--表格与表单Start-->
<h2>表单表格 <a href="javascript:;" class="show-code" name="table-form">Code</a></h2>
<pre class="brush: html;"></pre>
<div class="code">
    <table class="hd-table hd-table-form hd-form">
        <thead>
        <tr>
            <td colspan="2">文章发表</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th width="100">列表框</th>
            <td>
                <select name="pid">
                    <option value="0">后盾网PHP培训</option>
                    <option value="1">HDJS前端库</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>文本框</th>
            <td>
                <input type="text"/>
            </td>
        </tr>
        <tr>
            <th>文本域</th>
            <td>
                <textarea name="" class="hd-w500 hd-h280"></textarea>
            </td>
        </tr>
        <tr>
            <th>单选框</th>
            <td>
                <label><input type="radio" name="sex" value="boy"/> 男</label>
                <label><input type="radio" name="sex" value="girl"/> 女</label>
            </td>
        </tr>
        <tr>
            <th>复选框</th>
            <td>
                <label><input type="checkbox" name="sex"/> 加油</label>
                <label><input type="checkbox" name="sex"/> 喜欢</label>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--------------------------------------------------------------------------------------------->
<!--表格与表单End-->
<!--.hd-table-list列表表格Start-->
<h2>列表表格 <a href="javascript:;" class="show-code" name="table-list">Code</a></h2>
<pre class="brush: html;"></pre>
<div class="code">
    <table class="hd-table hd-table-list">
        <thead>
        <tr>
            <td>ID</td>
            <td>标题</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>
                后盾网 人人做后盾
            </td>
            <td class="hd-w100">
                <a href="#">修改</a> |
                <a href="#">添加</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--------------------------------------------------------------------------------------------->
<!--.hd-table-list列表表格End-->
<h2>标题块 <a href="javascript:;" class="show-code" name="title-header">Code</a></h2>
<pre class="brush: html;"></pre>
<div class="code">
    <div class="hd-title-header">
        hd-title-header
    </div>
</div>
<!--------------------------------------------------------------------------------------------->
<h2>菜单导航 <a href="javascript:;" class="show-code" name="menu-nav">Code</a></h2>
<pre class="brush: html;"></pre>
<div class="code">
    <div class="hd-menu-list">
        <ul>
            <li class="active"><a href="#">栏目列表</a></li>
            <li><a href="#">添加栏目</a></li>
            <li><a href="#">更新栏目缓存</a></li>
        </ul>
    </div>
</div>

<!--------------------------------------------------------------------------------------------->
<h2>气泡提示 <a href="javascript:;" class="show-code" name="alert">Code</a></h2>
<pre class="brush: html;"></pre>
<div class="code">
    <a href="javascript:hd_alert_test();">弹出气泡</a>
    <script type="text/javascript">
        //气泡提示信息实例
        function hd_alert_test() {
            hd_alert({
                message: '欢迎你',//显示内容
                timeout: 3,//显示时间
                success: function () {//这是回调函数

                }
            })
        }
    </script>
</div>
<!--------------------------------------------------------------------------------------------->
<h2>Tab面板 <a href="javascript:;" class="show-code" name="tab">Code</a></h2>
<pre class="brush: html;"></pre>
<div class="code">
    <div class="hd-tab">
        <ul class="hd-tab-menu">
            <li lab="base" class="active">
                <a> 基本设置 </a>
            </li>
            <li lab="tpl">
                <a>后盾网教师管理 </a>
            </li>
        </ul>
        <div class="hd-tab-content">
            <div lab='base' class="hd-tab-area">
                <table class="hd-form hd-table hd-table-form">
                    <tr>
                        <th class="hd-w100">标题</th>
                        <td>
                            <input type="text" name="title"/>
                        </td>
                    </tr>
                    <tr>
                        <th>作者</th>
                        <td>
                            <input type="text" name="author"/>
                        </td>
                    </tr>
                </table>
            </div>
            <div lab="tpl" class="hd-tab-area">
                <textarea class="hd-w500 hd-h100"></textarea>
            </div>
        </div>
    </div>
</div>
<!--------------------------------------------------------------------------------------------->
<h2>轮换版 <a href="javascript:;" class="show-code" name="slide">Code</a></h2>
<pre class="brush: html;"></pre>
<div class="code">
    <div id="slide">
        <a href="http://www.hdphp.com" title="后盾网 人人做后盾"><img src="Dev/slide/1.jpg"/></a>
        <a href="http://www.hdphp.com" title="HDJS 前端开发利器"><img src="Dev/slide/2.jpg"/></a>
    </div>
    <script>
        $(function () {
            $('#slide').slide({
                width: 278,//宽度
                height: 350,//高度
                timeout: 3,//间隔时间
                bgcolor: '#1B2527',//背景颜色
                bgopacity: 0.9,//背景透明度
                textColor: '#ddd'//文字颜色
            });
        })
    </script>
</div>
<!--------------------------------------------------------------------------------------------->
<h2>日历插件 <a href="javascript:;" class="show-code" name="cal">Code</a>
    <a href="./Dev/cal/cal.zip">download</a>
</h2>
<pre class="brush: html;"></pre>
<div class="code">
    <script src='Dev/cal/lhgcalendar.min.js'></script>
    <input type="text" readonly="readonly" id="updatetime" name="updatetime" class="hd-w150"/>
    <script>
        $(function () {
            $('#updatetime').calendar({format: 'yyyy/MM/dd HH:mm:ss'});
        })
    </script>
</div>
<!--------------------------------------------------------------------------------------------->
<h2>模态框 <a href="javascript:;" class="show-code" name="modal">Code</a></h2>
<pre class="brush: html;"></pre>
<div class="code">
    <a href="javascript:hd_modal_test();">显示模态框</a>
    <script>
        function hd_modal_test() {
            hd_modal({
                width: 600,//宽度
                height: 300,//高度
                title: '提示',//标题
                content: '这是显示内容',//提示信息
                button: true,//显示按钮
                button_success: "确定",//确定按钮文字
                button_cancel: "关闭",//关闭按钮文字
                timeout: 0,//自动关闭时间 0：不自动关闭
                shade: true,//背景遮罩
                shadeOpacity: 0.2,//背景透明度
                success: function () {//点击确定后的事件

                },
                cancel: function () {//点击关闭后的事件

                }
            });
        }
    </script>
</div>
<p>
    函数hd_remove_model()删除模态框
</p>
<!--------------------------------------------------------------------------------------------->
<h2>Ajax请求 <a href="javascript:;" class="show-code" name="ajax">Code</a></h2>
<pre class="brush: html;"></pre>
<div class="code">
    <a href="javascript:ajax_test();">Ajax请求</a>
    <script>
        function ajax_test() {
            /**
             * 3个参数说明
             * a) 请求地址
             * b) 数据
             * c) 请求后跳转地址,为空时不跳转
             * d) 气泡信息停留时间
             *
             * 服务器脚本必须返回JSON数据
             * JSON数据为:
             * status：状态码 1 成功 0：失败
             * message:提示信息
             */
            hd_ajax('Dev/ajax/test.php', {name: '后盾网'}, 'http://www.hdphp.com',2);
        }
    </script>
</div>
<!--------------------------------------------------------------------------------------------->
<h2>Ajax提交表单 <a href="javascript:;" class="show-code" name="hd_submit">Code</a></h2>
<pre class="brush: html;"></pre>
<div class="code">
    <!--
     * hd_submit个参数说明
     * a) 必须为this
     * b) 数据
     * c) 请求后跳转地址,为空时不跳转
     * d) 气泡信息停留时间
     *
     * 服务器脚本必须返回JSON数据
     * JSON数据为:
     * status：状态码 1 成功 0：失败
     * message:提示信息
     *-->
    <form onsubmit="return hd_submit(this,'Dev/ajax/test.php','http://bbs.houdunwang.com',2)">
        <input type="text" name="title"/><br/>
        <input type="submit" class="hd-btn hd-btn-xm hd-btn-primary"/>
    </form>
</div>
<!--------------------------------------------------------------------------------------------->
<h2>Cookie操作 <a href="javascript:;" class="show-code" name="cookie">Code</a></h2>
<pre class="brush: html;"></pre>

<div class="code">
    <script>
        /**
         * 设置Cookie
         */
        cookie.set('变量名', '值', '过期时间')
        /**
         * 获取Cookie
         */
        cookie.get('变量名')
        /**
         * 删除Cookie
         */
        cookie.del('变量名')
    </script>
</div>
<p>hd_cookie函数可以非常方便的对COOKIE进行设置、获取、删除等操作。</p>

<!--------------------------------------------------------------------------------------------->
<h2>全选&反选 <a href="javascript:;" class="show-code" name="checkbox">Code</a></h2>
<pre class="brush: html;"></pre>

<div class="code">
    <a href="javascript:hd_select_all('.code')">全选</a>
    <a href="javascript:hd_reverse_select('.code')">反选</a><br/>
    <label><input type="checkbox"/> 篮球</label>
    <label><input type="checkbox"/> 排球</label>
    <label><input type="checkbox"/> 网球</label>
    <label><input type="checkbox" checked=""/> 羽毛球</label>
</div>
<!--------------------------------------------------------------------------------------------->
<h2>代码高亮 <a href="javascript:;" class="show-code" name="SyntaxHighlighter">Code</a>
    <a href="./Dev/btn/SyntaxHighlighter.zip">download</a>
</h2>
<pre class="brush: html;">

</pre>
<div class="code">
    <!--
        根据需要选择相应的语言包
        shCore.js与css文件必须加载
    -->
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shCore.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushDelphi.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushDiff.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushGroovy.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushPlain.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushRuby.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushScala.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushVb.js"></script>
    <script type="text/javascript" src="Dev/SyntaxHighlighter/scripts/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="Dev/SyntaxHighlighter/styles/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="Dev/SyntaxHighlighter/styles/shThemeDefault.css"/>
    <script type="text/javascript">
        SyntaxHighlighter.config.clipboardSwf = 'Dev/SyntaxHighlighter/scripts/clipboard.swf';
        SyntaxHighlighter.all();
    </script>
</div>
<!--------------------------------------------------------------------------------------------->
<h2>表单验证 <a href="javascript:;" class="show-code" name="validate">Code</a></h2>
<pre class="brush: html;"></pre>
<div class="code">
<!--表单验证Start-->
<script>
    $(function () {
        $('#HDJS').validate({
            username: {
                rule: {
                    required: true
                },
                error: {
                    required: '用户名不能为空'
                },
                success: '验证通过',
                message: '请输入用户名'
            },
            email: {
                rule: {
                    required: true,
                    email: true
                },
                error: {
                    required: '邮箱不能为空',
                    email: '邮箱不正确'
                },
                success: '输入正确',
                message: '请输入邮箱'
            },
            web: {
                rule: {
                    http: true
                },
                error: {
                    http: '网址格式不正确'
                },
                success: '网址正确'
            },
            mobile: {
                rule: {
                    phone: true
                },
                error: {
                    phone: '手机号错误'
                }
            },
            tel: {
                rule: {
                    tel: true
                },
                error: {
                    tel: '电话号错误'
                }
            },
            identity: {
                rule: {
                    identity: true
                },
                error: {
                    identity: '身份证号错误'
                }
            },
            chinaName: {
                rule: {
                    china: true
                },
                error: {
                    china: '不是中文哟'
                }
            },
            qq: {
                rule: {
                    qq: true
                },
                error: {
                    qq: 'QQ号错了'
                }
            },
            maxlen: {
                rule: {
                    maxlen: 10
                },
                error: {
                    maxlen: '超过10位啦'
                }
            },
            minlen: {
                rule: {
                    minlen: 5
                },
                error: {
                    minlen: '不能小于5位'
                }
            },
            num: {
                rule: {
                    num: '5,10'
                },
                error: {
                    num: '输入5~10间的数字'
                }
            },
            regexp: {
                rule: {
                    regexp: /^[1-9]{2}$/
                },
                error: {
                    regexp: '不是2位数字'
                }
            },
            password: {
                rule: {
                    required: true,
                    confirm: 'cpassword'
                },
                error: {
                    required: '密码不能为空',
                    confirm: '两次密码不一致'
                }
            },
            sex: {
                rule: {
                    required: true
                },
                error: {
                    required: '请选择性别'
                }
            },
            mood: {
                rule: {
                    required: true
                },
                error: {
                    required: '你的心情？'
                }
            },
            website: {
                rule: {
                    required: true
                },
                error: {
                    required: '你还没选网站呢？'
                }
            },
            webname: {
                rule: {
                    required:true,
                    ajax:{url:'Dev/validate/ajaxCheck.php'}
                },
                error: {
                    required: '网址不能为空',
                    ajax:'网址输入错了'
                },
                success:'你答对了'
            }
        })
    })
</script>
<!--表单验证End-->
<form id="HDJS" action="" method="post">
    <table class="hd-form hd-table hd-table-form">
        <thead>
        <tr>
            <td colspan="2">文章发表</td>
        </tr>
        </thead>
        <tbody>

        <tr>
            <th class="hd-w150">姓名</th>
            <td>
                <input type="text" name="username">
            </td>
        </tr>
        <tr>
            <th>邮箱</th>
            <td>
                <input type="text" name="email">
            </td>
        </tr>
        <tr>
            <th class="hd-w150">喜欢的网站</th>
            <td>
                <select name="website">
                    <option value="">是哪个？</option>
                    <option value="1">houdunwang.com</option>
                    <option value="2">hdphp.com</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>网站</th>
            <td>
                <input type="text" name="web">
            </td>
        </tr>
        <tr>
            <th>手机</th>
            <td>
                <input type="text" name="mobile">
            </td>
        </tr>
        <tr>
            <th>坐机</th>
            <td>
                <input type="text" name="tel">
            </td>
        </tr>
        <tr>
            <th>身份证</th>
            <td>
                <input type="text" name="identity">
            </td>
        </tr>
        <tr>
            <th>中文或英文</th>
            <td>
                <input type="text" name="chinaName">
            </td>
        </tr>
        <tr>
            <th>QQ号</th>
            <td>
                <input type="text" name="qq">
            </td>
        </tr>
        <tr>
            <th>不超过10位</th>
            <td>
                <input type="text" name="maxlen">
            </td>
        </tr>
        <tr>
            <th>不小于5位</th>
            <td>
                <input type="text" name="minlen">
            </td>
        </tr>
        <tr>
            <th>5~10的数</th>
            <td>
                <input type="text" name="num">
            </td>
        </tr>
        <tr>
            <th>正则验证 必须为2位数字</th>
            <td>
                <input type="text" name="regexp">
            </td>
        </tr>
        <tr>
            <th>密码</th>
            <td>
                <input type="text" name="password">
            </td>
        </tr>
        <tr>
            <th>确认密码</th>
            <td>
                <input type="text" name="cpassword">
            </td>
        </tr>
        <tr>
            <th>性别</th>
            <td>
                <label><input name="sex" type="radio" value="boy"> 男</label>
                <label><input name="sex" type="radio" value="girl"> 女</label>
                <span id="hd_sex"></span>
            </td>
        </tr>
        <tr>
            <th>心情</th>
            <td>
                <label><input name="mood" type="checkbox" value="good"> 加油</label>
                <label><input name="mood" type="checkbox" value="love"> 喜欢</label>
                <span id="hd_mood"></span>
            </td>
        </tr>
        <tr>
            <th>后盾网网址?(Ajax验证)</th>
            <td>
                <input name="webname" type="text">
            </td>
        </tr>
        </tbody>
    </table>
    <input type="submit" value="确定" class="hd-btn hd-btn-sm"/>
</form>

</div>
</body>
</html>