Cara Disable Resize Form Textarea Dengan CSS

Selamat datang kembali di www.malasngoding.com. situs yang fokus membahas tentang tutorial pemograman web, mobile dan desktop.

Sesuai dengan judul “Cara Disable Resize Form Textarea Dengan CSS”. akan di jelaskan bagaimana cara untuk disable resize textarea, agar ukurannya tidak bisa di ubah.

Cara Disable Resize Form Textarea Dengan CSS

Pada pembahasan tutorial kali ini kita akan belajar cara mematikan fungsi resize (ubah ukuran) pada form textarea. atau sering di sebut dengan disable resize textarea.

Jika ada yang belum tau apa itu textarea, textarea adalah salah satu jenis form pada html. bentuknya seperti kotak, tapi berbentuk agak lebih besar dari form input.

biasanya textarea di gunakan untuk membuat form untuk menyimpan data yang berukuran panjang, contohnya seperti alamat lengkap, penjelasan tentang sesuatu objek, dan sebagainya.

Silahkan baca tutorial form html yang telah di bahas pada www.malasngoding.com.

Cara agar ukuran textarea tidak bisa di ubah

kita akan langsung saja memulai Cara Disable Resize Form Textarea Dengan CSS. Anggap saja di sini kita mempunya sebuah form textarea sederhana. yang ingin kita matikan fungsi resizenya. agar tidak bisa di ubah ukurannya. atau agar tida bisa di panjangkan dan di lebarkan lagi.

HTML

dan coba kita jalankan.

Cara Disable Resize Form Textarea Dengan CSS

Seperti yang tampil pada gambar di atas. textarea secara default dapat di atur ukuran nya dengan cara di seret langsung. untuk mengubah ukuran form textarea.

lalu bagaimana cara agar ukuran textarea tidak dapat di ubah lagi, atau cara disable resize textarea ?

cara nya sangat mudah. teman-teman tinggal mengatur nya dengan menggunakan CSS.

Cara 1 Disable Resize Form Textarea

tambahkan syntax css langsung pada textarea.

lalu coba teman-teman lihat hasilnya. maka textarea nya pun tidak bisa lagi di ubah ukurannya.

disable resize textarea html

Jadi hanya dengan bantuan syntax css “resize:none“, fungsi untuk memperbesar atau memperkecil textarea pun di disable.

Cara 1 Disable Resize Form Textarea

nah, cara kedua untuk disable resize form textarea, setelah pada cara 1 kita menggunakan css inline. juga bisa menggunakan css internal atau external.

silahkan baca tutorial kita sebelumnya tentang cara penulisan css(Internal, external, inline).

HTML

CSS (style.css)

Dan hasilnya pun akan sama saja.

Resize Vertikal atau Horizontal Textarea

Kalau tadi adalah cara untuk disable resize textarea secara keseluruhan, Yang lebih keren lagi, kita bisa disable resize textarea dalam bentuk horizontal atau vertical.

Caranya silahkan simak penjelasan berikut ini.

Cara agar textarea hanya bisa di resize secara horizontal

kita hanya perlu menggunakan perintah css seperti berikut

dengan menetapkan horizontal pada syntax resize, maka form textarea akan menjadi hanya bisa di resize secara horizontal.

Cara agar textarea hanya bisa di resize secara vertikal

dengan menetapkan vertical pada syntax resize, maka form textarea akan menjadi hanya bisa di resize secara vertical.

See the Pen cara disable resize form textarea dengan css by Malas Ngoding (@malasngoding) on CodePen.0

Oke muungkin sekian dulu tutorial kita kali ini tentang cara membuat textarea tidak bisa di ubah ukuranya (disable resize textarea).

Semoga bermanfaat. selamat bereksperimen dan sampai jumpa di tutorial selanjutnya.