表单的对齐排版(css)

对于表单,很常用。但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过。我现在要介绍一个用< fieldset >< label >标签制作漂亮而且具体亲和力的表单的方法。

交互设计,亲和力,用户体验,这些经常挂在设计师嘴边的名词倒是是做什么的?我们不妨来尝试一下!

1.表单内容设计合理性,这里介绍的是帐户登陆的交互界面,当然包涵已注册和新用户两种人群,我们就设计出两个选择。

2.表单界面设计的亲和力,布局,颜色,字体,文字大小,行高等要素。我使用了
字体: Arial, Helvetica, sans-serif
字体大小:12px 14px
颜色:#666666 #1E7ACE #000000 淡兰色,灰色,黑色给用户稳重安全的感觉

3.内容细节,比如记录用户信息,必要的提醒。

就这样换位思考一下用户的需求,就能做到基本的亲和力,得到比较好的用户体验!要作到更完善的话,你就需要去看看MSN Google等国外大型交互网站是怎么做的了!

基本的xhtml

  1. <h3>已注册用户登录</h3><span id=”more-25″></span>
  2. ?? ?<form action=”” method=”post”? id=”Login”>
  3. ?? ?<fieldset>
  4. ?? ? ? ?<legend>用户登录</legend>
  5. ?? ? ? ?<div>
  6. ?? ? ? ? ? ?<label for=”Name”>用户名</label>
  7. ?? ? ? ? ? ?<input type=”text” name=”Name” id=”Name” size=”18″ maxlength=”30″ /><br />
  8. ?? ? ? ?</div>
  9. ?? ? ? ?<div>
  10. ?? ? ? ? ? ?<label for=”password”>密码</label>
  11. ?? ? ? ? ? ?<input type=”password” name=”password” id=”password” size=”18″ maxlength=”15″ /><br />
  12. ?? ? ? ?</div>
  13. ?? ? ? ?<div class=”cookiechk”>
  14. ?? ? ? ? ? ?<label><input type=”checkbox” name=”CookieYN” id=”CookieYN” value=”1″ /> <a href=”#” title=”选择是否记录您的信息”>记住我</a></label>
  15. ?? ? ? ? ? ?<input name=”login791″ type=”submit” class=”buttom” value=”登录” />
  16. ?? ? ? ?</div>? ?
  17. ?? ? ? ?<div class=”forgotpass”><a href=”#”>您忘记密码?</a></div>? ?
  18. ?? ?</fieldset>
  19. ?? ?</form>

看了代码,发现标单描述文字都在< label >< /label >中,只要让< label >< /label >标签浮动左对齐,fieldset包含的< div >清除浮动,就可以实现我们常见的那类布局。

下面是基本的CSS:

  1. fieldset label {
  2. ?? ?float:left;
  3. ?? ?width:120px;
  4. ?? ?text-align:right;
  5. ?? ?padding:4px;
  6. ?? ?margin:1px;
  7. }
  8. fieldset div {
  9. ?? ?clear:left;
  10. ?? ?margin-bottom:2px;
  11. }

===========================表单的对齐排版==============================

<!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 solid #A4CDF2;
}
fieldset {
?padding:10px;
?margin-top:5px;
?border:1px solid #A4CDF2;
?background:#fff;
}
fieldset legend {
?color:#1E7ACE;
?font-weight:bold;
?padding:3px 20px 3px 20px;
?border:1px solid #A4CDF2;
?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” 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=”1″ /> <a href=”#” title=”选择是否记录您的信息”>记住我</a></label>
???<input name=”login” type=”submit” class=”buttom” value=”登录” />
??</div>
??<div class=”forgotpass”><a href=”#”>您忘记密码?</a></div>
?</fieldset>
?</form><br />
?<h3>未注册创建帐户</h3>
?<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=”” 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=”cr_password” id=”cr_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>

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 表单的对齐排版(css)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏