Pada tutorial kali ini kita akan membahas tentang input tipe password pada form html. Textfield tipe Password ini sama dengan Textfield tipe Text. Perbedaannya hanya pada format data saat dimasukan. Jika pada Password ini akan tertandai dengan tanda bintang/asterisk dengan begitu password yang dimasukan tidak akan diketahui oleh orang lain.
Pemakaian Textfield Password ini sama seperti pada Textfield biasa. Di bawah ini langsung saja saya berikan contohnya :
Tag Input Type Password Password :Dan di bawah ini adalah hasilnya :
Membatasi Jumlah Input
Anda dapat membatasi jumlah input password dengan menggunakan atribut maxlength.
Disini akan saya batasi inputan adalah 12.
Tag Input Type Password Password :Dan di bawah ini adalah hasilnya :
Mengatur Ukuran Textfield
Anda dapat mengatur ukuran panjang Textfield password dengan menggunakan atribut size.
Tag Input Type Password Textfield Size=10 :Textfield Size=20 :
Dan di bawah ini adalah outputnya :
Mendisabled Textfield Password
Anda juga dapat membuat Mendisable Textfield Password ini dengan atribut disabled.
Tag Input Type Password Password :Cara ini biasanya digunakan agar pengunjung mengisi form isian lainnya lebih dulu, dengan begitu form inputan yang terdisable akan aktif. Biasanya cara ini menggunakan sintaks Javascript.
Menjadikan Textfield Hanya dapat dibaca
Sebuah Textfield juga hanya dapat dibaca dan tidak dapat dirubah lagi isinya. Caranya adalah dengan menambahkan atribut readonly pada elemen tag input.
Tag Input Type Password Password :Dengan begitu isian Textfield di atas, hanya dapat dibaca namun tidak dapat dirubah. Namun pastinya akan terkesan aneh jika anda menggunakan atribut ini pada input tipe password.
Fungsi Atribut Name dan Value
Atribut name digunakan untuk menamai Textfield Password ini, nama ini diperlukan jika sewaktu – waktu dipanggil untuk pengolahan data oleh suatu bahasa pemrograman website [PHP, ASP, JSP].
Sedangkan atribut value digunakan untuk memberikan nilai pada Textfield Password ini.
Tag Input Atribut Name dan Value Password :Output :
Untuk beberapa keperluan tertentu, Anda tentunya membutuhkan penggunaan form di website yang Anda miliki misalnya form untuk survei, form biodata, form pendaftaran, form login, dan yang lainnya.
Form memungkinkan pengguna berinteraksi dengan teks, grafik, atau yang lainnya yang ditampilkan pada browser. Form memiliki beberapa tipe elemen input seperti text, radio, submit dan yang lainnya. Sebelumnya, kita sudah membahas tentang elemen input type text. Nah, pada pembahasan kali ini, saya akan menjelaskan tentang penggunaan elemen input tipe password dan submit pada form di HTML. Untuk lebih jelasnya, mari simak penjelasan dibawah ini :
Elemen input type=”password”
Elemen input tipe password digunakan untuk membuat kotak teks tetapi semua teks yang ditulis ditampilkan dalam karakter lain seperti “*” untuk memberikan keamanan pada seluruh data yang dimasukkan.
Elemen input type=”submit”
Elemen input tipe submit digunakan untuk membuat tombol dimana tombol itu berguna untuk mengirimkan data form ke server untuk diolah. Adapun sintaks dari elemen tipe ini secara umum yaitu :
Untuk memperjelas sintaks diatas, saya akan jelaskan kembali kegunaan atribut value yang sudah dibahas pada tutorial sebelumnya. Atribut value pada elemen input tipe submit yang berupa button digunakan untuk menentukan teks yang ditulis pada button tersebut, jika tidak menuliskan atribut value juga tidak apa-apa.
Agar Anda lebih memahami penggunaan dari kedua tipe elemen input diatas, berikut dibawah ini contoh kode penulisan dan penggunaan kedua tipe elemen input tersebut di HTML :
Penggunaan Tipe Input Password dan Submit di HTML FormsIsilah formulir dibawah ini dengan baik dan benar !
Nama Depan :Nama Belakang :
Email :
Password :
Setelah kode diatas dijalankan pada browser maka akan tampil seperti gambar dibawah ini :
Nah, gambar diatas adalah contoh form yang belum diisi [masih kosong]. Agar Anda dapat melihat perbedaan tampilan data pada kotak teks password, lihat contoh gambar dibawah ini :
Nah, apa yang akan terjadi ketika tombol submit Anda klik ? Setelah Anda klik tombol submit maka akan menuju pada URL atau lokasi dari file yang akan mengolah data di form tersebut. Pada contoh diatas, data pada form akan diolah oleh file proses_input.php [ Note : file proses_input.php adalah file kosong karena hanya merupakan contoh saja]. Berikut contoh gambar addres bar web page setelah tombol submit di klik :
Nah, sekarang mari perhatikan addres bar pada gambar diatas. Sebelumnya, kita membuat form dengan menggunakan method GET. Method GET akan menampilkan data form yang akan dikirim di bagian akhir URL yang selanjutnya akan ditampung oleh action.
Jadi semua data yang Anda masukkan di form akan ditampilkan di address bar setelah URL seperti yang ditunjukkan oleh gambar address bar diatas. Sekian materi penggunaan element input type password dan input type submit pada form HTML. Semoga bermanfaat.
Part 27: Cara Membuat Form Sederhana
Part 29: Atribut Readonly, Disabled, Dan Target