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


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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。