AutoComplete in html form
html
tomoyukikashiro
<label for="fullName">Name</label>
<input type="text" name="name" id="fullName" placeholder="Full name" required autocomplete="name">
These parts of form has 2 important things.name
and autocomplete
attribute.
name and autocomplete attribute provide hint for autocomplete.
If you put appropriate value in name
and autocomplete
these may be hint for autocomplete.
It’s helpful for mobile user to input payment data (e.g. card number)
You can check autocomplete
value in whatwg
specification. (this specification is extended from that of W3C)
specification
example
- name
- honorific-prefix
- given-name
- additional-name
- family-name
- honorific-suffix
- nickname
- username
- new-password
- current-password
- organization-title
- organization
etc…
Attension
Auto-complete only works when the form method is post.
call autocomplete from Javascript
- user click button to call autocomplete.
- browser show dialog to input card and address information.
- after save it, information you need is inputed automatically from saved data.
- if this is second visit you only select data from dialog.
sample page
https://codepen.io/Tkashiro/full/EajRrG
html
<h1>Credit Card Information</h1>
<form id="cardf-form" action="POST">
<div>
<label for="f-email">email</label>
<input id="f-email" type="email" autocomplete="email" name="email">
</div>
<div>
<label for="f-card-name">card name</label>
<input id="f-card-name" type="text" autocomplete="cc-name" name="card-name">
</div>
<div>
<label for="f-card-num">card number</label>
<input id="f-card-num" type="text" autocomplete="cc-number" name="card-num">
</div>
<div>
<label for="f-card-exp-month">card expire month</label>
<input id="f-card-exp-month" type="text" autocomplete="cc-exp-month" name="card-exp-month">
</div>
<div>
<label for="f-card-exp-year">card expire year</label>
<input id="f-card-exp-year" type="text" autocomplete="cc-exp-year" name="card-exp-year">
</div>
<div>
<label for="f-card-csc">card security code</label>
<input id="f-card-csc" type="text" autocomplete="cc-csc" name="card-csc">
</div>
</form>
<button id="request-autocomplete">Request AutoComplete</button>
Javascript
document.addEventListener('DOMContentLoaded', function(){
var button = document.querySelectorAll('#request-autocomplete')[0];
var form = document.querySelectorAll('#cardf-form')[0];
button.addEventListener('click', function(event) {
form.requestAutocomplete();
event.preventDefault();
});
form.addEventListener('autocomplete', function() {
});
form.addEventListener('autocompleteerror', function(event) {
if (event.reason == 'invalid') {
}
else if (event.reason == 'cancel') {
}
else if (event.reason == 'disabled') {
}
});
});
Attension
- you meet to call
.requestAutocomplete()
inhttps
page..requestAutocomplete()
need to be called from user action. (e.g. click)- you have to check
whatwg
specification about autocomplete value. browser input data automatically by the reference autocomplete value.