如何在 JavaScript 中查詢表單的名稱和目標？

在本文中，我們將學習如何在 JavaScript 中查詢表單的名稱和目標。

在 HTML 中，存在`

`元素，它有一些屬性：輸入、標籤、文字區域、選擇、名稱、目標。表單的 name 和 target 屬性用於在 JavaScript 中查詢這些元素。

name 屬性用於返回表單的名稱。target 屬性用於檢查表單提交時結果將在同一視窗、新視窗還是新框架中開啟。target 的可能值為 blank、_self、_top、_parent。

語法

獲取表單名稱的語法如下所示。

document.getElementById('FormID').name;

其中，**FormId** 是表單 ID 的名稱。該函式返回一個包含表單名稱的字串。

示例 1

讓我們看一個顯示錶單名稱的示例程式。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Form</title>
</head>
<body>
   <div id="form-div" style="text-align : center">
      <form id="myForm" name="Login Form" action="/action_page.php" target="_self">
         First name: <input type="text" name="fname" ><br>
         Last name: <input type="text" name="lname" ><br>
         <input type="submit" value="Submit">
      </form>
      <p id="form"></p>
   </div>
   <script>
      document.getElementById('form').innerHTML = 'Name of the form : '+document.getElementById('myForm').name;
   </script>
</body>
</html>

執行上述程式碼後，將生成以下輸出。

示例 2

以下是一個顯示錶單目標的示例程式，其目標為 **_self**。提交表單時，表單將重定向到同一頁面。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Form Target</title>
</head>
<body>
   <div id="form-div" style="text-align : center">
      <form id="myForm" name="Login Form" action="/action_page.php" target="_self">
         First name: <input type="text" name="fname" ><br>
         Last name: <input type="text" name="lname" ><br>
         <input type="submit" value="Submit">
      </form>
      <p id="form"></p>
   </div>
   <script>
      document.getElementById('form').innerHTML = 'Target of the form : '+document.getElementById('myForm').target;
   </script>
</body>
</html>

執行上述程式碼後，將生成以下輸出。

示例 3

讓我們來看一個顯示錶單目標的示例程式，其目標為 **_blank**。提交表單時，表單將重定向到一個新頁面。

<!DOCTYPE html>
<html>
<head>
   <title> To find the name and target of a form </title>
</head>
<body>
   <div id="form-div" style="text-align : center">
      <form id="myForm" name="Login Form for student" action="/action_page.php" target="_blank">
         First name: <input type="text" name="fname" ><br>
         Last name: <input type="text" name="lname" ><br>
         <input type="submit" value="Submit">
      </form>
      <p id="form"></p>
   </div>
   <script>
      document.getElementById('form').innerHTML = 'The name and target values are :'+'<br/>'+'Name of the form : '+  document.getElementById('myForm').name+'<br/>'+'Target of the form : '+document.getElementById('myForm').target;
</script>
</body>
</html>

執行上述程式碼後，將生成以下輸出。

更新於：2022年12月8日

1K+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告