Logo Komodo Koding /Koding

Input password di HTML

Menerima masukan data password bisa dengan input password dari HTML agar tersembunyi

Tidak jarang, pengguna situs kita perlu memasukkan sebuah password. Sebagai bagian dari keamanan, kita perlu menyembunyikan text passwordnya dengan tag input type password.

Contoh input password

<input type='password'>

Yang menghasilkan

Coba klik kotaknya 👆🏼 dan ketik sesuatu. Kamu akan lihat karakternya berubah jadi titik untuk menyembunyikannya.

Nilai contoh dengan atribut placeholder

Kita bisa memberi petunjuk atau contoh dari isian passwordnya, dengan atribut placeholder

<input type='password' placeholder='masukkan password di sini'>

Yang menghasilkan

Nilai default dengan atribut value

Kita bisa memberi nilai otomatis dari isian passwordnya, dengan atribut value

<input type='password' value='otomatis!'>

Yang menghasilkan

Mengatur panjang input password

Panjang dari input bisa disesuaikan dari berapa karakter yang ingin dimasukkan dengan menggunakan atribut size. Sebagai contoh saya ingin memberi ukuran 5 karater.

<input type='password' size='5'>

Yang menghasilkan

*Perhatikan panjang dari input password kita kali ini berubah.

Memberi batas maksimal input password

Jika dengan atribut size mengatur tampilan kotaknya, kali ini kita bisa membatasi berapa maksimal karakter yang dimasukkan dengan atribut maxlength.

<input type='password' maxlength='5'>

Yang menghasilkan

*Coba masukkan lebih dari 5 karakter!

Memberi batas minimal input password

Jika dengan atribut size mengatur tampilan kotaknya, kali ini kita bisa membatasi berapa minimal karakter yang dimasukkan dengan atribut minlength.

<input type='password' minlength='3'>

Yang menghasilkan

Jika kamu coba memasukkan kurang dari 3 karakter dan tekan tombol submit, maka akan muncul sebuah warning (pengingat).