㈠ Web表单设计—点石成金的艺术（一）
最近在读《 Web表单设计—点石成金的艺术 》一书，颇受启发。而且该书目前已经买不到了，好像二手书也买不到，特意找了pdf扫描版来读，读书过程中的一些感悟跟大家分享。
一、表单的设计
大多数人都不喜欢填写表单，这也就说明了应该关注优秀表单设计。
而很多的特定数据来源都提供了衡量表单设计影响的方式：
（1） 可用性测试 （观察人们与表单如何交互）
（2） 实地测试 （从人种学角度观察人们在家中或办公室中与表单互动的情况；）
（3） 客户支持 （了解客户填写表单时遇到的问题）
（4） 网站追踪
（5） 眼动跟踪 （记录人们如何理解表单的表现形式）
（6） Web惯例 （即查看该问题的通用解决模式，可理解为分析竞争对手的解决方案）
二、表单的组织
类似标签后面是否要防止冒号的问题，用户真的不关心。用户关心的是问题内容和所问的原因。
有些字段需要告诉用户填写的原因（ 为什么问这些问题，能为用户带来的好处 ），如果不能回答，就要考虑是否真的需要这个字段。
表单所提的问题即 标签要尽量的简洁清晰 。
如果简洁的标签容易引起用户的误会，应该 尝试使用自然语言的方式 。
表单较长或较复杂时应 考虑对表单内容进行分组 ，有助于浏览和快速完成填写。
有些时候很多问题需要按顺序回答，否则回答就没有意义。这时候人们需要看到所有问题，一个较长的网页是好的解决方案。通常这些问题会和一个主题相关。
有些 可选问题在表单填写完成后再问比较好 ，如“您如何知道我们”或者“您想进一步了解我们吗”。这样会比初始表单就提问能获得更多的答案。
可以通过Web惯例调查， 比较相似网站的设计方案 ，引导发现网上已经形成的常见表单组织结构，但是也要结合自身情况不要只停留在简单复制竞争对手。
对表单进行分组时， 每个内容组都从视觉上区别于表单的其余部分 ，但是对比太多也可能造成视觉污染，阻碍人们浏览表单。
信息设计专家爱德华,托佛特认为，信息由产生作用的差异构成，任何无助于布局的页面元素都会损坏布局。 采用最好的必要视觉信息来区分内容组 。
英文网站， 标签首字母应当大写 ，使内容组更容易浏览。
最后，祝大家六一儿童节快乐！永葆童心~
㈡ WEB程序设计（后台登陆页面和用户注册页面设计）
这个其实蛮简单 也是WEB中最基础的东西
1.就是在sqlSERVER中建立表 来保存用户名和密码之类的信息。
2.信息获取的话 无非就是两个textbox，把密码的那个textbox的“type”属性改为“password”
3.创建数据库链接字符串 然后 sqlconnection --接着编写SQL查询语句--最后--sqlcommand。
4.这里我的方法是 用sqlcommand的Executereader方法来获取一个 datatable "dt".
然后来判断 dt的dt.rows.count属性是否大于0 如果大于0 则证明用户名与密码正确的了。 (即这行记录存在于表中)
前提是 你的SQL语句 必须这么写
select * from "保存用户信息的表" where textbox1.text=username and textbox2.text=password
以上是我自己想的方法 很不专业 但是功能都能实现 忘高手给个比较专业的方法。
㈢ 河南大学java web考试卷，是题库也可以！谢谢啦😘
《JAVA WEB开发应用》 第 1 页 共 6 页
期末考试卷(卷)
课程名称： JAVA WEB 考试方式：开卷（ ）闭卷（√）
题号 一 二 三 四 五 六 总分
统分人签名
得分
考生注意事项：1、本试卷共 4 页，请查看试卷中是否有缺页。 2、考试结束后，考生不得将试卷、答题纸带出考场。
一、 选择题（每小题1分，共20分）
得分 评卷人
1. 表单中的数据要提交到的处理文件由表单的（ ）属性指定。
A.method B. name C. action D. 以上都不对 2. 要运行JSP程序，下列说法不正确的是（ ）
A. 服务器端需要安装Servlet容器，如Tomcat等。 B. 客户端需要安装Servlet容器，如Tomcat等。 C. 服务器端需要安装JDK。
D. 客户端需要安装浏览器，如IE等。
3. 当发布Web应用程序时，通常把Web应用程序的目录及文件放到Tomcat
的（ ）目录下。
A.work B. temp C. webapps D. conf 4. 下面有关HTTP协议的说法不正确的是（ ）
A. HTTP协议是Web应用所使用的主要协议
B. HTTP协议是一种超文本传输协议（Hypertext Transfer Protocol），
是基于请求/响应模式的
C. HTTP是无状态协议
D. HTTP的请求和响应消息如果没有发送并传递成功的话，HTTP可以保存
已传递的信息
5. 下面有关Servlet的描述错误的是（ ）。
A. 一个Servlet就是Java中的一个类
B. Servlet是位于Web 服务器内部的服务器端的Java应用程序 C. Servlet可以由客户端的浏览器解释执行
D. 加载Servlet的Web服务器必须包含支持Servlet的Java虚拟机 6. 下面不属于JSP指令的是：（ ）
A. include B. import C. page D. taglib 7. （ ）动作用于转向另一个页面。
A. next B. forward C. include D. param 8. 在项目中已经建立了一个JavaBean，该类为：bean.Student，该bean具
有name属性，则下面标签用法正确的是：（ ）
A．<jsp:useBean id="student" class="Student" scope="session">
</jsp:useBean>
B．<jsp:useBean id="student" class="Student" scope="session">
</jsp:useBean>
C．<jsp:useBean id="student" class="bean.Student" scope="session">
</jsp:useBean>
D．<jsp:getProperty name="name" property="student"/>
9. 下列选项中，（ ）可以准确地获取请求页面的一个文本框的输入（文本框的名称为name）。
A. request.getParameter（name） B. request.getParameter（”name”） C. request.getParameterValues(name)
《JAVA WEB开发应用》 第 2 页 共 6 页
D. request.getParameterValues(“name”)
10. 使用response对象进行重定向时，使用的方法是（ ）。
A. getAttribute B. setContentType C. sendRedirect D. setAttribute
11. session对象中用于设定指定名字的属性值，并且把它存储在session对
象中的方法是（ ）。
A. setAttribute B. getAttributeNames C. getValue D. getAttribute
12. 在application对象中用（ ）方法可以获得application对象中的所有
变量名。
A. getServerInfo B. nextElements() C. removeAttribute D. getRealPath 13. 有关struts 2的说法不正确的是（ ）
A. Struts是一个用于简化MVC框架（Framework）开发的Web应用框架 B. 应用Struts 2不需要进行配置 C. Struts 2 含有丰富的标签
D. Struts2采用了WebWork的核心技术 14. Web应用的数据共享方式不包括（ ）。
A.基于请求的共享 B.基于会话的共享 C.基于页面的共享 D.基于应用的共享
15. 要在页面上输出2+3=${2+3}，则对应的程序代码应为（ ）。
A. 2+3=\${2+3} B. 2+3=${2+3} C. 2+3=/${2+3} D. 以上都不对
16. 下面有关EL中“.“和“[ ]“两种存取运算符的说法不正确的是（ ）
A. 两者在某些情况下是等效的
B. “[ ]“运算符主要用来访问数组、列表或其他集合 C. 如果要动态取值时，两者都可以实现
D. 当要存取的属性名称中包含一些特殊字符，如.或?等并非字母或数字
的符号，就一定要使用“[ ]“
17. 要使用JSTL的核心标签库，需要在JSP源文件的首部加入如下声明语句
（ ）
A. <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %> B. <%@ taglib prefix=”x”
uri=”http://java.sun.com/jsp/jstl/xml”%> C. <%@ taglib prefix=”fmt”
uri=”http://java.sun.com/jsp/jstl/fmt”%> D. <%@ taglib prefix=”sql”
uri=”http://java.sun.com/jsp/jstl/sql”%>
18. 以下（ ）标签用于实现循环功能，类似与Java语句中的for循环。
A. <c:set> B. <c:forEach> B. <c:Tokens> D. <c:import> 19. 以下URL中语法不正确的是（ ）
A.http://www.bta.net.cn:80/software/home.html B.telnet://bdysseu.bbb.com:70 C.ftp://ftp.btbu.e.cn D.www0.btbu.e.cn
20. page指令用于定义JSP文件中的全局属性，下列关于该指令用法的描述不
正确的是：（ ）
A. <%@ page %>作用于整个JSP页面。
B. 可以在一个页面中使用多个<%@ page %>指令
《JAVA WEB开发应用》 第 3 页 共 6 页
C. 为增强程序的可读性，建议将<%@ page %>指令放在JSP文件的开头，但不是必须的。
D. <%@ page %>指令中的属性只能出现一次。
二、 填空题（每空2分，共20分）
得分 评卷人
1．在编写Servlet时，需要继承 类，在Servlet中声明doGet()和doPost()需要 和 类型的两个参数。
2．jsp主要内置对象有： 、exception、 pageContext、 request 、 、_____ __、out、config、page。 3．使用useBean动作标记的时候scope属性有4种选项，作用范围由小到大是_________、_________、_________、_________，其中_________是指当关闭浏览器的时候这个javabean失效， ____ _____是指当关闭服务器的时候这个javabean失效。
4．三种常用的动态网页技术是_________、_________、_________，简称3P技术。
5．JSP利用JDBC操作数据库的步骤：（1）加载驱动程序，调用___________将自动加载驱动程序类；（2）建立连接，若连接字符串为：
String url = "jdbc:mysql://localhost/" + dbName +"?user=" +userName +"&password=" +userPwd，其中dbName、userName和userPwd 3个分别代表 、数据库的 和 ，（3）建立StateMent；(4) 、执行sql语句，其中，查询数据库里的表内容是Statement接口使用__ __________方法；（5）关闭数据库。 三、 简答题：(每小题6分，共30 分)
得分 评卷人
1． Tomcat服务器的默认端口是多少？怎样修改tomcat的端口
2．什么是cookie? cookie有什么作用？。
3. 简述JSP中动态include与静态include的区别？
4. 简述表单中POST和GET的区别。
5、MVC中的M、V、C各指的是什么？请述其各自的作用。 四、编程题（每小题15分，共30分）
《JAVA WEB开发应用》 第 4 页 共 6 页
得分 评卷人
1、编写一个简单的JavaBean，通过EL的存取运算符访问其属性。 答案：文件userLogin.java定义了一个用户Bean，包含姓名、密码和电子邮件3个属性，其代码如下：
package bean;
public class userLogin { private String userName; private String （1） private String email; public userLogin() { userName = "李平"; password = "123";
email = "[email protected]";
}
public void setuserName(String userName) { this.userName = userName; }
public String getuserName() { return this.userName; }
public void setpassword(String password) { this.password = password; }
public String getpassword() {
return this.password;
}
public void setemail(String email) { this.email = email;
}
public String getemail() { return this.email; }
}
文件accessBean.jsp使用EL的存取运算符获取JavaBean的属性，其代码如下：
<%@ page contentType="text/html; charset=gb2312"%> （2）
<jsp:useBean id="user" class="bean.userLogin" scope="session"> </jsp:useBean> <html> <head>
<title>使用存取运算符访问JavaBean的属性</title>
</head> <body> <!--通过EL存取运算符访问JavaBean的属性--> 用户名：(3) <br>
密码：(4)
<br>
电子邮箱：(5)
《JAVA WEB开发应用》 第 5 页 共 6 页
㈣ 关于Web表单设计的经验分享
表单在UI设计中的出现场景还是比较多的，尤其是在一些To B的产品设计中。最近自己有做大量web 表单设计，就想把自己学到的一些关于表单设计的知识点分享给大家～
一、什么是表单？
表单在网页中的主要功能是负责采集数据以及向服务器传送数据的。表单是采集用户信息数据重要的途径。好的表单设计能提升信息采集的效率与成功率。不好的表单设计会影响用户心情，体验差，导致信息采集不成功甚至带来利益的损失。
二、表单的构成
表单通常由标签、输入域、操作按钮、这三部分构成。
标签
标签我们可以把它理解为标题，告诉用户该表单需要填写什么信息、该表单需要采集什么内容。标签通常出现在输入域的左边、顶部、或者输入域内。
标签按所填信息的必要性分为必填项和非必填项，一般我们会在必填项的标签内容加上＊号。＊号的的摆放位置有下面两种情况：
1.当标签与输入域居中对齐时，建议把＊号放在标签左侧。
因为＊号比较显目，用户往往第一眼会先看到它，然后按照用户从左往右的阅读习惯，视觉落点分别为文字标签、输入域。考虑到表单的填写效率，＊号位于左侧的表单阅读起来会更加顺畅。所以当标签与输入域居中对齐时，把＊号放在标签左侧会更好。
2.当标签与输入域左对齐时，建议把＊号放在标签右侧。
由于人们纵向的阅读习惯，视线会成F型。＊号在左侧还是在右侧并不会对用户视觉落脚点造成太多困扰，另外考虑到对齐的形式，＊号放在标签右侧会更好。
输入域
输入域是录入用户各种类型信息的重要交互区域。输入域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等等。
不知道这些输入域的区别的小伙伴可以去ant design官网学习一下，传送门：
https://ant.design/components/overview-cn/
因为输入域是录入信息很重要的交互区域，在设计时我们应该考虑用户输入的多种场景去设计。我们可以将用户的输入过程分为输入前、输入中、输入后。根据每一种场景中细化我们的设计。比如在输入中：我们要考虑光标的设计、输入文字信息的设计，信息提示等，在输入后：我们要考虑信息输入错误应该给予怎样的视觉反馈等。总之考虑得越细致，越能提高信息录入的成功率。
操作按钮
操作按钮是在用户填写完表单各项内容后，所要进行的操作动作，来完成或者结束当前操作流程。操作按钮分为全局操作按钮与局部操作按钮。全局操作按钮控制整个表单，比如提交、发送等操作按钮。局部操作按钮是对某一范围的内容起作用，比如编辑、删除操作。
三、表单设计常见问题
1.标签采用哪种对齐方式更好？
在我们的实际项目中，通常会因为文案的长短不一，导致我们不知道该采用哪种对齐方式。标签的处理原则就是要要尽量对齐，采用哪种对齐方式应考虑具体的制约因素和目标来定。
左对齐
当标签采用左对齐的方式的时，因为文字标签的长度不统一，导致标签与输入框的间距是不可控的。这就会造成设计的通用性不强，以及横向空间的浪费。
如果采用左对齐的形式，就要尽量去保持文字标签的长度一致，比如通过字距的调整让文字标签的长度保持一致或者通过留足留白空间，这样设计上会更统一。以为例，采取左对齐形式，但是它留足了文字标签与输入域之间的距离，让表单看上去更统一和谐，不足的就是造成了部分空间的浪费。
顶对齐
采用顶对齐的形式，会让标签和输入域垂直显示，纵向布局的信息呈现效果会更好，从而提高用户填写的效率。顶对齐因为垂直排布，会造成纵向空间的浪费，但在横空间上比较节省，比较适用于横向宽度较窄的页面。
▵顶对齐
右对齐
右对齐跟左对齐一样会因为标签长度不可控。导致设计的通用性不强，以及横向空间的浪费，但节约了纵向空间。
▵右对齐
在这几种对齐方式中，用户浏览信息的速率顶对齐>右对齐>左对齐。顶对齐形式适合简易表单、右对齐与左对齐表单适合复杂表单。
2.操作按钮应该用哪种设计形式比较好？
对于全局的操作按钮会用常规的按钮样式，全局按钮分为主按钮与次按钮。
主按钮
主按钮是界面中比较重要的功能操作按钮，比如提交、保存等一些正向的操作。主按钮在视觉层级上最高，能够引导用户很快的找到核心的操作并点击。主按钮通常是纯文本或图文结合的面性形式。图文结合的形式能吸引用户注意，也帮助用户理解该按钮的操作含义。
次按钮
次按钮的层级相对于主按钮层级要弱一些，通常采用线性形式。在一个页面中可以出现多个次按钮。
对于局部操作按钮的设计形式可以是文字按钮、图标按钮，也可以是图标＋文字的形式。至于应该应用哪种形式就要结合具体端场景去考虑。
图标按钮
图标按钮就是用图标来代表该操作的含义，能够直观的表达按钮的功能。在设计的时候我们需要注意图标是易于理解的、是用户熟悉的。图标按钮的设计通常都会配上悬浮框设计，也就是当用户鼠标停留在该图标按钮上会出现对该按钮的文字释义的悬浮框。以微信公众号为例，当鼠标停留在编辑图标那时会出现黑色的悬浮框对其进行解释，让用户理解此按钮的意义，让用户放心操作。
在web设计中，由于按钮的种类与使用场景比较多，建议局部的操作按钮使用线性图标，让它的层级相对其他按钮要弱化一些。
文字按钮
文字按钮通常出现在列表的操作项中。文字的颜色通常是品牌色或者蓝色，因为蓝色在用户的认知中通常是可点击的。
图标＋文字 按钮
图文结合的按钮相对于纯文字按钮会更加直观，也能更吸引用户注意。
3.输入框应该设计几种状态？
考虑的状态越多，设计就会越细，能够及时的反馈信息给用户，从而提高表单填写效率。在考虑输入框的设计状态时，遵循及时反馈的设计原则去考虑。
为了避免用户填写完所有信息后，才反馈有错误，会造成时间浪费，表单填写效率低。通常会把输入框线变成红色，同时出现红色的说明文案，来引起用户的注意。
▵及时反馈错误信息
在设计中我们还需要考虑自动校验的成功与警告状态。颜色通常为绿色与橙色。
输入框到底应该设计几种状态我们也需要根据我们表单的复杂情况去考虑，对于简单的表单设计过于细化的状态是没有必要的。
写在最后的话
表单设计看起来简单，但实际在设计过程中还是有大量的点值得我们去学习与研究的。在这次做表单的过程中，觉得作为设计师我们不应该去挑活，不要觉得表单设计是一个很小的设计就不动脑的照着别人的设计规范抄一遍。像这种看似枯燥但又很重要的模块设计，我们在前期开始设计之前可以从交互层去考虑，再从视觉层面去考虑怎样的表单设计能让用户填得舒心又高效。在看别人的设计规范比如ant design的组件规范时，我们可以去留意他们的设计细节，比如表单上下之间的间距留的是多少？有什么规律吗？按钮的上下边距与左右边距有什么关系吗？通过这些思考，然后去观察总结，并转化为自己的小技巧，到下一次设计表单的时候，我们就会做得很好了。
往期解析
UI设计－首页解析
详情页设计技法解析
轻松get文字标签设计技法
Get点9切图方法（内附切图神器）