Web - 第十七章 | HTML Form表單

這邊這篇文章是個非常重要的開始，因為後端和前端的溝通，幾乎都是透過Form來做程序之間的交換。

HTML Form 表單是什麼？

HTML表單是用戶和web站點或應用程序之間交互的主要內容之一。它們允許用戶將資料發送到web站點。大多數情況下，資料被發送到web伺服器，但是web頁面也可以自己攔截它並使用它。

HTML表單是由一個或多個小部件組成的。這些小部件可以是文本字段(單行或多行)、選擇框、按鈕、複選框或單選按鈕。大多數情況下，這些小部件與描述其目的的標籤配對——正確實現的標籤能夠清楚地指示視力正常的用戶和盲人用戶輸入表單所需的內容。

HTML表單和常規HTML文件的主要區別在於，大多數情況下，表單收集的資料被發送到web伺服器。在這種情況下，你需要設置一個web伺服器來接收和處理資料。如何設置這樣的伺服器超出了本文的範圍，但是如果你想了解更多，請參閱模組後面的發送表單資料。

設計 Form 表單

在開始編寫代碼之前，最好先退一步，花點時間考慮一下你的表單。設計一個快速的模型將幫助你定義你想要詢問用戶的正確的資料集。從用戶體驗(UX)的角度來看，要記住：表單越大，失去用戶的風險就越大。保持簡單，保持專注:只要求必要的資料。在構建站點或應用程序時，設計表單是非常重要的一步。

關於用戶體驗的一些文章：

雜誌<Smashing Magazine>中有很好的關於表單用戶體驗的文章，或許其中最重要的應該是他們的Extensive Guide To Web Form Usability。
UXMatters也是一個非常有思想的資源，從基本的最佳實踐到復雜的問題如多頁表單，都有很好的建議。

簡單設計一個表單將包含三個文本字段和一個按鈕。我們向用戶詢問他們的姓名、電子郵件和他們想要發送的訊息。點擊這個按鈕將把他們的資料發送到一個web伺服器。

實現 HTML Form 表單

為了構建我們的表單，我們將使用以下HTML元素: <form>, <label>, <input>, <textarea>, and <button>。

<form>元素

所有HTML表單都以一個<form>元素開始

1
2
3

<form action="sendMail.action" method="post">

</form>

這個元素正式定義了一個表單。就像<div>元素或<p>元素，它是一個容器元素，但它也支持一些特定的屬性來配置表單的行為方式。它的所有屬性都是可選的，但至少要設置action屬性和method屬性，這被認為是最佳實踐。

action屬性定義了在提交表單時,應該把所收集的資料送給誰(/那個模組)(URL)去處理。
method 屬性定義了發送資料的HTTP方法(它可以是“get”或“post”)。

注：如果你想深入了解這些屬性是如何工作的，那麼將在發送表單資料文章中詳細說明。

<label>、<input>和<textarea>元素

<form action="sendMail.action" method="post">
   <div>
      <label for="name">姓名：</label><input type='text' id="name">
   </div>
   <div>
      <label for="mail">信箱：</label><input type='email' id="mail">
   </div>
   <div>
      <label for="msg">訊息：</label><textarea type='text' id="msg"></textarea>
   </div>
   <div>
      <button type="submit">發送郵件</button>
   </div>
</form>

使用<div>元素可以使我們更加方便地構造我們自己的代碼。注意在所有<label>元素上使用for屬性；它是將標籤鏈接到表單小部件的一種正式方式。這個屬性引用相應的小部件的id。這樣做有一些好處。最明顯的一個好處是允許用戶單擊標籤以激活相應的小部件。如果你想更好地理解這個屬性的其他好處，你可以找到如何構造HTML表單的詳細訊息。

在<input>元素中，最重要的屬性是type屬性。這個屬性非常重要，因為它定義了<input>屬性的行為方式。它可以從根本上改變元素，所以要注意它。

在我們的簡單示例中，我們使用值text作為第一個輸入——這個屬性的默認值。它表示一個基本的單行文本字段，接受任何類型的文本輸入。
對於第二個輸入，我們使用值email，它定義了一個只接受格式良好的電子郵件地址的單行文本字段。
最後一個值將一個基本的文本字段轉換為一種“智能”字段，該字段將對用戶輸入的資料進行一些檢查。

最後但同樣重要的是，要注意<input />和 <textarea></textarea>的語法。這是HTML的一個奇怪之處。<input>標籤是一個空元素，這意味著它不需要關閉標籤。相反，<textarea>不是一個空元素，因此必須使用適當的結束標記來關閉它。這對HTML表單的特定特性有影響:定義默認值的方式。要定義<input>的默認值，你必須使用value 屬性。

1	<input type="text" value="預設內容" />

如果你想定義<textarea>的默認值，你只需在<textarea>元素的開始和結束標記之間放置默認值。

1	<textarea>你好，我是J.J.Huang</textarea>

<button>元素

再添加一個按鈕，讓用戶在填寫完表單後發送他們的資料。這是通過使用<button>元素完成的。

1
2
3

<div>
   <button type="submit">發送郵件</button>
</div>

你將看到<button>元素也接受一個 type屬性，它接受三個值中的一個: submit, reset或者 button。

單擊 submit 按鈕發送表單的資料到<form>元素的action屬性所定義的網頁。
單擊 reset 按鈕將所有表單小部件重新設置為它們的默認值。從用戶體驗的角度來看，這被認為是一種糟糕的做法。
單擊 button 按鈕……不會發生任何事！這聽起來很傻，但是用JavaScript構建定制按鈕非常有用。

基本表單樣式

如何排布好表單是公認的難點。目前看起來排版非常的醜，凌亂不堪。
所以需要透過css來做排版，css的部分，我根據文章的進度來看，他是排在比較後面的，這邊就不特別說明。

要在HTML裡面寫css，必須使用樣式標籤<style>包起來。

1
2
3

<style>

</style>

form {
	/* 居中表單 */
	margin: 0 auto;
	width: 400px;
	/* 顯示表單的輪廓 */
	padding: 1em;
	border: 1px solid #CCC;
	border-radius: 1em;
}

form div+div {
	margin-top: 1em;
}

label {
	/* 確保所有label大小相同並正確對齊 */
	display: inline-block;
	width: 90px;
	text-align: right;
}

input,
textarea {
	/* 確保所有文本輸入框字體相同textarea默認是等寬字體 */
	font: 1em sans-serif;
	/* 使所有文本輸入框大小相同 */
	width: 300px;
	box-sizing: border-box;
	/* 調整文本輸入框的邊框樣式 */
	border: 1px solid #999;
}

input:focus,
textarea:focus {
	/* 給激活的元素一點高亮效果 */
	border-color: #000;
}

textarea {
	/* 使多行文本輸入框和它們的label正確對齊 */
	vertical-align: top;
	/* 給文本留下足夠的空間 */
	height: 5em;
}

.button {
	/* 把按鈕放到和文本輸入框一樣的位置 */
	padding-left: 90px;
	/* 和label的大小一樣 */
}

button {
	/* 這個外邊距的大小與label和文本輸入框之間的間距差不多 */
	margin-left: .5em;
}

向你的web伺服器發送表單資料

我這邊是使用Spring boot + thymeleaf 來實作。

application.properties
template.html
domain
Controller

測試結果

這邊轉載了大量的文章和內容，但是每個部分我都有實際去做過，並了解過。這邊轉載主要是做筆記記錄。

註：以上參考了
MDN web docs 的 Your first HTML form 文章。
MDN web docs 的發送表單資料文章。
smashingmagazine
Pagination in Web Forms | Evaluating the Effectiveness of Web Forms
7 Basic Best Practices for Buttons
Handling Form Submission