HTML DOM Form name屬性用法及代碼示例

HTML DOM 表單名稱屬性與表單元素的名稱屬性相關聯。表單名稱屬性用於設置或獲取表單名稱屬性值。表單名稱屬性為表單提供名稱。

用法

以下是語法 -

設置表單名稱 -

formObject.name = name

此處，名稱指定表單的名稱。

示例

讓我們看一個 Form name 屬性的例子 -

<!DOCTYPE html>
<html>
<head>
<style>
   form {
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function ChangeName() {
      document.getElementById("FORM1").name="FORM_2";
      document.getElementById("Sample").innerHTML = "The form name is changed from FORM_1 to FORM_2 ";
   }
</script>
</head>
<body>
<h1>Form length property example</h1>
<form id="FORM1" method="post" action="/sample_page.php" name="FORM_1">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>
<p>Change the name of the form above by clicking the below button</p>
<button onclick="ChangeName()">Change Name</button>
<p id="Sample"></p>
</body>
</html>

輸出

這將產生以下輸出 -

單擊 “Change Name” 按鈕時 -

在上麵的例子中

我們首先創建了一個表單，其中 id=“FORM1”、method=“post”、action=“/sample_page.php” 並且 name 屬性值設置為 “FORM_1”。表單包含兩個文本類型的輸入字段和一個提交按鈕，用於將表單數據提交到服務器 -

<form id="FORM1" method="post" action="/sample_page.php" name="FORM_1">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>

然後我們創建了一個按鈕 “Change Name”，當用戶點擊時，它將執行 ChangeName() 方法 -

<button onclick="ChangeName()">Change Name</button>

ChangeName() 方法使用文檔對象 getElementById() 方法獲取表單元素，並將其 name 屬性值更改為 “FORM_2”。然後使用其 innerHTML() 屬性在 ID “Sample” 的段落中反映此更改 -

function ChangeName() {
   document.getElementById("FORM1").name="FORM_2";
   document.getElementById("Sample").innerHTML = "The form name is changed from FORM_1 to FORM_2 ";
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Form name Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。