表单的对齐排版（css）

日期：2013-12-13 来源：攀枝花惠康网络公司

对于表单，很常用。可是在web 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>

文章来源：攀枝花惠康网络公司

惠康网络，是一家专业从事攀枝花网站建设，攀枝花网站制作，攀枝花网站设计公司，提供网站建设一条龙服务（网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广），惠康网络立足攀枝花，辐射全中国，攀枝花惠康网络的客户已经遍布国内各地大中小城市，我们高效优质的网站建设服务深受用户好评。