JavaScript中表單數據提取

表單是網頁上最常見的元素之一，通過輸入框、選擇框、單選框和復選框等控件，用戶可以方便地提交數據。在Web開發中，提取表單數據是開發過程中必不可少的一部分。JavaScript提供了一些內置方法，來幫助我們在客戶端提取表單數據。

下面是一些常見的表單控件及其提取數據的方法：

<input type="text" name="username" id="username">
var username = document.getElementById("username").value;
console.log(username);

上面的代碼通過id屬性獲取了用戶名輸入框的值，并打印到控制臺上。

<textarea name="message" id="message"></textarea>
var message = document.getElementById("message").value;
console.log(message);

文本框的提取與輸入框類似，也是通過value屬性獲取。

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
var gender = document.querySelector('input[name="gender"]:checked').value;
console.log(gender);

單選框的提取相對復雜一些，需要通過querySelector方法來獲取選中的選項。

<input type="checkbox" name="like[]" value="apple"> Apple
<input type="checkbox" name="like[]" value="banana"> Banana
<input type="checkbox" name="like[]" value="orange"> Orange
var likes = [];
var checkboxes = document.getElementsByName("like[]");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
likes.push(checkboxes[i].value);
}
}
console.log(likes);

復選框的提取也需要遍歷所有的選項，將選中的值存放到一個數組中。

以上只是一部分常見的表單控件，如果要提取更復雜的表單數據，可能需要使用一些現成的框架或庫來幫助處理。

總之，Web開發中，表單數據的提取是一個非常基礎的操作，JavaScript提供了許多內置方法來方便我們處理表單數據。