In this section, we will learn what the accesskey attribute is and how to use it in HTML.
HTML Shortcuts: HTML accesskey Attribute Definition and Usage
The accesskey attribute is a way of setting a shortcut key to get the focus to an element in an HTML document. This means after setting a key on a keyboard for an element as the value of this attribute, if we hit that key, that element on the HTML document will get the focus.
Note: the way to use the specified key is different from browser to browser.
For example, in the Chrome, Edge, Internet Explorer and Safari, we use [Alt] + the key to activate the shortcut key.
But in Firefox we use [Alt]+[Shift] + the key, to activate the shortcut key.
HTML accesskey Attribute Syntax
<element accesskey = “key”>HTML accesskey Attribute Values
The value we set for this attribute should only be a single character. For example, h, a, b, c, etc.
Example: using accesskey attribute in HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun :)</title>
</head>
<body >
<form action="/loginn" method="POST" >
<label form="username">Username: </label> <input accesskey="u" id="username" type="text" > <br>
<label form="password">Password: </label> <input accesskey="p" id= "password"type="password" ><br>
<input type="submit" name="submit" value="Log in :)">
</form>
</body>
</html>If you run this example in the Chrome browser and hit [Alt] + u, the username box will get the focus and you can write username afterwards. Also if you hit [Alt] + p, the password box will get the focus instead and you can write a password afterwards.