How to define keyboard input in HTML5 ?

How to define keyboard input in HTML5 ?

Last Updated : 21 Oct, 2020

The phrase tag is used to define the keyboard input. The text enclosed by <kbd> tag is typically displayed in the browser’s default monospace font. In this article, we define the keyboard input by using various types of tags like <kbd>, <code>, <em>, <var>, and <samp>. Syntax:

<kbd> Contents... </kbd>

Example 1:

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>
        How to define keyboard input
    </title>
</head>

<body>
    <h2>
        How to define a various
        Keyboard input.
    </h2>

    <kbd>GeeksForGeeks</kbd>

    <em>It is a emphasized text</em>
    <br />

    <strong>
        It is a Strong text
    </strong>
    <br />

    <code>
        It is a piece of
        computer code
    </code>
    <br />

    <samp>
        Sample output from a computer program
    </samp>
    <br />

    <kbd>Keyboard input</kbd><br />
    <var>Variable</var>
</body>

</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to define keyboard 
        input in HTML5?
    </title>

    <style>
        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="gfg">
        GeeksforGeeks
    </div>

    <h2>
        <kbd>
            HTML5: How to define 
            keyboard input?
        </kbd>
    </h2>
    
    <kbd>A computer</kbd>
    <kbd>science</kbd>
    <kbd>portal</kbd>
</body>

</html>

Output:

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

How to define keyboard input in HTML5 ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to set float input type in HTML5 ?

HTML5 is the latest version of Hypertext Markup Language (HTML), the standard language for creating web pages and web applications. With HTML5, new input types were introduced to make web form creation easier and more accessible. These input types include text, password, checkbox, radio, submit, res

How to Add Input Field inside Table Cell in HTML ?

In HTML, adding input fields inside the table cells can be done to make the application user interactive and useful in the scenarios of building forms, data entry systems, etc. Below are the approaches to add input field inside a Table Cell in HTML: Table of Content Using 'input' tagUsing data Attri

How to define a key-pair generator field in HTML5 ?

The HTML <keygen> element can help generate a key material as part of an HTML form and submit the public key. This mechanism is intended for use with certificate systems based on the web. The <keygen> element is expected to be used in an HTML form along with additional information necess

How do we take password input in HTML forms ?

In this article, we learn how to create a password input field in HTML. This can be done by using the <input> tag with type attribute which is set to the value "password". It involves sensitive information about the data of the user. The text in the input password field will be changed into bu

How to define a form for user input using HTML5 ?

In this article, we will learn how to create a form in a webpage by using the <form> tag. This tag is used to create form for user input. Also there are many elements which are used within form tag. Syntax: <form> Form Content... </form> Example: The following code snippet demonstr