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


HTML Form autocomplete用法及代碼示例


HTML DOM中的Form autocomplete屬性用於設置或返回autocomplete屬性。自動完成屬性用於指定自動完成屬性具有“on”值還是“off”值。當autocomplete屬性設置為on時,瀏覽器將自動完成用戶之前輸入的值。

用法:

  • 它用於返回自動完成屬性。
    formObject.autocomplete
  • 它用於設置自動完成屬性。
    formObject.autocomplete = on|off
  • 屬性值:


    • on:它是默認值。它會自動完成值。
    • off:它定義了用戶應填寫輸入字段的所有值。它不會自動完成這些值。

    返回值:它返回一個表示自動完成屬性狀態的字符串值。

    範例1:該HTML程序說明了如何返回屬性。

    <!DOCTYPE html>  
    <html>  
      
    <head> 
        <title> 
            HTML DOM Form autocomplete Property 
        </title> 
    </head> 
      
    <body> 
           
        <h1>GeeksForGeeks</h1> 
          
        <h2>DOM Form autocomplete Property</h2> 
          
        <form action="#" method="post" id="users" autocomplete="on">  
              
            <label for="username">Username:</label>  
              
            <input type="text" name="username" id="Username"> <br> 
              
            <label for="password">Password:</label>  
              
            <input type="password" name="password" id ="password"><br><br> 
        </form>  
          
        <button onclick="myGeeks()">Submit</button> 
          
        <p id="GFG"></p> 
          
        <!-- Script to display autocomplete value -->
        <script> 
        function myGeeks() { 
            var auto_comp = document.getElementById("users").autocomplete; 
            document.getElementById("GFG").innerHTML = auto_comp; 
        } 
        </script> 
    </body>  
      
    </html>                                    

    輸出:
    在單擊按鈕之前:

    單擊按鈕後:

    範例2:本示例將表單自動完成函數設置為關閉。

    <!DOCTYPE html>  
    <html>  
      
    <head> 
        <title> 
            HTML DOM Form autocomplete Property 
        </title> 
    </head> 
      
    <body> 
           
        <h1>GeeksForGeeks</h1> 
          
        <h2>DOM Form autocomplete Property</h2> 
          
        <form action = "#" method="post" id="users" autocomplete="on">  
              
            <label for="username">Username:</label>  
            <input type="text" name="username" id="Username"> <br> 
              
            <label for="password">Password:</label>  
            <input type="password" name="password" id ="password"><br><br> 
        </form>  
          
        <button onclick="myGeeks()">Submit</button> 
          
        <p id="GFG"></p> 
          
        <script> 
        function myGeeks() { 
            var x = document.getElementById("users").autocomplete = "off"; 
              
            document.getElementById("GFG").innerHTML 
                    = "Now the autocomplete is set to " + x; 
        } 
        </script> 
    </body>  
      
    </html>                    

    輸出:
    在單擊按鈕之前:

    單擊按鈕後:

    支持的瀏覽器:下麵列出了DOM Form autocomplete屬性支持的瀏覽器:

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


相關用法


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