1、什么是表單
在項目開發過程中，凡是需要用戶填寫的信息都需要用到表單。
#2、form標簽
在HTML中我們使用form標簽來定義一個表單。而對於form標簽來說有兩個最重要的屬性：action和method。
<form action="/aaa/pro01-HTML/page05-form-target.html" method="post"> </form> #①action屬性
用戶在表單里填寫的信息需要發送到服務器端，對於Java項目來說就是交給Java代碼來處理。那么在頁面上我們就必須正確填寫服務器端的能夠接收表單數據的地址。
這個地址要寫在form標簽的action屬性中。但是現在暫時我們還沒有服務器端環境，所以先借用一個HTML頁面來當作服務器端地址使用。
#②method屬性
『method』這個單詞的意思是『方式、方法』，在form標簽中method屬性用來定義提交表單的『請求方式』。method屬性只有兩個可選值：get或post，沒有極特殊情況的話使用post即可。
什么是『請求方式』？
瀏覽器和服務器之間在互相通信時有大量的『數據』需要傳輸。但是不論是瀏覽器還是服務器都有很多不同廠商提供的不同產品。
常見的瀏覽器有：
- Chrome
- Firefox
- Safari
- Opera
- Edge
常見的Java服務器有：
- Tomcat
- Weblogic
- WebSphere
- Glassfish
- Jetty
這么多不同廠商各自開發的應用程序怎么能保證它們彼此之間傳輸的『數據』能夠被對方正確理解呢？
很簡單，我們給這些數據設定『格式』，發送端按照格式發送數據，接收端按照格式解析數據，這樣就能夠實現數據的『跨平台傳輸』了。
而這里定義的『數據格式』就是應用程序之間的『通信協議』。
在JavaSE階段的網絡編程章節我們接觸過TCP/IP、UDP這樣的協議，而我們現在使用的『HTTP協議』的底層就是TCP/IP協議。
HTTP1.1中共定義了八種請求方式：
- GET
- POST
- PUT
- DELETE
- HEAD
- CONNECT
- OPTIONS
- TRACE
但是在HTML標簽中，點擊超鏈接是GET方式的請求，提交一個表單可以通過form標簽的method屬性指定GET或POST請求，其他請求方式無法通過HTML標簽實現。除了GET、POST之外的其他請求方式暫時我們不需要涉及（到我們學習SpringMVC時會用到PUT和DELETE）。至於GET請求和POST請求的區別我們會在講HTTP協議的時候詳細介紹，現在大家可以從表面現象來觀察一下。
#3、name和value
在用戶使用一個軟件系統時，需要一次性提交很多數據是非常正常的現象。我們肯定不能要求用戶一個數據一個數據的提交，而肯定是所有數據填好后一起提交。那就帶來一個問題，服務器怎么從眾多數據中識別出來收貨人、所在地區、詳細地址、手機號碼……？
很簡單，給每個數據都起一個『名字』，發送數據時用『名字』攜帶對應的數據，接收數據時通過『名字』獲取對應的數據。
在各個具體的表單標簽中，我們通過『name屬性』來給數據起『名字』，通過『value屬性』來保存要發送給服務器的『值』。
但是名字和值之間既有可能是『一個名字對應一個值』，也有可能是『一個名字對應多個值』。
這么看來這樣的關系很像我們Java中的Map，而事實上在服務器端就是使用Map類型來接收請求參數的。具體的是類型是：Map<String,String[]>。
name屬性就是Map的鍵，value屬性就是Map的值。
有了上面介紹的基礎知識，下面我們就可以來看具體的表單標簽了。
#4、單行文本框
#①代碼
個性簽名：<input type="text" name="signal"/><br/> #②顯示效果
#5、密碼框
#①代碼
密碼：<input type="password" name="secret"/><br/> #②顯示效果
#6、單選框
#①代碼
你最喜歡的季節是：
<input type="radio" name="season" value="spring" />春天 <input type="radio" name="season" value="summer" checked="checked" />夏天 <input type="radio" name="season" value="autumn" />秋天 <input type="radio" name="season" value="winter" />冬天 <br/><br/> 你最喜歡的動物是： <input type="radio" name="animal" value="tiger" />路虎 <input type="radio" name="animal" value="horse" checked="checked" />寶馬 <input type="radio" name="animal" value="cheetah" />捷豹#②效果
#③說明
- name屬性相同的radio為一組，組內互斥
- 當用戶選擇了一個radio並提交表單，這個radio的name屬性和value屬性組成一個鍵值對發送給服務器
- 設置checked="checked"屬性設置默認被選中的radio
#7、多選框
#①代碼
你最喜歡的球隊是：
<input type="checkbox" name="team" value="Brazil"/>巴西 <input type="checkbox" name="team" value="German" checked="checked"/>德國 <input type="checkbox" name="team" value="France"/>法國 <input type="checkbox" name="team" value="China" checked="checked"/>中國 <input type="checkbox" name="team" value="Italian"/>意大利 #②效果
#8、下拉列表
#①代碼
你喜歡的運動是：
<select name="interesting"> <option value="swimming">游泳</option> <option value="running">跑步</option> <option value="shooting" selected="selected">射擊</option> <option value="skating">溜冰</option> </select> #②效果
#③說明
- 下拉列表用到了兩種標簽，其中select標簽用來定義下拉列表，而option標簽設置列表項。
- name屬性在select標簽中設置。
- value屬性在option標簽中設置。
- option標簽的標簽體是顯示出來給用戶看的，提交到服務器的是value屬性的值。
- 通過在option標簽中設置selected="selected"屬性實現默認選中的效果。
#9、按鈕
#①代碼
<button type="button">普通按鈕</button> <button type="reset">重置按鈕</button> <button type="submit">提交按鈕</button> #②效果
#③說明
| 類型 | 功能 |
|---|---|
| 普通按鈕 | 點擊后無效果，需要通過JavaScript綁定單擊響應函數 |
| 重置按鈕 | 點擊后將表單內的所有表單項都恢復為默認值 |
| 提交按鈕 | 點擊后提交表單 |
#10、表單隱藏域
#①代碼
<input type="hidden" name="userId" value="2233"/> #②說明
通過表單隱藏域設置的表單項不會顯示到頁面上，用戶看不到。但是提交表單時會一起被提交。用來設置一些需要和表單一起提交但是不希望用戶看到的數據，例如：用戶id等等。
#11、多行文本框
#①代碼
自我介紹：<textarea name="desc"></textarea> #②效果
#③說明
textarea沒有value屬性，如果要設置默認值需要寫在開始和結束標簽之間。