Tampilkan postingan dengan label html. Tampilkan semua postingan
Tampilkan postingan dengan label html. Tampilkan semua postingan

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



HTML - Atribut Placeholder Pada Input Text

Pada tutorial html kali ini akan menjelaskan sesingkat-singkatnya tentang apa yang disebut atribut placeholder pada textarea. Pernahkah anda melihat sebuah textarea yang di dalamnya telah terdapat teks dan ketika diklik teks itu hilang? Itulah yang dinamakan placeholder. Placeholder tidak hanya bisa diletakkan di textarea saja. Namun, juga bisa diletakkan di input. Jadi, mungkin banyak pencarian yang menggunakan keywords Membuat Teks Di Dalam Teksarea Kemudian Diklik Hilang, padahal yang dicari sebenarnya adalah Placeholder. Berikut ss dari placeholder.
Secara default warna dari teks placeholder adalah abu-abu. Tentu saja kontras dengan warna teks aktif. Dan cara membuat teks placeholder tersebut adalah tinggal memasukkan atribut placeholder yaitu

placeholder="teks"
Contohnya di textarea tinggal ketikkan atau copas kode html berikut
<textarea placeholder="Apa yang anda pikirkan?"></textarea>
Maka jadinya akan seperti ini:


Atau bisa juga dimasukkan di dalam input. Tinggal masukkan di dalam tag input. Contohnya
<input type="text" placeholder="username" />
Maka akan jadi seperti ini:

bahkan placeholder bisa dimasukkan ke dalam input yang tipenya password dan email.