Untuk membuat text area saya rasa sudah banyak blogger yang tahu, tapi mungkin saja ada yang sudah lupa atau memang belum tahu membuatnya. Oleh karena itu, kali ini saya akan sedikit share tentang cara membuat text area, sebelumnya sudah saya publish mengenai text area untuk link postingan. Text area adalah suatu form yang disediakan untuk menulis kode HTML agar bisa ditampilkan di halaman posting atau di sidebar untuk berbagai keperluan, seperti membuat artikel, membuat LinkExchange, dll. Lihat postingan sebelumnya Cara Menampilkan Kode HTML.
Textarea diperlukan dalam pembuatan blog atau website saat membuat text atau tulisan di dalam box. Hasil penulisan text di dalam Textarea tersebut akan ditulis tanpa merubah ukuran dari texarea itu sendiri (sebelumnya char width (cols) dan rows didefinisikan terlebih dahulu). Apabila text yang ditulis melebihi kapasitas ukuran textarea, maka textarea tersebut akan otomatis membuat scrollbar di sebelah kanan.
Dalam text area, penulisan kode HTML dan CSS, atau script lain dapat ditulis tanpa perlu menggunakan entitas HTML atau dengan kata lain seluruh text, kode, dan script yang ditulis pada textarea akan tampil apa adanya setelah diposting.
Para blogger biasanya menggunakan textarea sebagai tempat untuk menyimpan kode HTML, CSS, atau script yang lain misalnya url download, script tukar link, script banner exchange, dan lain-lain. Berikut ini akan saya jelaskan cara membuat textarea pada blog jika suatu saat dibutuhkan untuk menempatkan atau menyimpan kode HTML. Cols berfungsi untuk mendefinisikan jumlah karakter ke samping yang akan ditampilkan pada textarea, Rows berfungsi untuk mendefinisikan jumlah baris pada textarea.
Contoh 1 :
Penulisan text di dalam textarea dengan ukuran char width 40 dan jumlah baris 4 :
Penulisan kode HTML :
<textarea cols="40" rows="4">Tulisan ini berada didalam textarea </textarea>
Tampilan setelah diposting :
Contoh 2 :
Penulisan text di dalam textarea dengan ukuran char width 40 dan jumlah baris 4 tetapi tulisan melebihi kapasitas textarea:
Penulisan kode HTML :
<textarea cols="40" rows="4">Tulisan ini ada di dalam textarea dengan ukuran char width 40 dan jumlah baris 4, perhatikan penulisan ini akan melebihi batas textarea sehingga secara otomatis akan tampil scrollbar di sebelah kanan. Untuk membaca sisa text yang tidak terlihat bisa dengan menggeser scrollbar tersebut.</textarea>
Tampilan setelah diposting :
Cara Membuat Text Area dengan Tombol "Select All" Button
cara membuat text box area, "select all" button pada text area atau text box area.
Text area yang terdapat tombol "Select All" adalah area atau tempat yang dibuat untuk menyimpan tulisan baik berupa text maupun berupa kode HTML/Javascript yang akan memudahkan pembaca dalam melakukan copy-paste hanya dengan sekali klik pada button Select All, seluruh text didalam text area langsung dapat ter-copy.
Perhatikan kedua contoh berikut :
Contoh 1. Text Area Tanpa Select All Button:
Untuk membuat textarea yang ketika diklik tulisan dalam textarea akan langsung terpilih semua (HighLight) tanpa menggunakan tombol bantu select all, maka gunakan kode berikut ini :
<p align="left"><textarea name="code" rows="4" cols="40" onclick="this.focus();this.select();">Isi dengan tulisan Anda disini, bisa berupa text biasa dan juga text berupa kode HTML/Javascript.</textarea></p>
Ganti tulisan"Isi dengan tulisan Anda disini, bisa berupa text biasa dan juga text berupa kode HTML/Javascript yang Anda miliki. Klik publish dan lihat hasilnya.
Tampilan setelah di publish :
- <p align="left"> dan </p> digunakan untuk menentukan posisi text area nantinya, dalam hal ini saya pasang di sebelah kiri (“left”).
- <onclick="this.focus();this.select();" > Kode ini artinya ketika tombol Select All di klik, maka seluruh text yang ada didalamnya akan di select all (dipilih dan di block semua agar dapat di copy sekaligus)
- <textarea name="code" rows="4" cols="40" dan </textarea> adalah tag untuk membuat teks area.
- rows adalah untuk menentukan tingginya.
- cols adalah untuk menentukan lebarnya text area.
Untuk membuat textarea dengan memasang tombol bantu Select All , jika tombol Select All ditekan maka teks dalam area langsung terpilih semua (HighLight) , maka gunakan kode berikut ini :
<div><form name="copy"><div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 90px" name="txt" rows="100" wrap="VIRTUAL" cols="55"> isikan dengan tulisan Anda disini, bisa berupa text biasa dan juga text berupa kode HTML/Javascript, jika tombol Select All ditekan maka seluruh teks di area ini akan terpilih/highlight </textarea></p></div></form>
Ganti tulisan " isikan dengan tulisan Anda disini, bisa berupa text biasa dan juga text berupa kode HTML/Javascript, jika tombol Select All ditekan maka seluruh teks di area ini akan terpilih/highlight " dengan text atau HTML/javascript yang Anda miliki.
Klik terbitkan atau publish, lihat hasilnya.
Tampilan setelah di publish :
Pada bagian Contoh 2. Text Area Dengan Select Button terdapat dua bagian element html, pertama adalah element kode html pembuatan Select All button dan yang kedua adalah element kode html untuk membuat text area.
Berikut adalah beberapa element penting yang mungkin perlu Anda ketahui:
Element within text area with Select All button:
- <div align="center">. Kata center artinya posisi button akan berada di tengah. Jadi, jika Anda ingin posisi button/tombol berada disebelah kiri, ganti saja dengan kata
left. Dan jika ingin berada disebelah kanan, ganti dengan kata
right. - <input onclick="javascript:this.form.txt.focus ();this.form.txt.selec()">. , sebaiknya jangan merubah tulisan ini.
- Value="Select All". Kata Select All adalah kata yang akan muncul didalam button/tombol. Tulisan select all dapat Anda ganti sesuai selera.
- <p align="center">. Menunjukan bahwa text area akan berada di tengah, jika Anda ingin text area berada disebelah kiri, ganti kata center dengan kata left untuk kiri atau right untuk dikanan.
- <text style="WIDTH: 200px"> kata "WIDTH:200px", adalah lebar text area sebanyak 200 pixel. Jika Anda ingin merubah lebar text
area, Anda dapat menggantinya dengan angka yang anda inginkan, misalnya; 400px;
0 komentar:
Posting Komentar