Selasa, 03 Februari 2015

HTML - Membuat Textarea Non-Resizeable

Mungkin beberapa pemula dalam desain web seperti saya masih kebingungan ketika ingin membuat textarea tidak bisa diubah ukurannya. Namun setelah mencari dan terus mencari akhirnya saya ketemu caranya dan ingin membagikan Cara Membuat Textarea Tidak Bisa Diubah Ukurannya. Sebelumnya saya akan memberikan contoh textarea biasa. Dengan html bisa menggunakan sintaks <textarea> </textarea>. Atau full kodenya seperti ini:
<html>
<head>
<title>Tutorial TEXTAREA</title>
</head>
<body>
<textarea placeholder="Apa yang anda pikirkan?"></textarea>
</body>
</html>
Maka akan hasilnya akan seperti ini
Terlihat text area di atas di pojok kanan bawah terdapat garis-garis yang menandakan bahwa textarea tersebut bisa diubah ukurannya. Seperti ini contohnya
Hal seperti ini bisa sangat mengganggu bagi orang yang ingin tidak bisa diubah ukurannya.
Maka dari itu, tambahkan CSS seperti di bawah ini
 textarea{
 resize:none;
 }
CSS tersebut menunjukkan selectornya adalah textarea, tentu saja jika di website terdapat banyak textarea namun hanya ingin beberapa textarea yang ingin dijadikan tidak bisa diubah ukurannya gunakan id atau class. Intinya di sini adalah menambahkan CSS. Jika kode html di atas dimasukkan CSS tersebut maka kodenya akan jadi seperti ini:
<html>
<head>
<title>Tutorial TEXTAREA</title>
 <style type="text/css">
 textarea{
 resize:none;
 }
 </style>
</head>
<body>
<textarea placeholder="Apa yang anda pikirkan?"></textarea>
</body>
</html>
Maka hasilnya akan jadi seperti ini:
Terlihat bedanya dengan textarea yang pertama. Tapi, apakah anda curiga dengan tulisan "Apa yang anda pikirkan?" ? Tulisan tersebut ada di dalam attribut placeholder. Apa itu? Coba cek di tulisan saya tentang HTML Attribut Placeholder