對於表單，很常用。但是在web standard建站的時候，他的排版往往讓人遺忘，到了真正用到的時候就發現讓人頭疼，當然我也遇到過。我現在要介紹一個用<fieldset></label>標籤製作漂亮而且具體親和力的表單的方法。
基本的xhtml:
<h3>已註冊用戶登錄</h3>
<form action="" method="post" name="apLogin" id="apLogin">
<fieldset>
<legend>用戶登錄</legend>
<div>
<label for="Name">用戶名</label>
<input type="text" name="Name" id="Name" size="18" maxlength="30" /><br />
</div>
<div>
<label for="password">密碼</label>
<input type="password" name="password" id="password" size="18" maxlength="15" /><br />
</div>
<div class="cookiechk">
<label><input type="checkbox" name="CookieYN" id="CookieYN" value="1" /> <a href="#" title="選擇是否記錄您的信息">記住我</a></label>
<input name="login791" type="submit" class="buttom" value="登錄" />
</div>
<div class="forgotpass"><a href="#">您忘記密碼?</a></div>
</fieldset>
</form>
看了代碼，發現標單描述文字都在<label></label>中，只要讓<label></label>標籤浮動左對齊，fieldset包含的<div>清除浮動，就可以實現我們常見的那類佈局。
交互部分的設計
交互設計，親和力，用戶體驗，這些經常掛在設計師嘴邊的名詞倒是是做什麼的？我們不妨來嘗試一下!
1.表單內容設計合理性，這裏介紹的是帳戶登陸的交互界面，當然包涵已註冊和新用戶兩種人羣，我們就設計出兩個選擇。
2.表單界面設計的親和力，佈局，顏色，字體，文字大小，行高等要素。我使用了
字體： Arial, Helvetica, sans-serif
字體大小：12px 14px
顏色：#666666 #1E7ACE #000000 淡蘭色，灰色，黑色給用戶穩重安全的感覺
3.內容細節，比如記錄用戶信息，必要的提醒。
就這樣換位思考一下用戶的需求，就能做到基本的親和力，得到比較好的用戶體驗！要作到更完善的話，你就需要去看看MSN Google等國外大型交互網站是怎麼做的了！
經典論壇討論帖:
http://www.blueidea.com/bbs/NewsDetail.asp?id=2523708
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Form demo</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
background:#fff;
text-align:center;
}
* {
margin:0;
padding:0;
}
a {
color:#1E7ACE;
text-decoration:none;
}
a:hover {
color:#000;
text-decoration:underline;
}
h3 {
font-size:14px;
font-weight:bold;
}
pre,p {
color:#1E7ACE;
margin:4px;
}
input, select,textarea {
padding:1px;
margin:2px;
font-size:11px;
}
.buttom{
padding:1px 10px;
font-size:12px;
border:1px #1E7ACE solid;
background:#D0F0FF;
}
#formwrapper {
width:450px;
margin:15px auto;
padding:20px;
text-align:left;
border:1px #1E7ACE solid;
}
fieldset {
padding:10px;
margin-top:5px;
border:1px solid #1E7ACE;
background:#fff;
}
fieldset legend {
color:#1E7ACE;
font-weight:bold;
padding:3px 20px 3px 20px;
border:1px solid #1E7ACE;
background:#fff;
}
fieldset label {
float:left;
width:120px;
text-align:right;
padding:4px;
margin:1px;
}
fieldset div {
clear:left;
margin-bottom:2px;
}
.enter{ text-align:center;}
.clear {
clear:both;
}
-->
</style>
</head>
<body>
<div id="formwrapper">
<h3>已註冊用戶登錄</h3>
<form action="" method="post" name="apLogin" id="apLogin">
<fieldset>
<legend>用戶登錄</legend>
<div>
<label for="Name">用戶名</label>
<input type="text" name="Name" id="Name" size="18" maxlength="30" /><br />
</div>
<div>
<label for="password">密碼</label>
<input type="password" name="password" id="password" size="18" maxlength="15" /><br />
</div>
<div class="cookiechk">
<label><input type="checkbox" name="CookieYN" id="CookieYN" value="1" /> <a href="#" title="選擇是否記錄您的信息">記住我</a></label>
<input name="login791" type="submit" class="buttom" value="登錄" />
</div>
<div class="forgotpass"><a href="#">您忘記密碼?</a></div>
</fieldset>
</form><br />
<h3>未註冊創建帳戶</h3>
<form action="" method="post" name="apForm" id="apForm">
<fieldset>
<legend>用戶註冊</legend>
<p><strong>您的電子郵箱不會被公佈出去,但是必須填寫.</strong> 在您註冊之前請先認真閱讀服務條款.</p>
<div>
<label for="Name">用戶名</label>
<input type="text" name="Name" id="Name" value="" size="20" maxlength="30" />
*(最多30個字符)<br />
</div>
<div>
<label for="Email">電子郵箱</label>
<input type="text" name="Email" id="Email" value="" size="20" maxlength="150" /> *<br />
</div>
<div>
<label for="password">密碼</label>
<input type="password" name="password" id="password" size="18" maxlength="15" />
*(最多15個字符)<br />
</div>
<div>
<label for="confirm_password">重複密碼</label>
<input type="password" name="confirm_password" id="confirm_password" size="18" maxlength="15" />
*<br />
</div>
<div>
<label for="AgreeToTerms">同意服務條款</label>
<input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" />
<a href="#" title="您是否同意服務條款">先看看條款？</a> * </div>
<div class="enter">
<input name="create791" type="submit" class="buttom" value="提交" />
<input name="Submit" type="reset" class="buttom" value="重置" />
</div>
<p><strong>* 在提交您的註冊信息時, 我們認爲您已經同意了我們的服務條款.<br />
* 這些條款可能在未經您同意的時候進行修改.</strong></p>
</fieldset>
</form>
</div>
</body>
</html>