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 :
<!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 :
![Image-1.jpg]()
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 :
![Image-2.jpg]()