Pemrograman, Teknologi

Cara Mengubah Inputan Form Menjadi Kapital di HTML

Posted by Andika Saputra on 30 September 2018

Dalam pembuatan sebuah project website, terkadang kita butuh agar sebuah inputan diketik dengan menggunakan huruf kapital (uppercase). Ada beberapa metode yang bisa digunakan untuk membuat inputan user itu menjadi huruf kapital. Dalam tulisan ini, saya akan berbagi cara untuk membuat huruf kapital itu di bagian tampilan / front end (HTML).

Dengan CSS

Nah, yang pertama ini adalah cara yang cukup simple dan bisa berjalan walaupun javascript di browser dimatikan. Yaitu dengan menggunakan CSS. Caranya adalah dengan menggunakan property text-transform: uppercase. Contohnya seperti di bawah ini.

Pada bagian input, kita punya input bertipe text yang memiliki classinput-upper‘. Nah class ini yang akan kita buat menjadi uppercase pada bagian style menggunakan properti text-transform: uppercase. Kemudian kita juga mengatur placeholdernya. Ini digunakan, agar apabila kita memberikan placeholder pada inputan ini, tidak akan menjadi uppercase / huruf kapital.

Dengan menggunakan metode ini, apapun yang user ketikkan di dalam inputan ini, akan “berubah” menjadi kapital. Akan tetapi, dengan metode ini, apabila kita mengirimkan / submit data form ini, inputan akan tetap terkirim seperti apa yang diketik oleh user, walaupun di tampilan sudah menjadi kapital. Contoh, ketika user mengetik kata “saya“, maka akan ditampilkan menjadi “SAYA“, karena efek dari text-transform. Akan tetapi, nilai yang sebenarnya adalah “saya”, maka yang akan dikirim adalah kata “saya”. Untuk itu, kita harus tetap melakukan konversi di bagian backend / yang menerima data form ini.

Dengan JavaScript

Dengan metode javascript, masih ada juga beberapa cara yang bisa digunakan. Namun di sini saya akan membagikan cara menggunakan fungsi toUpperCase(). Bisa dibilang ini adalah cara paling mudah untuk mengubah inputan text menjadi kapital dengan menggunakan javascript. Contohnya seperti dibawah ini.

Dengan cara di atas, tidak akan mempengaruhi placeholder seperti saat menggunakan text-transform: uppercase. Akan tetapi, masalah yang muncul dengan cara ini adalah apabila user sudah menginputkan sebuah kata, kemudian menambahkan huruf di awal / tengah kata tersebut, otomatis pointer / cursor akan berpindah ke akhir kata. Misal user sudah mengetik kata “sma“, kemudian akan menambahkan huruf a di antara huruf s dan m, maka ketika sudah selesai mengetikkan huruf a, otomatis cursor / pointer akan kembali ke akhir kata.

Dengan cara ini, data form yang dikirimkan sudah menjadi kapital seperti yang terlihat di dalam inputan, jadi tidak harus melakukan perubahan lagi di back end atau penerima data form ini.

Nah, apabila script di atas terlalu rumit, bisa juga menggunakan bantuan jQuery untuk meringkasnya, menjadi seperti di bawah ini.

Nah itu lah beberapa cara yang bisa digunakan untuk melakukan perubahan inputan user menjadi kapital / upprecase di dalam HTML. Meskipun sudah menjadi uppercase / kapital di dalam HTML tetap tidak ada salahnya di bagian penerima data / backend tetap diubah menjadi uppercase lagi, untuk lebih memvalidasi.

Tags : , , , , ,