Form
HTML Form
基本概念
表單(Form)是動態HTML的基本概念之一，使用者可以透過Form傳送資料到web伺服器處理。比如，登入就是可以透過Form來完成。
基本語法
要定義一個HTML Form，首先要在<body></body>中間加上<form></form>，除此之外，在<form>要設定action及method，action是form要呼叫的對象，method則是呼叫的方法，一般而言，form所使用的方法為post，當沒有指定時，form會使用get，get 與post的差異，會另外解釋 (詳參: https://www.w3schools.com/tags/ref_httpmethods.asp)。因為通常form會傳送資料，所以，在<form></form>中間會有一些元件，如: <input>。每個input可以設定不同的型態 (type)，常用的型態有text及submit。如果型態是text，就是會看到一個文字框讓使用者輸入文字，如果是submit，就是會看到一個按鈕，可以讓使用者送出資料。每個input還可以設定name或value，如果型態是text，value就會是文字框內的文字，當型態是submit，value就會是按鈕上的文字，而name則是這個元件的名稱，如以下範例。
<!DOCTYPE html>
<html>
<body>
<form action="#" method ="post">
name:<input type="text" name ="name" required="required"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
input還有一些型態，如:password就是用來輸入密碼、radio就是讓使用者從選項中挑選一個、checkbox就是讓使用者從選項中挑選多個(或不挑選)。請記得，當使用radio及checkbox時，如果要讓這些選項會成為一組，name必需要一樣，而checked則是設定該選項為預設選項，如以下範例。
<!DOCTYPE html>
<html>
<body>
<form action="#" method ="post">
name:<input type="text" name ="name"/>
<input type="radio" name="status" value="faculty" checked="checked"/> Faculty
<input type="radio" name="status" value="student"/> Student
<input type="submit" value="Submit"/>
</form>
</body>
</html>
以下範例是使用checkbox:
<!DOCTYPE html>
<html>
<body>
<form action="#" method ="post">
name:<input type="text" name ="name"/>
<input type="checkbox" name="status" value="faculty" checked="checked"/> Faculty
<input type="checkbox" name="status" value="student"/> Student
<input type="submit" value="Submit"/>
</form>
<body>
<html>
在form裡，除了input之外，還可以使用select、textarea及button。
select就是下拉式選項，同樣的要定義name，如以下範例:
<!DOCTYPE html>
<html>
<body>
<form action="#" method ="post">
name:<input type="text" name ="name"/>
<select name ="status" >
<option>Faculty</option>
<option>Student</option>
</select>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
當下拉選項設為multiple的話，則多個選項可以被選擇，每個選項則定義在<option></option>中，option也可以設value，也可以設該選項為預選(selected)，如以下範例:
<!DOCTYPE html>
<html>
<body>
<form action="#" method ="post">
name:<input type="text" name ="name"/>
<select name ="status" multiple="multiple">
<option value="0" selected="selected">Faculty</option>
<option value="1">Student</option>
</select>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
textarea就是可以輸入多行的文字框，例如，可設10行(row)30列(column)，在<textarea></textarea>中間的內容就是預設的文字內容，如以下範例:
<!DOCTYPE html>
<html>
<body>
<form action="#" method ="post">
name:<input type="text" name ="name"/>
<textarea name ="comment" rows="10" cols="30">Please introduce yourself</textarea>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
botton是按鈕，也可以將input的submit，寫成button。
<!DOCTYPE html>
<html>
<body>
<form action="#" method ="post">
name:<input type="text" name ="name"/>
<button type="submit">Submit</button>
</form>
</body>
</html>
一般而言，按鈕是用來觸發一些動作(如:javascript)，而且，可以不必包在<form></form>，如:
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hi!')">Click</button>
</body>
</html>
另外，呼叫了action之後在伺服器那一端的處理(action及method的部份)，先不在此討論，因為，伺服器處理的這部份會在Spring Framework詳談。
可以利用HTML的一些語法進行簡單的檢查，如設定欄位為數字，最小值為1，最大值為5 (注意:有些語法在舊一點的瀏覽器上是無效的):
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
一般的web application都是靠View進行輸入的驗證，然而，前端的驗證可能會因為瀏覽器的版本或java script被使用者停用而失效，所以，需要伺服器端的驗證，Spring Validation就是屬於伺服器端的驗證。