Summary -

In this topic, we described about the Autofocus with detailed example.

Before Autofocus attribute, JavaScript is used to focus an element. It is actually requires developer effort and time. HTML5 introduces autofocus that resolves the above issue and saves time.

Autofocus specifies the focus should be placed to this field as quickly as it has been loaded. If Autofocus is specified along with the element, the field get highlighted once the page loaded.

Autofocus is a Boolean attribute. So, no value is required to specify along with it.

Syntax -

<input type="text" name="tracking-name" id="tracking-id" autofocus>

Example -

Below example describes about how to set autofocus attribute for the username input element.
<html>
  <head>
      <title>Autocomplete Example</title>
  </head>
  <body>
     <form action="" method="POST">
		<div class="form-group row">
			<div class="col-sm-5">
				<input type="text" name="username" id="username" 
						placeholder="username"  autocomplete="on">
			</div>
			<div class="col-sm-5">
				<input type="email" name="email" id="email" 
						placeholder="Email">
			</div>
			<div class="col-sm-2">
				<input type="submit" value="submit">
			</div>
		</div>
      </form>
  </body>
</html>

Output-


Note! The autofocus attribute can be written several ways in HTML5 like below -

  • autofocus
  • autofocus=""
  • autofocus="autofocus"