在網頁開發(fā)中，F(xiàn)orm 表單是常用的數(shù)據(jù)提交方式，通過設置表單的數(shù)據(jù)格式，我們可以更好地管理數(shù)據(jù)，方便后續(xù)的數(shù)據(jù)處理和展示。現(xiàn)在，越來越多的開發(fā)者開始使用 JSON 數(shù)據(jù)格式作為表單數(shù)據(jù)的傳輸格式，因為 JSON 有著簡潔明了、易于解析的特點。下面我們來看看如何在表單中設置 JSON 格式的數(shù)據(jù)。

<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="age">年齡:</label>
<input type="number" id="age" name="age"><br>
<label for="email">郵箱:</label>
<input type="email" id="email" name="email"><br>
<button type="button" onclick="submitForm()">提交</button>
</form>

以上是一個簡單的表單的 HTML 代碼，我們可以看到每個表單控件都有一個 name 屬性，這個屬性非常重要，因為后續(xù)我們會以這個屬性的值作為 JSON 中的 key。提交按鈕的 onclick 事件會觸發(fā) submitForm() 函數(shù)，下面我們來看看這個函數(shù)的代碼。

function submitForm() {
var formData = {};
var formElements = document.getElementById("myForm").elements;
for (var i = 0; i < formElements.length; i++) {
formData[formElements[i].name] = formElements[i].value;
}
var jsonData = JSON.stringify(formData);
console.log(jsonData);
}

submitForm() 函數(shù)實現(xiàn)了將表單數(shù)據(jù)轉為 JSON 格式的功能，首先創(chuàng)建一個空對象 formData，然后通過表單的 elements 屬性獲取到所有的表單控件，遍歷表單控件，將 name 屬性作為 key，value 屬性作為值，存儲到 formData 對象中。最后，調用 JSON.stringify() 方法將 formData 轉為 JSON 字符串，輸出到控制臺中。

通過以上的代碼，我們就可以在表單中使用 JSON 數(shù)據(jù)格式了，方便后續(xù)的數(shù)據(jù)處理和展示。