表單的對齊排版（css）

日期：2013-12-13 來源：攀枝花惠康網絡公司

對于表單，很常用?？墒窃趙eb standard建站的時辰，他的排版往往讓人遺忘，到了真正用到的時辰就發現讓人頭疼，當然我也碰著過。我此快要介紹一個用< fieldset >< label >標簽建造標致而且具體親和力的表單的體例。

交互設計，親和力，用戶體驗，這些經常掛在設計師嘴邊的名詞卻是是做什么的？我們不妨來考試考試一下!

1.表單內容設計合理性，這里介紹的是帳戶上岸的交互界面，當然包容已注冊和新用戶兩種人群，我們就設計出兩個選擇。

2.表單界面設計的親和力，結構，顏色，字體，文字巨細，行高檔要素。我使用了
字體： Arial, Helvetica, sans-serif
顏色：#666666 #1E7ACE #000000 淡蘭色，灰色，黑色給用戶穩重平安的感受

3.內容細節，好比記適用戶信息，需要的提醒。

就這樣換位思慮一下用戶的需求，就能做到根基的親和力，獲得斗勁好的用戶體驗！要作到更完美的話，你就需要去看看MSN Google等國外年夜型交互網站是怎么做的了！

根基的xhtml

<h3>已注冊用戶登錄</h3><span id=”more-25″></span>
<form action=”" method=”post” id=”Login”>
<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=http://www.css88.com/archives/”1″ /> <a href=”#” title=”選擇是否記實您的信息”>記住我</a></label>
<input name=”login791″ type=”submit” class=”buttom” value=http://www.css88.com/archives/”登錄” />
</div>
<div class=”forgotpass”><a href=http://www.css88.com/archives/”#”>您健忘密碼?<?</a></div>
</fieldset>
</form>

看了代碼，發現標單描述文字都在< label >< /label >中，只要讓< label >< /label >標簽浮動左對齊，fieldset包含的< div >斷根浮動，就可以實現我們常見的那類結構。

</head>

===========================表單的對齊排版==============================

<!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″ />
background:#fff;
<style type=”text/css”>
<!–
body {

下面是根基的CSS：

fieldset label {
float:left;
width:120px;
text-align:right;
padding:4px;
margin:1px;
}
fieldset div {
clear:left;
margin-bottom:2px;
}

font-family: Arial, Helvetica, sans-serif;
</div>
border:1px solid #A4CDF2;
padding:4px;
color:#666666;
background:#fff;
text-align:center;
}
<input type=”text” name=”Email” id=”Email” value=http://www.css88.com/archives/”" size=”20″ maxlength=”150″ /> *<br />
margin:2px;
<title>Form demo</title>
* {
margin:0;
padding:0;
}
color:#1E7ACE;
text-decoration:none;
*<br />
}
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;
font-size:11px;
}
.buttom{
padding:1px 10px;
font-size:12px;
background:#D0F0FF;
}
width:450px;
border:1px solid #A4CDF2;
padding:20px;
text-align:left;
}
padding:10px;
<a href=http://www.css88.com/archives/”#” title=”您是否贊成處事條目”>先看看條目？</a> * </div>
margin-top:5px;
border:1px solid #A4CDF2;
background:#fff;
fieldset label {
fieldset legend {
color:#1E7ACE;
font-weight:bold;
padding:3px 20px 3px 20px;
<label for=”confirm_password”>一再密碼</label>
}
float:left;
width:120px;
text-align:right;
}
fieldset div {
clear:left;
margin:1px;
margin-bottom:2px;
}
.enter{ text-align:center;}
<input type=”checkbox” name=”AgreeToTerms” id=”AgreeToTerms” value=http://www.css88.com/archives/”1″ />
.clear {
clear:both;
}
–>
</style>
<body>
<div id=”formwrapper”>
<h3>已注冊用戶登錄</h3>
<form action=”" method=”;>用戶名</label>
<input type=”text” name=”Name” id=”Name” size=”18″ maxlength=”30″ /><br />
</div>
<div>
<input type=”password” name=”password” id=”password” size=”18″ maxlength=”15″ /><br />
border:1px #1E7ACE solid;
</div>
</div>
<div class=”cookiechk”>
<label><input type=”checkbox” name=”CookieYN” id=”CookieYN” value=http://www.css88.com/archives/”1″ /> <a href=”#” title=”選擇是否記實您的信息”>記住我</a></label>
<input name=”login” type=”submit” class=”buttom” value=http://www.css88.com/archives/”登錄” />
<div class=”forgotpass”><a href=http://www.css88.com/archives/”#”>您健忘密碼?<?</a></div>
</fieldset>
</form><br />
<h3>未注冊建樹帳戶</h3>
margin:15px auto;
<form action=”" method=”post” id=”apForm”>
<fieldset>
<legend>用戶注冊</legend>
<p><strong>您的電子郵箱不會被發布出去,可是必需填寫.</strong> 在您注冊之前請先當真閱讀處事條目.</p>
<div>
<label for=”Name”>用戶名</label>
<input type=”text” name=”cr_Name” id=”cr_Name” value=http://www.css88.com/archives/”" size=”20″ maxlength=”30″ />
*(最多30個字符)<br />
<label for=”Email”>電子郵箱</label>
</div>
<div>
<label for=”password”>密碼</label>
<input type=”password” name=”cr_password” id=”cr_password” size=”18″ maxlength=”15″ />
a {
</div>
*(最多15個字符)<br />
</div>
<label for=”password”>密碼</label>
<div>
<input type=”password” name=”confirm_password” id=”confirm_password” size=”18″ maxlength=”15″ />
<div>
<label for=”AgreeToTerms”>贊成處事條目</label>
#formwrapper {
<div class=”enter”>
<input name=”create791″ type=”submit” class=”buttom” value=http://www.css88.com/archives/”提交” />
<div>
fieldset {
}
<input name=”Submit” type=”reset” class=”buttom” value=http://www.css88.com/archives/”重置” />
</div>
font-size:12px;
<p><strong>* 在提交您的注冊信息時, 我們認為您已經贊成了我們的處事條目.<br />
* 這些條目可能在未經您贊成的時辰進行改削.</strong></p>
</fieldset>
</form>
字體巨細：12px 14px
</div>
</body>
</html>

文章來源：攀枝花惠康網絡公司

惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。