Keyboard Shortcut in HTML

For Displaying the Keyboard text, we can also create the keyboard shortcut to perform various operations, such as clicking a link or button. We can use the accesskey attribute when defining the element  to provide the keyboard shortcut to that element or control. Let's create a Web Page, named "accesskey.html" and understand ‘How to create a keyboard shortcut.

First We will Write a Code for ‘accesskey.html :




    <title>Key Board Shortcut</title>




        Use the Shortcut keys to access the Content



        Press the <kbd>Alt + W</kbd> keys to navigate the following link :


    <a href="XYZ.html" accesskey="w" target="">Open XYZ.html file. </a>


        Press the <kbd>ALT + Z </kbd>keys to focus on the following text field


    Enter Your Name :

    <input type="text" name="name" accesskey="z">


        Press the <kbd>ALT+S</kbd> keys to click the button to submit the form:</p>

    <input type="submit" accesskey="s" onclick="alert('Form submitted successfully.')">



Here we have used a hyperlink, a text field and a button on the web page and assigned a keyboard shortcut using the accesskey attribute. The output of the above code is given below :

Now When we press  ALT + * Key :

  • ALT + W : The focus goes on the hyperlink, and we get redirected to the page specified by the hyperlink (XYZ.html)
  • ALT+Z : When we press ALT+Z key then get a focus on the Enter your Name text field.
  • ALT+S: This focuses  on Submit button and give an alert box  :


Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now