HTML - keygen Tag

HTML <keygen> tag is used to process Web forms with certificate management systems. The element generates a secure key and submits the public key.

Main purpose to use keygen is to authenticate a user going forward, a client certificate is generated using the public key. A private key and a public key are generated on submission of a form. The public key is transmitted to the server, and the private key is kept locally.

This tag is no longer recommended as it is deprecated in the HTML5.

Syntax

<keygen name = "name">

Attribute

HTML keygen tag supports Global and Event attributes of HTML. Accepts some specific attributes as well which are listed below.

Attribute	Value	Description
autofocus	autofocus	Specifies that when the page loads the <keygen> element automatically gets focus.
challenge	challenge	Specifies the challenge string to be packaged with the public key in the PublicKeyAndChallenge for use in verification of the form submission. If no challenge string is provided, then it is encoded as an IA5STRING of length zero.
disabled	disabled	Specifies that <keygen> element should be disabled.
form	form_id	Specifies one or more forms.
keytype	rsa dsa ec	Specifies the secret algorithm which is for the key.
name	autofocus	Specifies a name.

Examples of HTML keygen Tag

Bellow examples will illustrate the usage of keygen tag. Where, when and how to use keygen tag to authenticate a user going forward.

Create Keygen input Element

Let's look at the following example, where we are going to use the keygen tag.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML keygen Tag</title>
   </head>

   <body>
      <form>
         <keygen name = "random_key" challenge = "0987654321">
         <input name = "firstname" value = "first name">
      </form>
   </body>

</html>

Using Keygen on Whole form

Let's look at the following example, where we are going to use the keygen tag on the registration form's.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Form</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

        form {
            width: 600px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        fieldset {
            border: 1px solid black;
            padding: 10px;
            margin: 0;
        }

        legend {
            font-weight: bold;
            margin-bottom: 10px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"],
        textarea {
            width: calc(100% - 20px);
            padding: 8px;
            margin-bottom: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        input[type="submit"] {
            padding: 10px 20px;
            margin-left: 475px;
            border-radius: 5px;
            cursor: pointer;
            background-color: #04af2f;
        }
    </style>
</head>

<body>
    <form>
        <fieldset>
            <legend>
                Registration Form
            </legend>
            <keygen name="firstName" challenge="123">
            <label>First Name</label>
            <input type="text" name="FirstName" />
            <label>Last Name</label>
            <keygen name="lastName" challenge="456">
            <input type="text" name="LastName" />
            <label>Email id</label>
            <keygen name="emailid" challenge="789">
            <input type="email" name="email" />
            <label>Enter your password</label>
            <input type="password" name="password" />
            <label>Confirm your password</label>
            <input type="password" name="confirmPass" />
            <label>Address</label>
            <textarea name="address"></textarea>
            <input type="submit" value="Submit" />
        </fieldset>
    </form>
</body>

</html>

Supported Browsers

Tag
keygen	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm