表單元素詳解

表單元素是 HTML 中非常重要的一部分，它們用於收集用戶的輸入數據並將其發送到伺服器進行處理。下面我們從多個方面來詳細地闡述表單元素的相關知識。

一、表單的基礎結構

首先，我們需要了解表單的基礎結構。下面是一個基本的表單結構示例：

<form action="submit.php" method="post">
  <label for="username">用戶名:</label>
  <input type="text" name="username" id="username">
  <br>
  <label for="password">密碼:</label>
  <input type="password" name="password" id="password">
  <br>
  <input type="submit" value="提交">
</form>

其中：

form 標籤用於定義表單，在其 action 屬性中指定表單數據提交的目標地址；
method 屬性指定表單數據提交的方式，常用的有 POST 和 GET 兩種方式；
label 標籤用於描述表單控制項，通過 for 屬性將其與控制項關聯起來；
input 標籤是表單控制項的基礎元素，type 屬性指定控制項類型，name 屬性指定表單數據的鍵名，id 屬性可以在 JavaScript 中用於操作該控制項。

通過基礎結構的了解，我們可以更好地理解下面所講的表單元素。

二、輸入框類控制項

1. 文本框

文本框（input type=”text”）是最基本的表單控制項之一，它用於輸入文本信息，如用戶名、密碼、電子郵件地址等。下面是一個文本框的示例：

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

其中，屬性 id 和 name 分別表示控制項的 ID 和名稱，用於在 JavaScript 中操作該控制項；label 標籤中的 for 屬性應該與 input 標籤的 id 屬性相同，用於指定關聯的表單控制項。

2. 密碼框

密碼框（input type=”password”）用於輸入密碼信息，它的輸入內容會被隱藏，以防止信息泄露。下面是一個密碼框的示例：

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

與文本框相似，密碼框也需要在 label 標籤中使用 for 屬性與 input 標籤的 id 屬性關聯。

3. 數字框

數字框（input type=”number”）用於輸入數字，它的輸入內容僅限於數字類型。下面是一個數字框的示例：

<label for="age">年齡:</label>
<input type="number" id="age" name="age">

與其他輸入框相同，數字框也需要在 label 標籤中使用 for 屬性與 input 標籤的 id 屬性關聯。

4. 文本域

文本域（textarea）用於輸入較長的文本內容，如文章、評論等。下面是一個文本域的示例：

<label for="comment">評論:</label>
<textarea id="comment" name="comment"></textarea>

與文本框不同，文本域並沒有 type 屬性，它的內容可以在標籤對之間直接輸入，同時也可以在標籤對之間插入一些默認內容。

5. 文件上傳框

文件上傳框（input type=”file”）用於上傳文件，常用於上傳圖片、音視頻等。注意，該控制項只能使用 POST 方式提交表單，並且需要將 form 標籤的 enctype 屬性設為 “multipart/form-data”。下面是一個文件上傳框的示例：

<label for="file">文件:</label>
<input type="file" id="file" name="file">

三、選擇框類控制項

1. 單選框

單選框（input type=”radio”）用於多個選項中選擇一個。常見的應用場景為性別選擇、互斥選項等。下面是一個單選框的示例：

<label><input type="radio" name="gender" value="male">男</label>
<label><input type="radio" name="gender" value="female">女</label>

其中，name 屬性必須相同，否則它們將無法進行互斥選擇；value 屬性存儲選項的值，它會在提交表單時發送至伺服器。

2. 複選框

複選框（input type=”checkbox”）用於從多個選項中選擇一個或多個。常見的應用場景為多選題、多項選擇等。下面是一個複選框的示例：

<label><input type="checkbox" name="hobby" value="reading">閱讀</label>
<label><input type="checkbox" name="hobby" value="traveling">旅行</label>
<label><input type="checkbox" name="hobby" value="music">音樂</label>

與單選框不同，複選框的 name 屬性必須相同，但是 value 屬性可以不同，每個複選框的值在提交表單時也會被發送至伺服器。

3. 下拉框

下拉框（select）用於從多個選項中選擇一個選項。它的選項可以通過 option 標籤來定義，每個 option 標籤的 value 屬性可以用於設置該選項的值（不設置 value 屬性，則默認使用選項的文本內容）。下面是一個下拉框的示例：

<label for="province">選擇省份:</label>
<select id="province" name="province">
  <option value="anhui">安徽省</option>
  <option value="jiangsu">江蘇省</option>
  <option value="zhejiang">浙江省</option>
</select>

選擇框的選項也可以通過 JavaScript 動態生成。

四、按鈕類控制項

1. 提交按鈕

提交按鈕（input type=”submit”）用於提交表單數據到伺服器。下面是一個提交按鈕的示例：

<input type="submit" value="提交">

其中，value 屬性用於設置按鈕的文本內容。

2. 重置按鈕

重置按鈕（input type=”reset”）用於重置表單數據，將所有已填寫的數據清空。下面是一個重置按鈕的示例：

<input type="reset" value="重置">

同樣，value 屬性用於設置按鈕的文本內容。

3. 普通按鈕

普通按鈕（input type=”button”）用於執行自定義的 JavaScript 代碼，實現一些自定義的交互功能。下面是一個普通按鈕的示例：

<input type="button" value="點擊" onclick="alert('Hello World!')">

其中，onclick 屬性用於指定按鈕的點擊事件，它的值是一個 JavaScript 函數。

五、表單驗證與提交

表單驗證是保證表單數據準確性和完整性的重要手段。我們可以使用 JavaScript 來對錶單進行驗證，並且根據驗證結果採取相應的行動。下面是一個簡單的表單驗證的示例：

<form id="myForm">
  <label for="username">用戶名:</label>
  <input type="text" id="username" name="username"><br>
  <label for="password">密碼:</label>
  <input type="password" id="password" name="password"><br>
  <input type="submit" value="登錄">
</form>

<script>
  var form = document.getElementById('myForm');
  form.onsubmit = function(event) {
    var usernameInput = form['username'];
    var passwordInput = form['password'];
    if (!usernameInput.value) {
      alert('用戶名不能為空！');
      event.preventDefault();
      return;
    }
    if (!passwordInput.value) {
      alert('密碼不能為空！');
      event.preventDefault();
      return;
    }
    // 執行登錄操作...
  }
</script>

在該示例中，我們使用 form.onsubmit 來監聽表單提交事件，並在事件處理函數中對錶單進行驗證。如果驗證不通過，則通過 event.preventDefault() 來取消表單提交。

當表單驗證通過後，我們可以通過 Ajax 或表單的默認提交方式將表單數據提交至伺服器進行處理。

原創文章，作者：NFERL，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/369557.html