Cara Mudah Mengatasi Input Elements Should Have Autocomplete attributes

Artikel ini merupakan lanjutan dari kasus yang saya alami pada saat saya ingin membuat aplikasi untuk authentifikasi dengan melibatkan email dan password. Singkat cerita saya buat sebuah halaman HTML dengan serangkaian kode JavaScript didalamnya.

<form class="w3-form">
<input class="w3-input" type="email" placeholder="email">
<input class="w3-input" type="password" placeholder="password">
<button class="w3-button w3-red" type="button" onclick="login()">Masuk</button>
</form>

Setelah berhasil menghilangkan eror Pesan "Password Field is not contained in a form". Sekarang timbul pesan "Input Elements should Have Autocomplete attributes". Belajar dari pengalaman pertama kemarin, maka saya tidak langsung mencari di internet tapi saya artikan dulu informasi eror tersebut. Ternyata artinya saya harus menambahkan attribut autocomplete pada elemen input.

Atribut Autocomplete

Atribut autocomplete membantu programmer dalam mengelola sandi dalam formulir, sehingga mengurangi resiko kesalahan atau pengisian data yang salah secara tidak sengaja dengan mengambil informasi dari penyimpanan browser. Sebab biasanya browser dapat menyimpan beberapa nilai umum untuk bidang teks adalah "nama pengguna", "kata sandi saat ini" (formulir login dan ubah formulir kata sandi) dan "kata sandi baru" (pendaftaran dan ubah formulir kata sandi).

Jadi dengan atribut autocomple browser akan membantu user dalam pengisian password untuk dapat menggunakan informasi yang telah pernah dimasukkan melalui browser. Misalnya informasi berupa username dan password.

Dengan demikian anda memanfaatkan attribut autocomplete dengan isian:

"name"

"honorific-prefix"

"given-name"

"additional-name"

"family-name"

"honorific-suffix"

"nickname"

"username"

"new-password"

"current-password"

"one-time-code"

"organization-title"

"organization"

"street-address"

"address-line1"

"address-line2"

dan masih banyak lagi. Informasinya bisa anda baca di artikel berikut:

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls%3A-the-autocomplete-attribute

Contoh penggunaanya sebagai berikut:

<fieldset>
 <legend>Ship the blue gift to...</legend>
 <p> <label> Address:     <textarea name=ba autocomplete="section-blue shipping street-address"></textarea> </label>
 <p> <label> City:        <input name=bc autocomplete="section-blue shipping address-level2"> </label>
 <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label>
</fieldset>
<fieldset>
 <legend>Ship the red gift to...</legend>
 <p> <label> Address:     <textarea name=ra autocomplete="section-red shipping street-address"></textarea> </label>
 <p> <label> City:        <input name=rc autocomplete="section-red shipping address-level2"> </label>
 <p> <label> Postal Code: <input name=rp autocomplete="section-red shipping postal-code"> </label>
</fieldset>

Setelah tahu penggunaan atribut autocomplete seperti itu maka kode yang sudah saya tulis saya tambah atribut autocomplete sehingga menjadi:

<form class="w3-form">
<input class="w3-input" type="email" placeholder="email" autocomplete="current-email">
<input class="w3-input" type="password" placeholder="password" autocomplete="current-password">
<button class="w3-button w3-red" type="button" onclick="login()">Masuk</button>
</form>