Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML DOM Keygen Object

  • Last Updated : 05 Oct, 2021

The HTML DOM keygen object is used to represent the <keygen> element. The <keygen> element will be created using HTML DOM document.createElement() method and accessed by getElementById(). It is new in HTML5.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

document.getElementById("ID">);

Property Values

  • autofocus: It is used to set or return the keygen element get focus or not when the page loads.
  • challenge: It is used to set or return the value of the challenge attribute of a keygen element.
  • disabled: It is used to set or return that whether the keygen element is disabled or not.
  • form: It returns the reference of the form that contains the keygen element.
  • keytype: It is used to set or return the value of the keytype attribute of the keygen element.
  • name: It is used to set or return the value of the name attribute of a keygen element.
  • type: It returns the type of form element a keygen field is.

Example 1: The following example demonstrates accessing an <keygen> element.



HTML




<!DOCTYPE html>
<html>
    
<head>
    <style>
        h1 {
            color: green;
        }
  
        h2 {
            font-family: Impact;
        }
  
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
      
    <h2>HTML DOM Keygen Object</h2>
    <br>
      
    <form id="myGeeks">
        Username: <input type="text" name="uname">
        <br><br> Encryption:
        <keygen id="Geeks" form="myGeeks" 
                name="secure" autofocus>
        <input type="submit">
    </form>
  
    <p>
        To find out whether the keygen element
        automatically gets focus on page load or
        not, click the "Check" button.
    </p>
  
    <button onclick="My_focus()">Check</button>
      
    <p id="test"></p>
  
  
    <script>
        function My_focus() {
            var d = document.getElementById("Geeks").autofocus;
            document.getElementById("test").innerHTML = d;
        }
    </script>
</body>
  
</html>

 

Output:

Creating a keygen Object: 

document.createElement()

Example 2: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
        }
  
        h2 {
            font-family: Impact;
        }
  
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h2>HTML DOM Keygen Object</h2>
    <br>
      
    <form id="myGeeks">
        Username: <input type="text" name="uname">
        <br><br> Encryption:
        <input type="submit">
    </form>
  
    <p>
        Click on the below "create" button 
        to create a Keygen Element.
    </p>
  
    <button onclick="create()">Create</button>
      
    <p id="test"></p>
  
      
    <script>
        function create() {
            var x = document.createElement("KEYGEN");
            x.setAttribute("name", "security");
            document.body.appendChild(x);
            alert("A kEYGEN element is created");
        }
    </script>
</body>
  
</html>

Output: 

           

Supported Browsers: 

  • Google Chrome
  • Opera
  • Internet Explorer not supported
  • Firefox
  • Apple Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!