css制作表单

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

基本的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>

提示:你可以先修改部分代码再运行。

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

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

前端自动化测试探索

背景 测试是完善的研发体系中不可或缺的一环。前端同样需要测试,你的css改动可能导致页面错位、js改动可能导致功能不正常。由于前端偏向GUI软件的特殊性,尽管测...

36410
来自专栏空帆船w

最好用的 Markdown 编辑器

Markdown ,相信没有人不知道了吧,这里不多介绍了。如果还没听过,强烈建议百度一下,五分钟即可上手,包你会了之后就不想zai用 Office Word 写...

1393
来自专栏移动开发之家

移动端跨平台开发的深度解析

跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,...

762
来自专栏互联网杂技

你知道吗?Web的26项基本概念和技术

Web 开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行。今天,本文向初学者介绍一些 Web 开发中的基本概念和用到的技术,从...

34210
来自专栏轮子工厂

有哪些实用且堪称神器的Chrome插件?吐血推荐!!!

相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面, Chrome 最大的优势还是其支持众多强大好用的扩展程序(E...

1.6K4
来自专栏猿人谷

新安装 Ubuntu 12.10 需要做的 10 件事

1. 了解一下ubuntu 12.10 ubuntu 12.10 使用 unity 桌面基于gtk3 开发的桌面,新版本原装加入连个lens但是对于国内用户来说...

1769
来自专栏编程

《6大爬虫利器,轻松搞定爬虫》

工欲善其事必先利其器,Python之所以流行在于她有非常丰富的第三方包,无论是Web框架还是机器学习框架、抑或是爬虫框架,多得让人眼花缭乱,这给了开发者极大的选...

2108
来自专栏知晓程序

只要 5 分钟,让你立刻拥有自己的小程序 | 知晓云

Hello,各位知晓程序的读者们,我是犯迷糊的小羊。目前是 ifanr 的一只前端攻城狮,同时也是知晓云团队的一员。

1033
来自专栏速成应用小程序

小程序注册开发制作过程中要注意哪些?

小程序在注册制作发布过程中常常会遇见审核不通过或是上线后被停止等问题,那么怎么避免这类问题的出现呢?

4237
来自专栏不二小段

【一起学Python】STEAM游戏评测爬虫

别催更,越催越懒得写。催更只接受赞赏…可惜我的微信还没有赞赏的功能… 今天刚接的需求&新鲜的代码… 有个大佬昨天跟我说 来给我爬一下Steam的游戏评测吧,我...

8936

扫码关注云+社区