㈠ 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切圖方法（內附切圖神器）