Summary -

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

Autocomplete helps users to complete the forms based on previous input. The autocomplete attribute is used to enable or disable the autocomplete feature of the form input elements.

The possible values are "on" or "off". The default is set to "On". If the autocomplete attribute is "on", the browser autocompletes the values of the form from the previous entries.

Autocomplete attribute works on both individual input elements (like input types text, email, URL, tel, password, text, range, date and color) or on a whole form.

Each of the fields will have autocomplete on if the entire form marked as autocomplete. Even the autocomplete is on for form, we can get it off for any of the input fields if required.

Syntax for whole form -

<form action="#" method="POST" autocomplete="on/off">
      <!-- Form elements -->
</form>

Syntax for form element -

<input type="text" name="tracking-name" id="tracking-id"
		autocomplete="on/off">

Example -

Scenario1: - Below example describes about how to set autocomplete attribute for the entire form.

<html>
  <head>
      <title>Autocomplete Example</title>
  </head>
  <body>
     <form action="" method="POST" autocomplete="on">
		<div class="form-group row">
			<div class="col-sm-5">
				<input type="text" name="username" id="username" 
						placeholder="username">
			</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 -



Scenario2: - Below example describes about how to set autocomplete attribute for the entire form and override for a single element in the form. 

<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 -