当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


HTML form method用法及代码示例


DOM表单方法属性用于设置或返回表单中方法属性的值。 method属性用于指定提交表单时用于发送数据的HTTP方法。 HTTP方法有两种,即GET和POST。

用法:

  • 它用于返回method属性:
    formObject.method
  • 用于设置方法属性。
    formObject.method = get|post
  • 属性值


    • GET:在GET方法中,提交表单后,表单值将在新浏览器选项卡的地址栏中可见。
    • POST:在post方法中,提交表单后,表单值将在新浏览器选项卡的地址栏中不可见,因为它在GET方法中可见。

    返回值它返回一个字符串值,该字符串值表示提交表单时用于发送数据的HTTP方法。

    示例1:说明如何设置属性的HTML程序。

    <!DOCTYPE html> 
    <html> 
      
    <body style="text-align:center;"> 
        <h1 style="color:green;"> 
          GeeksForGeeks 
      </h1> 
        
        <h2>DOM Form method Property.</h2> 
        <form id="users" 
              action="#" 
              method="GET"
              target="_blank"> 
            First name:
            
            <input type="text" 
                   name="fname"
                   value="Manas"> 
            
            <br> Last name:
            <input type="text"
                   name="lname" 
                   value="Chhabra"> 
            
            <br> 
            <input type="submit" 
                   value="Submit"> 
        </form> 
      
        <p>Click the "Try it" button to return the 
          value contained in the form.</p> 
      
        <button onclick="myGeeks()">Try it</button> 
      
        <p id="sudo"
           style="font-size:25px;color:green;"> 
      </p> 
      
        <script> 
            function myGeeks() { 
                
                // Set property of method. 
                var x = 
                    document.getElementById("users").method =  
                    "POST"; 
                document.getElementById("sudo").innerHTML =  
                  "The value of the method attribute was changet to " 
                + x; 
            } 
        </script> 
      
    </body> 
      
    </html>

    输出:

    在单击按钮之前:

    单击按钮后:

    示例2:HTML程序说明了如何返回属性。

    <!DOCTYPE html> 
    <html> 
      
    <body style="text-align:center;"> 
        <h1 style="color:green;"> 
          GeeksForGeeks 
      </h1> 
        <h2>DOM Form method Property. 
      </h2> 
        
        <form id="users" 
              action="#" 
              method="GET" 
              target="_blank"> 
            First name:
            
            <input type="text" 
                   name="fname" 
                   value="Manas"> 
            <br> Last name:
            
            <input type="text"
                   name="lname"
                   value="Chhabra"> 
            <br> 
            
            <input type="submit"
                   value="Submit"> 
        </form> 
      
        <p>Click the "Try it" button to return  
          the value of the method attribute.</p> 
      
        <button onclick="myGeeks()"> 
          Try it 
      </button> 
      
        <p id="sudo" 
           style="font-size:25px;color:green;"> 
      </p> 
      
        <script> 
            function myGeeks() { 
                
                // Return the property value  
                var x = document.getElementById( 
                  "users").method; 
                document.getElementById( 
                  "sudo").innerHTML = x; 
            } 
        </script> 
      
    </body> 
      
    </html>

    输出:

    在单击按钮之前:

    单击按钮后:

    支持的浏览器:下面列出了DOM Form方法“属性”支持的浏览器:

    • 谷歌浏览器
    • IE浏览器
    • Firefox
    • Opera
    • Safari


相关用法


注:本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML | DOM form method Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。