Cara Mudah Mengatasi Password field is not contained in a form

Kemarin malam, saya ingin membuat aplikasi untuk authentifikasi dengan melibatkan email dan password. Singkat cerita saya buat sebuah halaman HTML dengan serangkaian kode JavaScript didalamnya. Sewaktu saya ingin melakukan debug, tumben-tumbennya Chrome menampilkan informasi "Password field is not contained in a form". 

Kode yang saya tulis sebenarnya sangat sederhana yaitu:

1 2 3

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

Setelah googling beberapa saat, saya tidak menemukan solusi yang jelas. Mungkin karena semua solusi ditulis dengan menggunakan bahasa Inggris jadi saya merasa tidak jelas, tapi tetap saja saya coba. Walaupun sudah mencoba semua solusi yang ditawarkan pada beberapa website tersebut, ternyata tetap tidak menampakkan hasil. Syukurlah pada akhirnya saya berhasil dengan menggunakan suatu cara.

Caranya pertama saya terjemahkan dulu informasi yang ditampilkan browser tersebut. Ternyata intinya input password seharusnya berada didalam elemen form. Jadi saya kemudian hanya tinggal menambahkan elemen form yang mengapit elemen password.

1 2 3 4 5

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

Ternyata dengan menambahkan elemen form saja, informasi eror sudah tidak tampil lagi. Tetapi masalah lain muncul yaitu input "element should have autocomplete attributes". Tapi tenang solusinya sudah saya tulis pada artikel lain juga di blog ini.

Demikian tulisan kali ini, semoga bermanfaat.