當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


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。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。