javascript 獲取本頁面表單的值
在Web前端開發中，表單是一個非常重要的元素，它通常用來接收用戶輸入，并將這些輸入數據提交到后臺進行處理。在JavaScript里，獲取表單數據也是非常常見的操作。本文將介紹如何使用JavaScript獲取本頁面表單的值，并通過具體的實例進行講解。
獲取表單元素
我們首先需要獲取表單元素，以便能夠對其進行操作。使用JavaScript的document對象的getElementById()方法可以獲取表單元素。該方法的參數是表單元素的ID。例如，以下代碼獲取了名為"myForm"的表單元素：

var myForm = document.getElementById("myForm");

獲取表單元素的value屬性
獲取表單元素的值通常使用value屬性。該屬性包含了表單元素的當前值。例如，以下代碼獲取了名稱為"name"的input元素的值：

var nameValue = document.getElementById("name").value;

上述代碼假設我們已經有了一個名為"name"的input元素，并且它的ID為"name"。代碼將該元素的值存儲在nameValue變量中。
獲取單選按鈕和復選框的值
對于單選按鈕和復選框，我們需要遍歷它們來確定哪個按鈕被選中。例如，以下代碼獲取名稱為"gender"的單選按鈕組的值：

var genderGroup = document.getElementsByName("gender");
var genderValue;
for (var i = 0; i < genderGroup.length; i++) {
if (genderGroup[i].checked) {
genderValue = genderGroup[i].value;
}
}

上述代碼將獲取一個名稱為"gender"的單選按鈕組的所有元素，并遍歷該組元素。一旦找到選中的按鈕，代碼將該按鈕的值存儲在genderValue變量中。
對于復選框，可以使用類似的方法：

var checkboxes = document.getElementsByName("hobbies");
var hobbiesValues = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
hobbiesValues.push(checkboxes[i].value);
}
}

上述代碼將獲取名稱為"hobbies"的多個復選框元素，并遍歷這些元素。一旦找到選中的復選框，代碼將該復選框的值存儲在hobbiesValues數組中。
獲取下拉列表的值
獲取下拉列表的值通常比較簡單。我們只需要獲取該列表元素，并讀取其selectedIndex屬性。該屬性指示哪個選項當前被選中。例如，以下代碼獲取名稱為"city"的下拉列表框的值：

var citySelect = document.getElementById("city");
var cityValue = citySelect.options[citySelect.selectedIndex].value;

上述代碼將獲取名為"city"的下拉列表框，讀取其selectedIndex屬性，并將選中的值存儲在cityValue變量中。
獲取文本區域的值
由于文本區域輸入的文本可能比較長，我們需要使用value屬性來獲取這些文本。例如，以下代碼獲取名稱為"comment"的文本區域框的值：

var commentValue = document.getElementById("comment").value;

上述代碼將獲取名為"comment"的文本區域框，讀取其value屬性，并將文本內容存儲在commentValue變量中。
總結
本文介紹了如何使用JavaScript獲取本頁面表單的值。通過具體的實例，我們了解了獲取各種表單元素的方法。在實際開發中，我們經常需要獲取表單數據，并將其提交到后臺進行驗證和處理。因此，掌握JavaScript獲取表單數據的方法是非常重要的。