第16章 知问前端--创建注册表单

第16章 知问前端--创建注册表单
学习要点：
1.HTML 部分
2.CSS 部分
3.jQuery 部分

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

<div id="reg" title="会员注册">
<p>
<label for="user">帐号：</label>
<input type="text" name="user" class="text" id="user" title="请输入帐号， 不小于
2 位！" />
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="text" name="pass" class="text" id="pass" title="请输入密码， 不小于
6 位！" />
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" class="text" id="email" title="请输入电子邮件！
" />
<span class="star">*</span>
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" id="male" checked="checked"><label
for="male">男</label></input><input type="radio" name="sex" id="female"><label
for="female">女</label></input>
</p>
<p>
<label for="date">生日：</label>
<input type="text" name="date" readonly="readonly" class="text" id="date" />
</p>
</div>

 

二．CSS 部分

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

 
三．jQuery 部分

$('#reg').dialog({
autoOpen : true,
modal : true,
resizable : false,
width : 320,
height : 340,
buttons : {
'提交' : function () {}
},
});
$('#reg').buttonset();
$('#date').datepicker();
$('#reg input[title]').tooltip();