HTML - keygen 标签



HTML <keygen> 标签用于处理带有证书管理系统的 Web 表单。该元素生成一个安全密钥并提交公钥。

使用 keygen 的主要目的是对用户进行身份验证,使用公钥生成客户端证书。提交表单时会生成私钥和公钥。公钥传输到服务器,私钥保留在本地。

此标签不再推荐,因为它在 HTML5 中已弃用。

语法

<keygen name = "name">

属性

HTML keygen 标签支持 HTML 的全局事件属性。也接受一些特定的属性,如下所示。

属性 描述
autofocus html-5 autofocus 指定页面加载时 <keygen> 元素自动获得焦点。
challengehtml-5 challenge 指定要与 PublicKeyAndChallenge 中的公钥一起打包的挑战字符串,用于验证表单提交。如果没有提供挑战字符串,则将其编码为长度为零的 IA5STRING。
disabled html-5 disabled 指定 <keygen> 元素应被禁用。
form html-5 form_id 指定一个或多个表单。
keytype html-5 rsa
dsa
ec
指定密钥的秘密算法。
namehtml-5 autofocus 指定名称。

HTML keygen 标签示例

下面的例子将说明 keygen 标签的使用。在哪里、何时以及如何使用 keygen 标签来对用户进行身份验证。

创建 Keygen 输入元素

让我们来看下面的例子,我们将使用 keygen 标签。

<!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>

在整个表单中使用 Keygen

让我们来看下面的例子,我们将 keygen 标签用于注册表单。

<!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>

支持的浏览器

标签 Chrome Edge Firefox Safari Opera
keygen
html_tags_reference.htm
广告