HTML Form表單提交

一、基本概念

HTML Form指的是一個包含表單元素的區域，用戶可以在該區域內輸入、選擇、提交數據等操作。Form表單通常用於用戶提交數據到Web服務器。

Form表單通過向服務器發送HTTP POST或GET請求來提交數據。POST和GET請求的區別在於HTTP請求方式不同，POST請求提交的數據會被包含在HTTP請求體中，而GET請求提交的數據則會被包含在HTTP請求URL中。

Form表單可以包含多種類型的表單元素，如文本輸入框、密碼框、單選按鈕、複選框、下拉框、上傳文件等。表單元素通過name屬性與提交的數據關聯。

二、表單元素

1、文本輸入框

文本輸入框用於接收用戶的文本輸入，以便進行後續的表單提交。文本輸入框的標籤為，type屬性設置為”text”。以下是一個簡單的文本輸入框示例：

<form>
  <label for="username">用戶名</label>
  <input type="text" id="username" name="username">
</form>

在上述示例中，label標籤為文本輸入框添加了一個描述，for屬性與文本輸入框的id屬性關聯，表示該標籤描述的是哪個表單元素。

2、密碼框

密碼框用於接收用戶的密碼輸入，輸入內容會以星號或圓點等方式隱藏。密碼框的標籤為，type屬性設置為”password”。以下是一個簡單的密碼框示例：

<form>
  <label for="password">密碼</label>
  <input type="password" id="password" name="password">
</form>

3、單選按鈕

單選按鈕用於提供多個選項中的單個選項，用戶只能選擇其中一個選項。單選按鈕的標籤為，type屬性設置為”radio”。單選按鈕需要使用同一個name屬性名稱，但不同的value屬性區分不同的選項。以下是一個簡單的單選按鈕示例：

<form>
  <label for="gender-male">男性</label>
  <input type="radio" id="gender-male" name="gender" value="male">
  <label for="gender-female">女性</label>
  <input type="radio" id="gender-female" name="gender" value="female">
</form>

4、複選框

複選框用於提供多個選項中的多個選項，用戶可以選擇其中多個選項，或者不選擇任何選項。複選框的標籤為，type屬性設置為”checkbox”。複選框需要使用同一個name屬性名稱，但不同的value屬性區分不同的選項。以下是一個簡單的複選框示例：

<form>
  <label for="fruit-apple">蘋果</label>
  <input type="checkbox" id="fruit-apple" name="fruit" value="apple">
  <label for="fruit-banana">香蕉</label>
  <input type="checkbox" id="fruit-banana" name="fruit" value="banana">
  <label for="fruit-orange">橙子</label>
  <input type="checkbox" id="fruit-orange" name="fruit" value="orange">
</form>

5、下拉框

下拉框用於提供一個下拉選項列表，其中只能選擇其中一個選項。下拉框的標籤為，需要與標籤一起使用，option標籤的value屬性值與提交時的值相關聯，同時option標籤的文本內容會顯示在下拉列表中。以下是一個簡單的下拉框示例：

<form>
  <label for="city">城市</label>
  <select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">廣州</option>
    <option value="shenzhen">深圳</option>
    <option value="hangzhou">杭州</option>
  </select>
</form>

6、文件上傳

文件上傳用於從用戶本地計算機向服務器上傳文件。文件上傳的標籤為，type屬性設置為”file”。服務器通常需要對上傳的文件進行一些安全確認，所以需要在form標籤上添加enctype屬性，值為”multipart/form-data”。以下是一個簡單的文件上傳示例：

<form enctype="multipart/form-data">
  <input type="file" id="file" name="file">
  <input type="submit" value="上傳">
</form>

三、Form提交方式

1、GET提交方式

GET提交方式將表單數據通過URL參數傳遞給服務器，數據會顯示在URL地址欄中，相比POST提交方式來說更簡單、更快捷。GET提交方式適用於提交數據量較小、不需要保密的場合。

<form method="get" action="submit.php">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

2、POST提交方式

POST提交方式將表單數據以HTTP請求體的方式傳遞給服務器，數據不會顯示在URL地址欄中，相比GET提交方式來說更安全、更適合提交大量數據和需要保密的場合。

<form method="post" action="submit.php">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

四、表單驗證

表單驗證是指在提交表單數據之前對數據進行檢查，以確保數據的正確性和合法性。

1、客戶端表單驗證

客戶端表單驗證是指在用戶提交表單之前就對錶單數據進行檢查，可以避免不必要的網絡請求，提高用戶體驗。客戶端表單驗證通常使用JavaScript編寫。

<form onsubmit="return validate()">
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>
<script>
function validate() {
  var username = document.getElementById("username").value;
  if (username === "") {
    alert("請輸入用戶名");
    return false;
  }
}
</script>

2、服務器端表單驗證

服務器端表單驗證是指在服務器接收到表單數據之後對數據進行檢查，以確保數據的正確性和合法性。服務器端表單驗證通過對數據源進行驗證，從根本上避免了數據篡改。

if (!isset($_POST["username"]) || empty($_POST["username"])) {
  die("請輸入用戶名");
}

五、總結

HTML Form表單是Web開發中必不可少的組件之一，它可以通過提供多種元素收集用戶輸入，並將用戶數據傳到服務器上。在表單提交過程中，可以使用GET或POST方式提交數據，並進行客戶端和服務端的驗證以保證數據的正確性和安全性。