用fieldset标签结合CSS Lable实现表单的布局

　　使用fieldset标签结合CSS的Lable标签实现表单的布局，以前听一些新手说，用CSS而布局表单真的有点难啊，其实是没找到方法，使用fieldset标签，再配合Lable可达到事半功倍的效果，而且布局出来的表单代码简洁、结构清淅，也便于修改，何不尝试一下呢？
　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　<html xmlns="http://www.w3.org/1999/xhtml">
　　<head>
　　<title>CSS表单</title>
　　<style>
　　h1 {
　　font: 1.2em Arial, Helvetica, sans-serif;
　　}
　　input.txt {
　　color: #00008B;
　　background-color: #E3F2F7;
　　border: 1px inset #00008B;
　　width: 200px;
　　}
　　input.btn {
　　color: #00008B;
　　background-color: #ADD8E6;
　　border: 1px outset #00008B;
　　}
　　form p {
　　clear: left;
　　margin: 0;
　　padding: 0;
　　padding-top: 5px;
　　}
　　form p label {
　　float: left;
　　width: 30%;
　　font: bold 0.9em Arial, Helvetica, sans-serif;
　　}
　　fieldset {
　　border: 1px dotted #61B5CF;
　　margin-top: 16px;
　　padding: 10px;
　　}
　　legend {
　　font: bold 0.8em Arial, Helvetica, sans-serif;
　　color: #00008B;
　　background-color: #FFFFFF;
　　}
　　.akey {
　　text-decoration: underline;
　　}
　　</style>
　　</head>
　　<body>
　　<h1>User Registration Form</h1>
　　<form method="post" action="accesskeys.html">
　　<fieldset>
　　<legend><span class="akey">P</span>ersonal Information</legend>
　　<p>
　　<label for="fullname">Name:</label>
　　<input type="text" name="fullname" id="fullname" class="txt" accesskey="p" />
　　</p>
　　<p>
　　<label for="email">Email Address:</label>
　　<input type="text" name="email" id="email" class="txt" />
　　</p>
　　<p>
　　<label for="password1">Password:</label>
　　<input type="password" name="password1" id="password1" class="txt" />
　　</p>
　　<p>
　　<label for="password2">Confirm Password:</label>
　　<input type="password" name="password2" id="password2" class="txt" />
　　</p>
　　</fieldset>
　　<p>
　　<input type="submit" name="btnSubmit" id="btnSubmit" value="Sign Up!" class="btn" />
　　</p>
　　</form>
　　</body>
　　</html>