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 of 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 :
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Key Board Shortcut</title>
- </head>
- <body>
- <h1>
- Use the Shortcut keys to access the Content
- </h1>
- <p>
- Press the
- <kbd>Alt + W</kbd> keys to navigate the following link :
- </p>
- <a href="XYZ.html" accesskey="w" target="">Open XYZ.html file. </a>
- <p>
- Press the
- <kbd>ALT + Z </kbd>keys to focus on the following text field
- </p>
- Enter Your Name :
- <input type="text" name="name" accesskey="z">
- <p>
- 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.')">
- </body>
- </html>
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 :