对于表单,很常用。但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过。我现在要介绍一个用< fieldset >< label >标签制作漂亮而且具体亲和力的表单的方法。
交互设计,亲和力,用户体验,这些经常挂在设计师嘴边的名词倒是是做什么的?我们不妨来尝试一下!
1.表单内容设计合理性,这里介绍的是帐户登陆的交互界面,当然包涵已注册和新用户两种人群,我们就设计出两个选择。
2.表单界面设计的亲和力,布局,颜色,字体,文字大小,行高等要素。我使用了
字体: Arial, Helvetica, sans-serif
字体大小:12px 14px
颜色:#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=”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 >清除浮动,就可以实现我们常见的那类布局。
下面是基本的CSS:
- fieldset label {
- ?? ?float:left;
- ?? ?width:120px;
- ?? ?text-align:right;
- ?? ?padding:4px;
- ?? ?margin:1px;
- }
- fieldset div {
- ?? ?clear:left;
- ?? ?margin-bottom:2px;
- }
===========================表单的对齐排版==============================
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” ““>
<html xmlns=”“>
<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>
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂