Tutorial mematikan fungsi resize pada tag html form textarea ini memang sangat mudah di lakukan. Karena kita hanya harus memasukkan kode CSS agar form textarea disable resize.
Textarea merupakan salah satu tag HTML bagian form yang memiliki ukuran lebih besar dari tag input text.
Sebagai contoh lihat dibawah ini.
Dengan melihat contoh diatas kita dapat membedakan tag input text dengan tag textarea.
Textarea ini biasanya digunakan untuk sebuah form message, komentar, dan catatan. Tidak jarang juga beberapa website menggunakan textarea sebagai form alamat, atau untuk penjelasan sesuatu.
Textarea ini memiliki suatu ciri khas yaitu lebar dan tinggunya dapat disesuaikan oleh user yang mengisi textarea tersebut (Resize).
Resize inilah yang akan kita matikan dalam textarea yang akan kita gunakan, mengapa kita mematikan fungsi resize pada textarea?
Terkadang kita menginginkan tampilan yang pasti tidak berantakan pada tampilan website, seandainya resize textarea tidak dimatikan bisa jadi saat keadaan resize ditarik secara horizontal ataupun vertical akan mempengaruhi element lainnya misalnya sidebar blogger atau footer dan form lainnya.
Cara yang kenny gunakan untuk disable resize textarea ini adalah dengan menggunakan atribut CSS resize:none;
Berikut ini cara mematikan resize tag HTML textarea.
Baca Juga: Bootstrap Tutorial Membuat Breadcrumbs
Disable Resize dengan CSS
Tutorial mematikan resize textarea dengan atribut CSS langsung ditulis pada tag HTMLnya.
Untuk lebih jelasnya copy kode dibawah dan jalankan pada browser anda.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textarea</title>
</head>
<body>
<!-- Tanpa Atribute rezise -->
<textarea></textarea>
<!-- Dengan Atribut CSS resize -->
<textarea style="resize:none;"></textarea>
</body>
</html>
Demo 2
Anda dapat melihat perbedaannya bukan dengan menambahkan atribut css resize:none; ini textarea tidak bisa user ubah ukurannya.
Anda juga bisa menulisnya pada tag style dengan menambahkan class pada tag textareanya seperti contoh dibawah.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textarea</title>
<style type="text/css" media="screen">
.inputtextarea{resize: none;}
</style>
</head>
<body>
<!-- Tanpa Atribute rezise -->
<textarea></textarea>
<!-- Dengan Atribut CSS resize -->
<textarea class="inputtextarea"></textarea>
</body>
</html>
Demo 2
Seperti itulah cara mematikan textarea dengan CSS.
Kok lebar dan tingginya jadi kecil ken?
Baca Juga: Membuat Download Box Anime
Kalian bisa mengatur tinggi dan lebarnya dengan atribut CSS width dan height untuk mengatur textareanya.
Contoh mengatur tinggi dan lebar textarea.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textarea</title>
<style type="text/css" media="screen">
.inputtextarea{resize: none;width: 200px; height: 200px;}
</style>
</head>
<body>
<!-- Tanpa Atribute rezise -->
<textarea></textarea>
<!-- Dengan Atribut CSS resize dan width height -->
<textarea class="inputtextarea"></textarea>
</body>
</html>
Demo 3
Dengan menambahkan atribut width dan height CSS maka tinggi dan lebar textarea bisa kita atur sesuai selera.
Tetapi jika anda tidak ingin menggunkaan resize:none; tetapi hanya ingin resize secara horizontal atau vertical maka ikuti contoh dibawah ini.
Mengatur Resize hanya Horizontal atau Vertical
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textarea</title>
</head>
<body>
<!-- Dengan Atribute rezise horizontal -->
<textarea style="resize:horizontal"></textarea>
<!-- Dengan Atribute resize Vertical -->
<textarea style="resize:vertical"></textarea>
</body>
</html>
Demo 4
Dengan menggunakan resize:horizontal; atau resize:vertical; anda dapat mengatur resize horizontal dan mematikan resize vertical, atau mengatur resize vertical dan mematikan resize horizontal. Semuanya tergantung kebutuhan anda.
Itulah cara mudah mematikan resize atau tinggi dan lebar textarea.
Terima kasih telah berkunjung.