在上一篇「Spring 5 (含 Spring MVC) 新手村起手式之表單頁面初體驗 / GET v.s POST /」中，介紹了如何在SpringBoot的頁面裏呈現基本表單的資料，今天的這一篇我們就來看看還有哪些常見的元件可以使用在表單上。
這邊我們就以會員註冊的畫面來示範：
上面的畫面裏，元件的類型總共有五種：
一、單選題( Radio ) 如性別、血型 這類。
二、文字框 ( Text ) 如姓名、備註、信箱 等等。
(*註 : 只是信箱 還可以用另一種類型 「email」來代表，而電話 可以用 「tel」類型，密碼則是可以用 「password」來達到隱碼的效果)
三、下拉式選單 (Select 標籤)：
透過選單的方式，可以讓使用者選取答案。
(*可搭配multiple屬性來達到多選的效果)
四、複選題 (CheckBox) 如 興趣、通過的專業證照 等等。
五、按鈕 (Button/Submit) 這邊有送出表單按鈕，跟重填表單按鈕。
接下來我們就直接用程式碼來分別說明頁面上的各個元件。
單選題( Radio )
這裏是使用 input標籤搭配 radio 型態，並且給予每個選項名稱(name)及分別所代表的內容(value)。
有注意到上面的圖裏面，三個選選的name 都是title 嗎?!
因為要能夠單選，所以同一題的raidio選項的名稱，要記得取相同，才不會失去單選題的效果。
文字框 ( Text )
這裏是使用 input標籤搭配 text 型態，並且給予每個選項名稱(name)及分別所代表的內容(value)。而裏面 placeholder屬性是指提示文字，加上搭配 required 就可以達到欄位必填的驗證效果。最後的password 種類，則是會將輸入的字元當成密碼來隱藏，像是這樣: ****
下拉式選單 (Select 標籤)
這邊是用 <select> 標籤，搭配 <option>來呈現下拉式清單裏的選項。另外，如果需要有複選的功能，只要加上 multiple 的屬性 即可。
複選題 (CheckBox)
複選題的元件是透過 checkbox 類型來呈現，並且給予每個選項名稱(name)及被勾選時所代表的內容(value)。注意，這邊每個選項的名稱是相同的，代表是同一題的選項。如果不一樣，就代表是其它題目的選項。
按鈕類 (Button/Submit/Reset)
送出表單資料的按鈕，可用Submit (*如果沒填type，預設為submit)
重填表單資料的按鈕，可用 Reset。
講完了畫面，那我們來看一下後端程式該如何有效率的接受前端畫面傳過來的參數呢?!
這裏其實會延續上一篇文章的練習 (*點我回上一篇)，可以透過 HttpServletRequest物件，也可以用Binding的方式來接收。
這邊讓我很快地用下面程式來驗證，
從這裏可以看出，request 物件是專門負責讀取使用者傳遞的相關資料，getParameter()函式則是依傳入的參數來回傳對應的內容值。因此，我們就可以快速的得到 稱呼/姓名/Email/電話/密碼/國家 等欄位資訊，但是…等一下 !!!
最後的二個複選題的選項，我們要如何拿到?!
如果是用 request.getParameter(“ckbox”)
我們就只能拿到一項，
那要如何才能同時拿到二項呢?!
答案就是用 getParameterValues()這函式，才能將全部的複選答案一次回傳，以字串陣列的類型)
(*這邊，如果你對 HttpServletRequest 不熟的話，沒關係 這很正常 ~ 多看些範例跟文章就會漸漸上手。如果想要更有效率的學習Java Servlet跟 SpringBoot的話 可以考慮我們的課程喔，有興趣的朋友可以留言或是關注我們官網 就可以收到最新的消息喔!!!)
總結
在這次的範例裏，我們有使用以下類型的HTML 表單元件
●Radio
●Text (Email/Tel/Password)
● Select
● CheckBox
●Button
並且搭配 HttpServletRequest裏的 getParameter()函式，及request.getParameterValues()函式 來接受表單傳到後端的資料
當然 HttpServletRequest 物件，還有很多有用的功能 如 取得使用者IP，使用哪種瀏覽器 等等資訊。有興趣的朋友 可以連到這裏 看官方更多資訊。
備註
除了上述常見的HTML元件外，其實還有一些新增的類型，有興趣參考的朋友可以點下面連結 https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types
像是一些進階的應用，如 日曆(月/週)，調色盤，捲軸 等等。
今天的介紹就先到這邊，下次我們再接著失傳已久的計數器 (Counter)。
練習
一、如果想要上傳檔案，應該要用哪種類型的元件?
二、如果二個文字框的元件名稱不小心相同，那…表單送出後，Server端會有什麼反應?! (*會出錯，還是繼續執行?!)
