Tutorial Membuat Berbagai Macam Text Area
Cara Gampang Membuat Text Area - Selamat siang yang sangat hot potato-potato. Banyak sekali cara untuk membuat text area, dan fungsi dari text area sendiri adalah untuk menandai kata/tulisan/kode html didalam sebuah kotak atau area tertentu yang sudah kita tentukan dengan menggunakan kode html agar kita bisa dengan mudah mengcopy text tersebut.
Biasanya text area sering di aplikasikan untuk kode-kode html yang tidak bisa ditulis dalam sebuah artikel, maka dengan bantuan text area kita bisa melakukannya agar artikel di blog/website kita mudah dipahami maksud dan tujuannya. Dan sebenarnya text area ini hampir sama fungsinya dengan kotak scroll di blog.
Di bawah ini saya akan berbagi cara membuat text area mulai dari yang paling sederhana. Langsung saja kita lihat cara-caranya sebagai berikut :
1. Text Area Sederhana
Copy code berikut :
<div align="center">
<textarea name="code" rows="2" cols=35">Isi dengan teks yang kalian inginkan</textarea></div>
<textarea name="code" rows="2" cols=35">Isi dengan teks yang kalian inginkan</textarea></div>
hasilnya seperti ini :
2. Text Area Sekali Klik Langsung Blok
Copy code berikut :
<div align="center">
<textarea cols="35" onclick="this.focus(); this.select();" rows="2">Isi dengan teks yang kalian inginkan, lalu klik disini !</textarea></div>
</div>
<textarea cols="35" onclick="this.focus(); this.select();" rows="2">Isi dengan teks yang kalian inginkan, lalu klik disini !</textarea></div>
</div>
hasilnya seperti ini :
3. Text Area Langsung Blok Jika Disorot Mouse
Copy code berikut :
<div>
<form name="kios-tutorial">
<div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea cols="55" name="txt" onmouseover="this.form.txt.select()" rows="100" style="height: 50px; width: 300px;">Arahkan mouse kalian ke sini !!</textarea></div>
</form>
</div>
<form name="kios-tutorial">
<div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea cols="55" name="txt" onmouseover="this.form.txt.select()" rows="100" style="height: 50px; width: 300px;">Arahkan mouse kalian ke sini !!</textarea></div>
</form>
</div>
hasilnya seperti ini :
4. Text Area Dengan Highlight
Copy code berikut :
<div>
<form name="highlight">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" rows="100" style="height: 100px; width: 200px;" wrap="VIRTUAL">Isi dengan teks yang kalian inginkan, lalu tekan tombol Highlight</textarea></div>
</form>
</div>
<form name="highlight">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" rows="100" style="height: 100px; width: 200px;" wrap="VIRTUAL">Isi dengan teks yang kalian inginkan, lalu tekan tombol Highlight</textarea></div>
</form>
</div>
hasilnya seperti ini :
5. Text Area Dengan Border
Copy code berikut :
<div align="center">
<textarea style="border: 2px dotted red;">Isi dengan teks yang kalian inginkan</textarea></div>
<textarea style="border: 2px dotted red;">Isi dengan teks yang kalian inginkan</textarea></div>
hasilnya seperti ini :
6. Text Area Tidak Bisa Dihapus
Copy code dibawah ini :
<div align="center">
<textarea onclick="this.focus(); this.select();" readonly="">Silahkan dicoba menghapus tulisan ini</textarea></div>
<textarea onclick="this.focus(); this.select();" readonly="">Silahkan dicoba menghapus tulisan ini</textarea></div>
hasilnya seperti ini :
Sampai disini dulu bagi-bagi ilmunya, semoga apa yang saya tulis diatas bermanfaat buat semua.
Terima kasih sudah berkunjung dan meluangkan waktu untuk membaca artikel
Post a Comment
- Maaf, komentar LINK AKTIV / IKLAN akan saya HAPUS
- Komentar sara / spam akan saya hapus
- Jika ada link gambar yang mati laporkan disini
- Berkomentarlah dengan bijak sesuai dengan artikel
- Komentar anda merupakan undangan buat saya