HOWTO · JavaScript

在 JavaScript 中獲取 HTML 表單值

本文展示瞭如何通過 id 和 name 屬性檢索 select-option 元素和一般 case input 文字元素的值。我們將在 JavaScript 中使用獲取的值進行進一步的工作。

作者 Anika Tabassum Era發佈於 2022-05-05更新於 2024-02-15

本頁內容

在 JavaScript 中，我們可以使用特定輸入元素的 id 屬性來獲取值或觸發 name 屬性來獲取數值。

這兩種約定都將繼續從使用者那裡獲取原始資料。從技術上講，目標是獲取使用者的所有輸入並確保流程正常執行。

在這裡，我們將使用 HTML DOM 又名 document.forms 從 HTML 表單 中檢索所有元素。這裡簡要介紹了可用於與 HTML 元素和屬性互動的方法。

此外，在我們的示例中，我們將使用識別元素的 id 的隨意方式從那裡提取資訊。

在 JavaScript 中使用 `document.forms` 獲取 HTML 表單值

document.forms 方法使用 name 屬性來定位表單及其元素。從戰術上講，表單中的所有值都將通過這種啟動方式傳遞。

我們將有一個 select 元素，後跟一個多個 option 元素。我們將從那裡選擇一個偏好，並將值分開。

稍後，當 document.forms 將被啟動時，它將獲取分隔值。讓我們檢查程式碼塊是否正確視覺化。

程式碼片段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
<form name="form">
<select name="fruit" id="fruits">
  <option value="0">Select Fruit</option>
  <option value="mango">Mango</option>
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
</select>
  <button type = "submit">Hit</button>
</form>
  <p id="print"></p>
</body>
</html>

var form = document.forms['form'];
form.onsubmit = function(e) {
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML = select.toUpperCase();
}

輸出：

使用 document.forms 獲取 HTML 表單值

如你所見，採用 document.forms 方法與 HTML form 值互動的 form 物件將返回所有元素。

onsubmit 方法用於處理該選定值的進一步操作。在該例項中，select 物件使用 form 和 select 元素的相應 name 屬性獲取所需值。

後來我們在頁面上列印了大寫格式的值。

在 JavaScript 中使用 `id` 訪問 HTML 表單值

對於這個例子，我們將使用 documnet.getElementById 和 querySelector 來驅動表單輸入。

使用這種格式的工具很普遍，並且與 document.forms 方法類似。因此，以下程式碼行將演示預覽。

程式碼片段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
 <form name="form" id="forms">
  Enter name: &nbsp; 
<input type="text" id="name">
  <input type="button" value=" Click Up">
 </form>
  <p id="print"></p>
</body>
</html>

var form = document.getElementById('forms');
form.onclick = function(e) {
  e.preventDefault();
  var name = document.getElementById('name').value;
  console.log(name);
  document.getElementById('print').innerHTML = name.toUpperCase();
}