知问前端——创建注册表单

   通过前面已学的jQuery UI部件，我们来创建一个注册表单。

   index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知问前端</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="header">
        <div class="header_main">
            <h1>知问</h1>
            <div class="header_search">
                <input type="text" name="search" class="search" />
            </div>
            <div class="header_button">
                <button id="search_button">查询</button>
            </div>
            <div class="header_member">
                <a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>
            </div>
        </div>
    </div>
    
    <div id="reg" title="会员注册">
        <p>
            <label for="user">账号：</label>
            <input type="text" name="user" class="text" id="user" title="请输入账号，不少于2位！"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label for="pass">密码：</label>
            <input type="password" name="pass" class="text" id="pass" title="请输入密码，不少于6位！"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label for="email">邮箱：</label>
            <input type="text" name="email" class="text" id="email" title="请输入正确的邮箱！"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label>性别：</label>
            <input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input>
            <input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input>
        </p>
        <p>
            <label for="date">生日：</label>
            <input type="text" name="date" readonly="readonly" class="text" id="date"></input> <!-- 生日输入框，设置为是不能自己输入的，所以添加readonly="readonly" -->
        </p>
    </div>
</body>
</html>

   新增的一个注册表单样式：

#reg {
    padding: 15px 0 0 15px;
}
#reg p {
    margin: 10px 0;
    padding: 0;
}
#reg p label {
    font-size: 14px;
    color: #666;
}
#reg .star {
    font-size: 14px;
    color: red;
}
#reg .text {
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    width: 200px;
    height: 25px;
    line-height: 25px;
    text-indent: 5px;
    font-size: 13px;
    color: #666;
}

   jQuery代码：

$(function() {
    $("#search_button").button({
        icons:{
            primary:"ui-icon-search",
        }
    });

    $("#reg").dialog({
        autoOpen:true,
        modal:true,
        resizable:false,
        width:320,
        height:340,
        buttons:{
            '提交':function() {

            }
        }
    });

    $("#reg").buttonset();
    $("#date").datepicker();//日历插件
    $("#reg input[title]").tooltip();//工具提示
});

 

posted @ 2016-04-29 17:29  叶十一少  阅读(353)  评论(0)  编辑  收藏  举报