如何在 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+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始
广告