Form Input Hanya Dibaca Saja, Tidak Dapat di Klik / Edit

Read Only & Disable Input Form HTML CSS

Pada bahasa pemrograman HTML, ada yang namanya form yang dapat digunakan sebagai formulir. Tentu pada formulir pasti terdapat kolom / bidang untuk mengisi / input suatu informasi. Pada suatu kasus, diantara kalian pasti akan memerlukan tutorial ini. Sekarang akan saya bahas tentang menonaktifkan input pada form tersebut alias tidak bisa di edit / di klik / diisi.

Jika kalian lebih senang lihat video tutorial daripada membaca, silahkan scroll kebawah dan klik link video tutorial.

Ada 2 metode yang bisa digunakan dalam membuat hal seperti ini, yaitu:

  • Disabled
  • Readonly

Silahkan gunakan metode mana yang ingin kalian gunakan

Disabled

Pada tag input sebuah form (saya contohkan pada sebuah tag input), silahkan tambahkan tulisan disableddidalamnya (masih didalam tag input). Contoh: <input type="text" name="" disabled value="" />

Readonly

Penggunaan dan penempatannya sama saja, hanya tulisannya saja yang berbeda. Kali ini kalian dapat menggunakan readonlydidalam tag input nya menggantikan disabled tadi.

Contoh: <input type="text" name="" readonly value="" />

Masih bingung ? Lihat : Video tutorial cara membuat input form tidak dapat di ketik.

Tidak ada perbedaan yang begitu mencengangkan pada kedua atribut ini jika digunakan pada file HTML. Perbedaannya hanya dari warna saja, ketika kalian menggunakan disabled maka warna bidang akan memudar sedangkan readonly tidak akan merubah bidang.

Beda cerita jika kalian menggunakannya di file PHP (.php) atau file lainnya yang mengandung proses upload / pengiriman, readonly dan disabled akan berpengaruh besar terhadap bagaimana proses pengunggahan / pengiriman itu dilakukan.

Namun secara keseluruhan, atribut ini akan membuat kolom / bidang hanya dapat dibaca saja tidak dapat di klik / edit. Hal ini lebih sering dilakukan di file PHP yang ingin menampilkan data dari database di bidang input tapi tidak dapat di edit karena hanya ingin menampilkan data saja.

Selamat mencoba !

tunggu sebentar...

POS Lainnya:

Tinggalkan Komentar

avatar

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi