HTML DOM 表單 name 屬性


HTML DOM 表單 name 屬性與表單元素的 name 特性相關聯。表單 name 屬性用於設定或獲取 form name 特性值。表單 name 屬性為表單指定了名稱。

語法

以下為語法 −

設定表單 name −

formObject.name = name

此處,name 指定表單名稱。

示例

我們來看一個表單 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>

輸出

將產生以下輸出 −

點按“更改名稱”按鈕時 −

在上例中

我們首先建立了一個 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>

然後我們建立了一個按鈕“更改名稱”,使用者點按此按鈕時將執行 ChangeName() 方法 −

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

ChangeName() 方法使用文件物件 getElementById() 方法獲取表單元素,並將其 name 屬性值更改為“FORM_2”。然後,這一更改反映在 id 為“Sample”的段落中,使用其 innerHTML() 屬性 −

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

更新於:20-2-2021

235 次瀏覽

開啟你的職業生涯

完成課程即可獲得認證

入門
廣告
© . All rights reserved.