在 JavaScript 中獲取 HTML 表單值
在 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 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:
<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();
}
輸出：
JavaScript 中物件 form 訪問的表單，以及輸入的值也是從 .value 方法派生的。
在前面的例子中，我們使用 button 元素提交輸入，這裡我們使用 input type button 執行提交。
這裡的區別僅在於 onsubmit 和 onclick，兩者的工作方式相似。
