JavaScript 如何访问标签所在的表单

任务是从给定的表单中的标签选择元素。下面讨论了一些重要的技术。我们将使用JavaScript。

方法：

• 首先选择表单中的元素。
• 使用.form属性或.closest(‘form’)方法之一来访问父级元素。

示例1： 此示例使用上述讨论的方法，并使用.form属性。

<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script> 
<h1 style="color:green;"> 
    GeeksforGeeks 
</h1> 
<p id="GFG_UP"></p> 
<form id="formElement"> 
    Input_1: 
    <input id="input1" type="text" /> 
    <br> 
    <input type="checkbox" name="input_2"> 
    Input_2 
</form> 
<br> 
<button onclick="GFG_Fun()"> 
    click here 
</button> 
<p id="GFG_DOWN"></p> 
<script> 
    var el_up = document.getElementById('GFG_UP'); 
    var el_down = document.getElementById('GFG_DOWN'); 
    var input = document.getElementById('input1'); 
    el_up.innerHTML = "Click on the button to select the " + 
                    "form element from the input element."; 
      
    function GFG_Fun() { 
        var form = input.form; 
        el_down.innerHTML = 
        "Id of form is '" + $(form).attr("id") + "'"; 
    } 
</script>

输出:

示例2： 这个示例使用了上面讨论的方法，并使用 .closest()方法 。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script> 
  
<h1 style="color:green;"> 
    GeeksforGeeks 
</h1> 
<p id="GFG_UP"></p> 
<form id="formElement"> 
    Input_1: 
    <input id="input1" type="text" /> 
    <br> 
    <input type="checkbox" name="input_2"> 
    Input_2 
</form> 
<br> 
<button onclick="GFG_Fun()"> 
    click here 
</button> 
<p id="GFG_DOWN"></p> 
<script> 
    var el_up = document.getElementById('GFG_UP'); 
    var el_down = document.getElementById('GFG_DOWN'); 
    var input = document.getElementById('input1'); 
    el_up.innerHTML = "Click on the button to select the "+ 
                    "form element from the input element."; 
      
    function GFG_Fun() { 
        var form = (input).closest('form'); 
        el_down.innerHTML = 
        "Id of form is '" +(form).attr("id") + "'"; 
    } 
</script>

输出：