資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚學
法律學如何使用 JavaScript 動態建立表單
概要
可以透過使用一些文件物件模型 (DOM) 方法（例如 createElement()、setAttribute()、appendChild() 來建立完全動態的 HTML 表單。這些 DOM 方法將幫助我們構建動態 HTML 表單。我們構建此動態表單的方法是：在指令碼標記中建立所有元素，設定屬性以新增一些功能，最後在我們的元素準備好提供服務後，我們將在元素的父元素中附加它。因此，附加在父表單標記內的所有元素都是子元素。
語法
此任務中使用的語法為 −
createElement() 方法用於建立任何 HTML 元素。例如：div、button、p、label 等。
document.createElement(elements);
setAttribute() 方法用於在元素中插入屬性。setAttribute() 方法內的值作為鍵值對傳遞。例如：(“placeholder”,”Name”), (“type”,”submit”), (“value”,“submit”) 等。
element.setAttribute(“Key”,“Value”);
appendChild() 方法將我們使用 createElement() 建立的元素插入到任何主體標籤中。直接元素的元素引用將作為引數傳給 appendChild()。
parentElement.appendChild(element);
演算法
步驟 1 − 在編輯器上建立一個簡單的 HTML 主旨程式碼。此外，建立一個按鈕和一個表單標籤，我們的動態表單將載入其中。
步驟 2 − 在指令碼標籤內建立一個 javascript 箭頭函式。
步驟 3 − 現在使用 document.getElementById() 獲取變數中的表單，因為表單標籤由 ID 名稱定義。
步驟 4 − 從此處開始構建您的動態表單。使用 document 的 createElement() 方法建立一個新元素。
var userName = document.createElement("input");
步驟 5 − 現在使用 setAttribute() 方法在上述建立的元素中設定屬性。
userName.setAttribute("placeholder", "Name");
步驟 6 − 使用 appendChild() 方法將上述建立的元素追加到父元素中，即 id 名稱“dform”的“表單”。
dform.appendChild(userName);
步驟 7 − 重複步驟 4 - 步驟 6，並建立表單所需的所有欄位。
步驟 8 − 使用 createElement() 建立另一個元素 div，另外分別建立兩個按鈕提交和重置，並在其中追加這兩個按鈕。
步驟 9 −單擊“生成表單”按鈕，它將觸發“gForm()”函式，並將動態生成表單。
示例
在給定的示例中，我們使用 Javascript 構建了一個表單。因此，表單標籤內的任何元素都不會像使用主體標籤內的元素一樣構建為靜態元素。該表單包含學生註冊的某些欄位。這些欄位為姓名、電子郵件、地址、出生日期、電話號碼，因此所有這些都從指令碼標籤中動態呈現。
<html>
<head>
<title>Create form dynamically with js</title>
</head>
<body style="height: 90vh; width: 50%;display:flex;flex-direction: column;place-content: center; margin: auto;">
<p style="margin: 0 auto;">*Student registration form</p>
<button style="margin: 0.5rem auto;width: 10rem;" onclick="gForm()"> Generate Form </button>
<form id="dynamicForm"> </form>
<script>
gForm = () => {
var dform = document.getElementById("dynamicForm");
dform.setAttribute("style", "display:flex;flex-direction:column")
// dform.innerHTML=""
var userName = document.createElement("input");
userName.setAttribute("placeholder", "Name");
dform.appendChild(userName);
var userEmail = document.createElement("input");
userEmail.setAttribute("placeholder", "Email");
userEmail.setAttribute("type", "email");
dform.appendChild(userEmail);
var userAdd = document.createElement("input");
userAdd.setAttribute("placeholder", "Address");
dform.appendChild(userAdd);
var userDob = document.createElement("input");
userDob.setAttribute("placeholder", "D.O.B");
userDob.setAttribute("type", "date");
dform.appendChild(userDob);
var userPhn = document.createElement("input");
userPhn.setAttribute("placeholder", "Phone number");
dform.appendChild(userPhn);
var sBtn = document.createElement("input");
sBtn.setAttribute("value", "submit");
sBtn.setAttribute("type", "submit");
var rBtn = document.createElement("input");
rBtn.setAttribute("value", "reset");
rBtn.setAttribute("type", "reset");
var btns = document.createElement("div");
btns.setAttribute("style","margin:0.4rem auto")
dform.appendChild(btns);
btns.appendChild(sBtn);
btns.appendChild(rBtn);
}
</script>
</body>
</html>
在下面給出的影像中，它顯示了上述示例的輸出，顯示了學生登錄檔單生成器按鈕。在未單擊生成表單按鈕時，它會顯示一個簡單的頁面，如下所示。
在單擊上述“生成表單”按鈕時，會觸發指令碼標籤內建立的箭頭函式，結果顯示了一個動態生成的表單，其中包含學生註冊所需的所有欄位。
結論
透過完成此任務，我們可以在網頁中建立任何動態元素。網頁中的動態內容使頁面載入快速，因為在頁面載入時伺服器不必一開始就響應整個冗餘程式碼。動態表單也使頁面更具互動性。
5K+ 瀏覽量
