CSS制作表单

最新推荐文章于 2022-04-30 09:57:19 发布

hnbk8

最新推荐文章于 2022-04-30 09:57:19 发布

阅读量808

点赞数

文章标签： css input div border class email

本文链接：https://blog.csdn.net/hnbk8/article/details/1546665

版权

<!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">

</style>
</head>
<body>
<div id="formwrapper">
<h3>已注册用户登录</h3> <form action="" method="post"
name="apLogin" id="apLogin"> <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><br /> <h3>未注册创建帐户</h3> <form
action="" method="post" name="apForm" id="apForm"> <fieldset>
<legend>用户注册</legend>
<p><strong>您的电子邮箱不会被公布出去,但是必须填写.</strong>
在您注册之前请先认真阅读服务条款.</p> <div> <label
for="Name">用户名</label> <input type="text" name="Name"
id="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="password" id="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等国外大型交互网站是怎么做的了！

hnbk8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS制作表单

html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml">/>Form demobody { font-family: Arial, Helvetica, sans-serif; font-size:1
复制链接

扫一扫