HTML - keygen 标签



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

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

不再建议使用此标签,因为它在 HTML5 中已弃用。

语法  


<keygen name = "name">

属性

HTML <keygen> 标签支持 HTML 的   全局属性 和 事件属性。还接受下面列出的一些特定属性。

属性 描述
autofocus autofocus 指定在页面加载时,<keygen> 元素会自动获得焦点。(只适用html5)
challenge challenge 指定要与 PublicKeyAndChallenge 中的公钥打包在一起的质询字符串,用于验证表单提交。如果未提供质询字符串,则将其编码为长度为零的IA5STRING。(只适用html5)
disabled  disabled 指定应禁用 <keygen> 元素。(只适用html5)
form  form_id 指定一个或多个窗体。(只适用html5)
keytype  rsa
dsa
ec
指定用于密钥的密钥算法。(只适用html5)
name autofocus 指定名称。(只适用html5)

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

在整个表单上使用注册机

让我们看一下以下示例,我们将在注册表上使用注册机标签。


<!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
是否支持 Yes Yes Yes Yes Yes