- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
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 |
To Continue Learning Please Login
Login with Google