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


HTML Input Image formEnctype用法及代碼示例


HTML DOM中的Input Image formEnctype屬性用於設置或返回輸入圖像的Enctype屬性的值。此屬性指定提交給服務器時應以編碼形式顯示的數據。僅當方法= “POST”時,才可以使用這種類型的屬性。它覆蓋<form>元素的enctype屬性。句法:

  • 它返回formEnctype屬性。
    imageObject.formEnctype
  • 它用於設置formEnctype屬性。
    imageObject.formEnctype = "application/x-www-form-urlencoded,
    multipart/form-data, text/plain"
  • 屬性值:

    • application/x-www-form-urlencoded:它是默認值。在發送到服務器之前,它將對所有字符進行編碼。它轉換空格並將其轉換為+符號,並將特殊字符轉換為其十六進製值。
    • multipart/form-data:它不編碼任何字符。
    • text/plain:此值將空格轉換為+符號,但不轉換特殊字符。

    返回值:當它發送到服務器時,它返回一個字符串值,該值代表表單數據的編碼類型。


    範例1:此示例說明了如何返回輸入圖像formEnctype屬性。

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
            HTML DOM Input Image formEnctype 
        </title> 
    </head> 
      
    <body style="text-align:center;"> 
      
        <h1 style="color:green;">  
          GeeksforGeeks  
        </h1> 
      
        <h4> 
          DOM Input Image formEnctype Property 
        </h4> 
        <button onclick="my_geek()"> 
            <input id="myImage" formEnctype="application/x-www-form-urlencoded" 
                   type="image" formtarget="#" src= 
    "https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png" 
                   alt="Submit" width="48" height="48" formMethod="post" 
             formNoValidate> 
        </button> 
      
        <h2 id="Geek_h" style="color:green;">  
      
            </h2> 
        <script> 
            function my_geek() { 
      
                // Return target, alt and height.  
                var txt = document.getElementById( 
                    "myImage").formEnctype; 
                document.getElementById( 
                    "Geek_h").innerHTML = txt; 
            } 
        </script> 
    </body> 
      
    </html>

    輸出:

    • 在單擊按鈕之前:
    • 單擊按鈕後:

    示例2:本示例說明了如何設置formEnctype屬性。

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
            HTML DOM Input Image formEnctype 
        </title> 
    </head> 
      
    <body style="text-align:center;"> 
      
        <h1 style="color:green;">  
          GeeksforGeeks  
        </h1> 
      
        <h4> 
          DOM Input Image formEnctype Property 
        </h4> 
        <button onclick="my_geek()"> 
            <input id="myImage" formEnctype="application/x-www-form-urlencoded" 
                   type="image" formtarget="#" src= 
    "https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png" 
                   alt="Submit" width="48" height="48" formMethod="post"
             formNoValidate> 
        </button> 
      
        <h2 id="Geek_h" style="color:green;"></h2> 
        <script> 
            function my_geek() { 
      
                // Return target, alt and height.  
                var txt = document.getElementById( 
                    "myImage").formEnctype = "text/plan"; 
                document.getElementById( 
                    "Geek_h").innerHTML =  
                  "The value of the formEnctype Attribute was changed to " 
                  + txt; 
            } 
        </script> 
    </body> 
      
    </html>

    輸出:

    • 在單擊按鈕之前:
    • 單擊按鈕後:

    支持的瀏覽器:下麵列出了HTML DOM輸入圖像formEnctype屬性支持的瀏覽器:

    • 穀歌瀏覽器
    • IE瀏覽器
    • Firefox
    • Opera
    • Safari


相關用法


注:本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 HTML | DOM Input Image formEnctype Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。