Fungsi dan Cara Penggunaan Tag Label HTML
Fungsi tag label Dalam Pembuatan Form HTML
Tag label dalam HTML berfungsi sebagai pelengkap keterangan untuk beberapa objek form seperti radio atau checkbox. Selain memberikan keterangan, tag label juga memudahkan penggunan dalam memasukkkan data (membuat form menjadi user friendly).
Secara tampilan, tag label tidak akan berpengaruh apa-apa di dalam form, Sehingga tanpa atau dengan tag label, tidak akan melihat perbedaannya.
Untuk memahami kegunaan tag label, contoh kode form HTML berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html><html><head> <title>Belajar Tag Label HTML</title></head><body> <h4>Jadwal kegiatan saya sekarang: </h4> <form action="daftar.php" method="post"> <input type="checkbox" name="belajarhtml" id="belajarhtml" value="belajarhtml"/> Saya sedang belajar HTML <br /> <input type="checkbox" name="belajarcss" id="belajarcss" value="belajarcss"/> Saya sedang belajar CSS <br /> <input type="checkbox" name="google.com" id="google" value=""/> Saya sedang belajar pemograman </form></body></html> |
Dari contoh kode form HTML diatas, membuat 3 isian checkbox sederhana. Ketika “mencheklist” salah satu dari checkbox tersebut, cara yang paling banyak digunakan adalah dengan men-klik kotak putih pada checkbox tersebut.
Salah satu cara agar lebih mudah untuk memilih checkbox tersebut adalah jika pengisian checkbox bisa dilakukan dengan men-klik tulisan keterangan dari checkbox tersebut. Untuk keperluan inilah tag label digunakan.
Cara Penggunaan tag label HTML
Terdapat 3 cara penggunaan tag label. Cara pertama dan juga paling sederhana adalah dengan memasukkan atau “mengurung” seluruh tag input checkbox kedalam tag label seperti kode berikut ini:
1 2 3 4 | <label> <input type="checkbox" name="belajarhtml" id="belajarhtml" value="belajarhtml"/>Saya sedang belajar HTML</label> |
Dengan memasukkan seluruh tag input checkbox dan keterangannya ke dalam tag label, maka bisa men-klik tulisan keterangan dari checkbox, dan secara otomatis checkbox tersebut akan terisi.
Cara kedua untuk menggunakan tag label adalah menggunakan atribut “for”. Dengan menggunakan atribut for ini, maka tidak harus memasukkan seluruh tag input ke dalam tag label. Berikut contoh penggunaannya:
<input type="checkbox" name="belajarcss" id="belajarcss" value="belajarcss"/><label for="belajarcss">Saya sedang belajar CSS</label>Perhatikan bahwa tag label diletakkan setelah tag input checkbox. Di dalam tag label ini terdapat sebuah atribut for, yang nilainya adalah id dari tag input. Didalam contoh ini membuat atribut id=”belajarcss” di dalam tag input checkbox. Sehingga dalam pembuatan labelnya, memberikan nilai atribut for=”belajarcss”.
Cara ketiga untuk penggunaan tag label adalah dengan menggabungkan kedua cara diatas. Perhatikan contoh berikut:
<label for="duniailkom"> <input type="checkbox" name="google.com" id="google" value=""/> Saya sedang belajar pemograman</label>Berikut adalah contoh form sebelumnya dengan tambahan tag label:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html><html><head> <title>Belajar Tag Label HTML</title></head><body> <h4>Jadwal kegiatan saya sekarang: </h4> <form action="daftar.php" method="post"> <label> <input type="checkbox" name="belajarhtml" id="belajarhtml" value="belajarhtml"/> Saya sedang belajar HTML </label> <br /> <input type="checkbox" name="belajarcss" id="belajarcss" value="belajarcss"/> <label for="belajarcss"> Saya sedang belajar CSS</label> <br /> <label for="duniailkom" > <input type="checkbox" name="google.com" id="google" value=""/> Saya sedang belajar pemograman </label> </form></body></html> |
Silahkan menjalankan kode tersebut, dan jika men-klik tulisan keterangan dari checkbox, maka secara langsung kotak checkbox akan berisi. Hal seperti ini akan lebih memudahkan user dalam mengisi form yang dirancang.
Fungsi dan Cara Penggunaan Tag Fieldset dan
Tag Legend
Fungsi Tag Fieldset dan Tag Legend dalam pembuatan Form HTML
Fungsi tag fieldset dan tag label lebih kepada tampilan form, karena akan memudahkan dan mempercantik form yang dibuat.
Tag Fieldset berfungsi untuk mengelompokkan beberapa objek form menjadi sebuah kelompok, sedangkan Tag Legend berfungsi untuk menampilkan judul dari kelompok objek form tersebut.
Berikut adalah tampilan form HTML yang dikelompokkan menggunakan tag Fieldset dan tag Legend:
Cara Penggunaan Tag Fieldset dan Tag Legend
Untuk dapat membuat tampilan seperti gambar diatas, kita tinggal menambahkan tag fieldset dan tag legend di awal form. Format dasar penulisannya adalah sebagai berikut:
1 2 3 4 5 6 | <form action="daftar.php" method="post"> <fieldset> <legend>Judul pada kelompok objek</legend> ...kelompok objek form... </fieldset></form> |
tag fieldset dan tag legend harus digunakan berpasangan, karena keduanya saling berkaitan. Tag fieldset berfungsi untuk menandai sampai dimana kotak fieldset akan dibuat, sedangkan tag legend berfungsi untuk memberikan judul dari fieldset tersebut.
Berikut adalah contoh kode HTML untuk penggunaan tag fieldset dan tag legend:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html><html> <head> <title>Belajar Tag Fieldset dan Tag Legend HTML</title></head><body> <form action="daftar.php" method="post"> <fieldset> <legend>Agenda Hari ini</legend> <input type="checkbox" name="belajarhtml" id="belajarhtml" value="belajarhtml"/>Belajar HTML <br /> <input type="checkbox" name="belajarcss" id="belajarcss" value="belajarcss"/>Belajar CSS <br /> <input type="checkbox" name="php" id="belajarphp" value="belajarphp"/>Belajar PHP <br /> <input type="checkbox" name="google.com" id="google" value=""/>Belajar pemograman </fieldset> </form></body></html> |
Cara merubah rata text tag legend: atribut align
Jika diperhatikan, tag legend secara default berada di sisi kiri form, namun anda bisa merubah settingan ini dengan menambahkan atribut align pada tag legend.
<legend align="right">Agenda Hari ini</legend> |
Nilai dari atribut align ini bisa salah satu dari: left, center, right, top dan bottom. Bisa mencoba kelima nilai ini, namun nilai top dan bottom umumnya tidak di support oleh web browser.
Tag fieldset dan tag legend lebih berfungsi untuk tampilan dari form, namun form yang tertata dan terkelompok dengan baik akan memudahkan user dalam menggunakannya.
Fungsi dan Cara Penggunaan Tag
Button HTML
Tag button berfungsi untuk membuat tombol baik itu di dalam form, maupun diluar form. Dibandingkan dengan tombol yang dibuat dengan tag input type=”submit”, tag button menawarkan fleksibilitas yang lebih.
Cara Penggunaan Tag Button HTML
Untuk menggunakan tag button, cukup menuliskannya dengan struktur dasar sebagai berikut:
<button>text untuk tombol</button> |
Tag button juga tidak harus berada di dalam form, dan ini memberikan fleksibilitas yang tinggi. Bisa juga menggunakan javascript untuk membuat fungsi lain yang akan dijalankan ketika tombol tersebut di klik.
Atribut type: Merubah Fungsi Tombol tag button
Jika digunakan di dalam form, dapat menambahkan sebuah atribut type untuk merubah fungsi tombol tersebut. Nilai yang bisa digunakan untuk atribut ini adalah reset, submit, dan button. Contoh penulisannya adalah:
<button type="reset">Text untuk tombol</button> |
Jika menuliskan type=”submit”, maka ketika tombol di klik, HTML akan mengirimkan nilainya untuk diproses (misalkan dengan PHP), namun jika type=”reset”, maka jika tombol tersebut di klik, efeknya akan mengosongkan isian form. Type=”button” tidak akan berefek apa-apa kedalam fungsi tombol, bahkan mungkin akan sedikit membingungkan menulis : <button type=”button”>
Atribut disabled: Menonaktifkan tag button
Salah satu atribut penting untuk tag button ini adalah atribut disabled. Atribut ini digunakan untuk mengontrol apakah tombol tersebut bisa digunakan oleh user atau tidak. Atribut ini hanya memiliki 1 nilai, yaitu disabled, sehingga ditulis dengan disabled=”disabled”. Cara penulisannya adalah sebagai berikut:
<button disabled="disabled">Text untuk tombol</button> |
Jika menjalankan contoh tersebut di dalam HTML, tombol akan berwarna abu-abu dan tidak bisa di klik oleh user.
Atribut disabled ini bisa diterapkan kepada hampir seluruh objek form, dan biasanya akan digunakan javascript untuk mengaktifkan tombol tersebut.
Atribut id dan class: CSS dan Javascript
Selain atribut type dan disabled, bisa menggunakan atribut seperti id dan class dalam tag button. Atribut id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.
Contoh penggunaan tag button dalam HTML
Sebagai penutup, berikut adalah contoh kode HTML dalam penulisan dan penggunaan tag button:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html><html> <head> <title>Belajar Tag Button HTML</title></head><body> <button>Silahkan Klik Saya</button> <br /> <button disabled="disabled">Tombol ini tidak bisa di-klik</button> <br /> <h4>Formulir isian :</h4> <form action=" formulir.html" method="get"> Nama : <input type="text" name="nama_user" id="nama_user"/> <button type="submit">Mulai Proses!</button> <button type="reset">Reset Form</button> </form></body></html> |
Fungsi dan Cara Penggunaan tag input type
text dan type password
Secara umum, kedua type tag input ini berfungsi sebagai kolom isian dari user. Dengan perbedaan untuk type=password, text isian tidak akan ditampilkan, namun diganti dengan karakter khusus.
Kedua tag ini biasanya digunakan di dalam form HTML, namun juga bisa menggunakan di luar tag form, terutama jika memproses menggunakan javascript. Format penulisan paling dasar dari tag input type=”text” dan type=”password” ini adalah:
<input type="text" /><input type="password"/> |
Jika menjalankan kedua baris tersebut di dalam web browser, akan tampil 2 buat kotak isian yang bisa diisi dengan text. Perbedaan keduanya hanya pada tempilan karakter dari kotak isian tersebut. untuk type=password, text pada kotak isian akan ditampilkan dengan karakter password.
Atribut name: Untuk Pemrosesan tag input type text
Selain atribut type yang digunakan sebagai pembeda kedua input, atribut name merupakan atribut paling penting jika bermaksud memproses menggunakan form, karena nilai dari atribut inilah yang akan digunakan sebagai nama variabel yang akan diproses oleh web server (biasanya menggunakan PHP).
Berikut adalah contoh penulisan atribut name untuk tag input type=”text”:
1 2 3 4 | <form> Nama: <input type="text" name="nama_user" /> Password: <input type="password" name="password_user"/></form> |
Atribut value: Nilai Awal tag input type text
Atribut value digunakan sebagai nilai isian awal untuk input type=”text”. Namun atribut ini bersifat opsional, tidak harus menambahkannya untuk setiap text inputan.
Berikut adalah cara penulisannya:
<input type="text" name="nama_user" value="masukkan nama anda"/><input type="password" name="password_user" value="masukkan password anda"/>Menggunakan atribut value untuk tampilan awal form akan membantu user memahami penjelasan untuk apa isian text tersebut, namun biasanya hal ini harus dikombinasikan dengan javascript agar ketika user mulai mengisi text, kotak text akan langsung kosong. Jika tidak, maka terpaksa user harus menghapus nilai awal ini secara manual.
Dalam pemprosesan form oleh web server nantinya, nilai dari atribut value inilah yang akan diproses. Sehingga jika user langsung men-klik tombol submit form tanpa mengisi apa-apa, maka nilai nama yang dikirim adalah =”masukkan nama anda”. Untuk menghindari hal ini bisa membuat program javascript untuk menvalidasi isian form sebelum dikirim ke web server.
Berikut adalah contoh penggunaan atribut value dalam tag input type=”text” HTML
<!DOCTYPE html><html> <head> <title>Belajar Tag Input Type=text HTML</title></head><body> <h4>Belajar tag Input type="text" </h4> <form> Nama User :<input type="text" name="nama_user" value="masukkan nama anda"/> <br/> Password User :<input type="password" name="password_user" value="masukkan password anda"/> </form></body></html>
Atribut size: Mengatur Panjang Tampilan
Atribut size untuk tag input type=”text” digunakan untuk membatasi panjang dari kotak isian. Nilai dari atribut ini adalah berapa pixel panjang kotak isian tersebut.
Berikut cara penulisan atribut size:
<input type="text" name="nama_user" size="4"/> |
Berikut adalah contoh kode HTML penggunaan atribut size:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html><html> <head> <title>Belajar Tag Input Type=text HTML</title></head><body> <h4>Belajar tag Input type="text"</h4> <form> Size = 04 pixel : <input type="text" name="nama_user" size="4"/> <br/> Size = 10 pixel : <input type="text" name="nama_user" size="10"/> <br/> Size = 20 pixel : <input type="text" name="nama_user" size="20"/> </form></body></html> |
Atribut maxlength: Membatasi Panjang Karakter Maksimum
Atribut maxlegth digunakan untuk membatasi seberapa banyak karakter yang dapat diinput kedalam kotak isian. Nilai dari atribut ini adalah banyak maksimum karakter yang bisa diketik. Berikut adalah cara penulisan atribut ini:
<input type="text" name="id_user" maxlength="4"/> |
Dengan memberikan atribut maxlength=”4″, maka ketika user mengetikkan karakter ke 5, karakter tersebut tidak akan bisa diinput. Hal ini cukup penting jika membutuhkan panjang karakter yang telah dibatasi untuk inputan form, misalkan untuk password yang dibatasi sebanyak 6 karakter.
Namuntidak bisa mengandalkan pembatasan atribut maxlength ini, karena user bisa saja membuat script untuk mengubah nilainya. Atribut maxlength ini sebaiknya digunakan sebagai pelengkap. Proses pengecekan pembatasan karakter sebaiknya dilakukan juga pada saat form akan diproses di sisi web server (menggunakan PHP).
Berikut adalah contoh kode HTML penggunaan atribut maxsize:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html><html> <head> <title>Belajar Tag Input Type=text HTML</title></head><body> <h4>Belajar tag Input type="text"</h4> <form> Size = 04 pixel, maxlength = 04 : <input type="text" name="nama_user" size="4" maxlength="4"/> <br/> Size = 10 pixel, maxlength = 05 : <input type="text" name="nama_user" size="10" maxlength="5"/> <br/> Size = 20 pixel, maxlength = 10 : <input type="text" name="nama_user" size="20" maxlength="10"/> </form></body></html> |
Atribut disabled dan readonly: Menonaktifkan tag input
Atribut disabled dan readonly digunakan untuk membuat kotak isian text tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah kotak isian hanya dapat diisi ketika user telah mengisi kotak isian lainnya.
Kedua atribut ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” dan readonly =“readonly”. Berikut contoh penulisannya:
<input type="text" name="nama_user" readonly="readonly" /><input type="text" name="nama_user" disabled="disabled" /> |
Walaupun kedua text yang memiliki atribut ini tidak bisa digunakan, namun keduanya akan memiliki tampilan yang berbeda. Atribut disabled akan membuat kotak text berwarna abu-abu, sedangkan atribut readonly tampak seperti kotak text biasa. Sehingga biasanya atribut disabled lah yang sering digunakan, karena akan memberikan tampilan kepada user bahwa kotak text tersebut tidak bisa digunakan.
Perbedaan lain adalah user masih dapat men-copy isian text isian ketika atributnya diset menjadi readonly. Namun tidak untuk atribut disabled.
Berikut adalah contoh penggunaan atribut disabled dan readonly dalam HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html><html> <head> <title>Belajar Tag Input Type=text HTML</title></head><body> <h4>Belajar tag Input type="text" </h4> <form> User name (normal) : <input type="text" name="nama_user"/> <br/> User name (readonly) : <input type="text" name="nama_user" readonly="readonly" /> <br/> User name (disabled) : <input type="text" name="nama_user" disabled="disabled" /> </form></body></html> |
Atribut id dan class: CSS dan Javascript
Selain atribut type, value, size, maxlength, readonly dan disabled, juga bisa menggunakan atribut seperti id dan class dalam tag input type=”text”. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.
Cara Penggunaan Tag Input type text dan type password
Berikut contoh penggunaan tag input type text dan type password dalam HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html><html> <head> <title>Belajar Tag Input Type=text HTML</title></head><body> <h4>Belajar tag Input type="text" </h4> <form> Tag Input dengan atribut value : <input type="text" name="nama_user" value="masukkan nama anda"/> <br/> Tag Input dengan atribut size = 4 : <input type="text" name="nama_user" size="4"/> <br/> Tag Input dengan atribut maxlength = 5 : <input type="text" name="nama_user" maxlength="5" /> <br/> Tag Input dengan atribut readonly : <input type="text" name="nama_user" readonly="readonly"/> <br/> Tag Input dengan atribut disabled : <input type="text" name="nama_user" disabled="disabled" /> <br/> </form></body></html> |
Fungsi dan Cara Penggunaan tag input type checkbox HTML
Tag Input type checkbox berfungsi untuk membuat checkbox atau kotak isian yang diisi dengan cara menceklist kotak tersebut. checkbox biasa digunakan untuk pilihan yang dapat dipilih dengan lebih dari 1 pilihan.
Dalam penggunaan checkbox HTML, hanya memerlukan tag input dengan sebuah atribut type=”checkbox”. Berikut format sederhana checkbox dalam HTML:
<input type="checkbox"/>Penjelasan checkbox |
Checkbox tersebut tidak harus selalu berada di dalam tag form HTML, namun jika menggunakan checkbox diluar tag form, biasanya dikombinasikan dengan javascript untuk pemrosesannya.
Atribut name: Untuk pemrosesan tag input type checkbox
Atribut penting jika checkbox digunakan di dalam tag form adalah atribut name. Atribut name ini berfungsi sebagai penanda nama untuk memproses hasil pilihan form ke dalam web server nantinya (misalnya dengan PHP). Berikut adalah cara penulisan Tag Input type checkbox dengan atribut name:
<form> <input type="checkbox" name="nama_checkbox"/>keterangan checkbox</form> |
Atribut Value: Sebagai Nilai Pemrosesan checkbox
Atribut value untuk checkbox berguna pada saat pemrosesan form oleh web server. Misalnya dalam bahasa PHP, nilai dari value inilah yang akan diproses. bebas mengisi dengan nilai apapun, namun akan lebih memudahkan jika diisi dengan nilai yang singkat dan berhubungan dengan isi dari checkbox itu sendiri.
Berikut contoh penggunaan atribut value:
<form> <input type="checkbox" name="hobi" value="HTML"/>belajar HTML</form> |
Atribut Checked: Cara menandai checkbox
Atribut checked digunakan untuk menandai dipilih atau tidaknya checkbox tersebut. Satu-satunya nilai dari atribut checked ini adalah checked, sehingga penulisannya menjadi: checked = “checked”. Berikut contoh penulisan atribut checked:
<form> <input type="checkbox" name="hobi" value="HTML" checked ="checked"/> belajar HTML</form> |
Jika menjalankan kode diatas, maka pada saat halaman tampil pertama kali, kotak isian checkbox akan terisi langsung. Hal ini bisa digunakan sebagai isian defaut untuk form.
Atribut disabled: Menonaktifkan tag input
Atribut disabled digunakan untuk membuat checkbox tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah checkbox hanya dapat diisi ketika user telah mengisi objek form lainnya.
Atribut disabled ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya:
<form> <input type="checkbox" name="hobi" value="HTML" disabled="disabled" /> belajar HTML</form>Atribut disabled akan membuat checkbox berwarna abu-abu dan memberikan tampilan kepada user bahwa checkbox tersebut tidak bisa digunakan.
Atribut id dan class: CSS dan Javascript
Selain atribut type, value, checked dan disabled, juga bisa menggunakan atribut umum seperti id dan class dalam tag input type checkbox. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.
Cara Penggunaan tag input type checkbox dalam form HTML
Untuk merangkum penggunaan tag input type checkbox beserta atribut-atributnya, akan membuat contoh kode HTML untuk semua atribut yang telah kita pelajari dalam tutorial ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html><html> <head> <title>Belajar Tag Input Type=checkbox HTML</title></head><body> <h4>Belajar tag Input type="checkbox" </h4> <form> Checkbox dasar : <input type="checkbox" name="hobi1" value="HTML"/>belajar HTML <br /> Checkbox + checked : <input type="checkbox" name="hobi2" value="HTML" checked="checked"/> belajar HTML <br /> Checkbox + disabled : <input type="checkbox" name="hobi3" value="HTML" disabled="disabled"/> belajar HTML <br /> <br /> Checkbox + Tag Label + Tag fieldset + Taglegend : <fieldset> <legend>Hobi</legend> <label> <input type="checkbox" name="hobi4" value="HTML"/>belajar HTML </label> <label> <input type="checkbox" name="hobi4" value="CSS"/>belajar CSS </label> <label> <input type="checkbox" name="hobi4" value="PHP"/>belajar PHP </label> </fieldset> </form></body></html> |
Fungsi dan Cara Penggunaan tag input
type radio HTML
Tag input type radio berfungsi untuk membuat tombol radio atau tombol pilihan yang diisi dengan cara memilih dari salah satu tombol radio yang ada. Radio biasa digunakan untuk pilihan yang membatasi user untuk memilih satu dari pilihan yang ada.
Dalam penggunaan radio HTML, kita hanya memerlukan tag input dengan sebuah atribut type radio. Berikut format dasar radio dalam HTML:
<input type="radio"/>Penjelasan radio |
Radio tersebut tidak harus selalu berada di dalam tag form HTML, namun jika menggunakan radio diluar tag form, javascript biasanya digunakan untuk memprosesnya.
Atribut name: Untuk Pemrosesan dan Pembuatan Group radio
Walaupun bisa menggunakan radio tanpa atribut name, namun dengan atribut name inilah radio dapat berfungsi dengan semestinya. HTML menggunakan atribut name sebagai penanda bahwa radio tersebut berada di dalam satu group dan hanya dapat dipilih salah satu saja. Berikut adalah cara penulisan tag input type radio dengan atribut name:
<form> <input type="radio" name="nama_radio"/>keterangan radio1 <input type="radio" name="nama_radio"/>keterangan radio2</form> |
Perhatikan bahwa untuk membuat beberapa objek radio menjadi sebuah group, nilai dari atribut name yang digunakan harus sama. Selain itu, persis seperti objek form lainnya, atribut name juga berfungsi sebagai penanda nama untuk memproses hasil pilihan form ke dalam web server (misalnya dengan PHP).
Atribut value: Sebagai Nilai Untuk Pemrosesan radio
Atribut value untuk radio berguna pada saat pemrosesan form oleh web server.
Berikut contoh penggunaan atribut value:
<form> <input type="radio" name="nama_radio" value="isi_radio1"/>keterangan radio1 <input type="radio" name="nama_radio" value="isi_radio2"/>keterangan radio2</form> |
Atribut Checked: Cara Menandai Pilihan radio
Atribut checked digunakan untuk menandai dipilih atau tidaknya radio tersebut. Satu-satunya nilai dari atribut checked ini adalah checked, sehingga penulisannya menjadi: checked = “checked”. Berikut contoh penulisan dasar atribut checked radio:
<form> <input type="radio" name="nama_radio" value="isi_radio1"/>keterangan radio1 <input type="radio" name="nama_radio" value="isi_radio2" checked="checked"/>keterangan radio2</form> |
Jika menjalankan kode diatas, maka pada saat halaman tampil pertama kali, kotak isian radio yang kedua akan langsung terpilih. Hal ini bisa digunakan sebagai isian defaut untuk form.
Atribut disabled: Menonaktifkan tag input type radio
Atribut disabled digunakan untuk membuat radio tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah radio hanya dapat diisi ketika user telah mengisi form diatasnya.
Atribut disabled ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya:
<form> <input type="radio" name="nama_radio" disabled="disabled"/>keterangan radio1</form> |
Atribut disabled akan membuat radio berwarna abu-abu dan memberikan tampilan kepada user bahwa radio tersebut tidak bisa digunakan.
Atribut id dan class: CSS dan Javascript
Selain atribut type, value, checked dan disabled, juga bisa menggunakan atribut umum seperti id dan class dalam tag input type radio. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.
Cara Penggunaan tag input type radio dalam form HTML
Untuk merangkum penggunaan Tag Input type=”radio” beserta atribut-atributnya, akan membuat contoh kode HTML untuk semua atribut :
<!DOCTYPE html><html><head> <title>Belajar Tag Input Type=radio HTML</title></head><body> <h4>Belajar tag Input type="radio" </h4> <form> Radio dasar : <input type="radio" name="jenis_kelamin1" value="Laki-laki"/>Laki-laki <br /> Radio dengan pilihan : <input type="radio" name="jenis_kelamin2" value="Laki-laki"/>Laki-laki <input type="radio" name="jenis_kelamin2" value="Perempuan"/>Perempuan <br /> Radio + checked : <input type="radio" name="jenis_kelamin3" value="Laki-laki"/>Laki-laki <input type="radio" name="jenis_kelamin3" value="Perempuan" checked="checked"/>Perempuan <br /> Radio + disabled : <input type="radio" name="jenis_kelamin4" value="Laki-laki" disabled="disabled"/>Laki-laki <input type="radio" name="jenis_kelamin4" value="Perempuan" disabled="disabled"/>Perempuan <br /> <br /> Radio + Tag Label + Tag fieldset + Tag legend : <fieldset> <legend>Jenis Kelamin</legend> <label> <input type="radio" name="jenis_kelamin5" value="Laki-laki"/>Laki-laki </label> <label> <input type="radio" name="jenis_kelamin5" value="Perempuan"/>Perempuan </label> </fieldset> </form></body></html>
Fungsi dan Cara Penggunaan tag input type file (form upload)
Fungsi tag input type file dalam pembuatan Form HTML
Tag input dengan atribut type=”file” adalah objek form yang digunakan untuk upload file. Pemrosesan upload akan banyak melibatkan web server.
Dalam menggunakan tag input dengan atribut type=”file” ini, hanya menambahkan kode berikut kedalam form HTML:
<form> <input type="file"></form> |
Jika amenjalankan kode tersebut, maka di dalam web browser akan tampil sebuah tombol dengan text keterangan disampingnya. Nama tombol dan text keterangan tersebut akan berbeda-beda tergantung web browser.
Ketika men-klik tombol upload (“Browse” pada firefox, dan “Choose File” pada chrome) maka akan keluar jendela untuk memilih file yang akan diupload. Setelah memilih salah satu file yang akan diupload, text keterangan akan berubah menjadi nama file tersebut.
Atribut name: Untuk Pemrosesan Upload Data
Atribut name merupakan atribut paling penting untuk type=”file”, karena atribut name inilah yang akan menjadi varibel penampung file upload di sisi server nantinya. Berikut cara penulisan atribut name:
<form> <input type="file" name="file_gambar"></form> |
Atribut Accept: Membatasi Tipe Upload Data
Atribut accept digunakan untuk membatasi jenis file yang akan diupload, apakah file gambar, file musik, atau file jenis lainnya. Nilai untuk atribut accept ini adalah MIME_type seperti audio/*, video/*, dan image/*. MIME_type adalah sebuah pengelompokkan khusus untuk file-file di dalam internet . List lengkap dari MIME ini dapat dilihat dari http://en.wikipedia.org/wiki/Internet_media_type.
Contoh berikut akan membatasi file upload untuk file gambar:
<form> <input type="file" name="file_gambar" accept="image/*"></form> |
Namun pembatasan file ini tidak dapat diandalkan, karena user bisa dengan mudah mengganti jenis file yang diupload. Validasi untuk membatasi jenis file sebaiknya dilakukan juga di sisi web server).
Atribut disabled: Menonaktifkan Upload File
Atribut disabled digunakan untuk membuat file upload tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah file upload hanya dapat diisi ketika user telah mengisi form diatasnya.
Atribut disabled hanya memiliki 1 nilai, yaitu ditulis dengan disabled=”disabled” Berikut contoh penulisannya:
<form> <input type="file" name="upload_gambar" disabled="disabled"></form> |
Cara Penggunaan tag input type file Dalam Form HTML
Untuk merangkum penggunaan tag input type file beserta atribut-atributnya, akan dibuat contoh kode HTML untuk semua atribut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html><html><head> <title>Belajar Tag Input Type=file HTML</title></head><body> <h4>Belajar tag Input type="file" </h4> <form name="form_upload" > Input type="file" dasar : <input type="file"> <br /> Input type="file" tipe data gambar : <input type="file" accept="image/*"/> <br /> Input type="file" disabled : <input type="file" accept="image/*" disabled="disabled"> </form></body></html> |
Selain menggunakan tag input, untuk mengirimkan data ke web server (proses upload), pada tag form dari HTML perlu ditambahkan sebuah atribut enctype dengan nilai multipart/form-data. Atribut ini menginstruksikan kepada web server bahwa data yang dikirim berisi file yang diupload. Selain itu proses pengiriman harus menggunakan method=”POST”.
Untuk mengetahui bahwa agar form dapat mengirimkan file, format awal form harus berbentuk:
<form name="nama_form" enctype="multipart/form-data" action="proses.php"method="POST"> |
Sehingga contoh formnya akan menjadi sebagai berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html><html><head> <title>Belajar Tag Input Type=file HTML</title></head><body> <h4>Belajar tag Input type="file"</h4> <form name="nama_form" enctype="multipart/form-data" action="proses.php" method="POST"> Upload Gambar: <input type="file" accept="image/*"/> <br /> <input type="submit" value="Proses Upload"> </form></body></html> |
Fungsi dan Cara Penggunaan tag input
type image
Fungsi utama dari tag input dengan type image adalah memasukkan gambar ke dalam form. Gambar tersebut akan berfungsi sebagai objek form yang bisa di-klik oleh user. Ketika user men-klik gambar tersebut, web browser akan mengirimkan koordinat titik dimana gambar di-klik.
Atribut name: Untuk Pemrosesan tag input type image
Atribut name merupakan atribut paling penting untuk type image, karena atribut name inilah yang akan menjadi varibel penampung di sisi server nantinya. Berikut cara penulisan atribut name:
<input type="image" src="koala.jpg" name="gambar_koala"/> |
Atribut src: Menentukan Lokasi Gambar
Sama seperti tag <img> yang membutuhkan alamat dari gambar, atribut scr digunakan untuk memberi tahu web browser alamat dari gambar yang ditampilkan. Atribut ini adalah atribut inti dari tag input dengan type image, karena tentu saja tanpa gambar objek form ini tidak akan berfungsi. Berikut adalah contoh penggunaan src untuk tag input type image:
<input type="image" src="koala.jpg" /> |
Dari contoh tersebut memiliki gambar dengan nama koala.jpg di dalam folder yang sama dengan halaman HTML berada.
Atribut width dan height: Menentukan Ukuran Gambar
Atribut width dan height digunakan untuk mengatur lebar dan tinggi dari gambar. Ukuran yang digunakan bisa dalam satuan pixel ataupun persen. Berikut contoh penggunaan atribut width dan height:
<input type="image" src="koala.jpg" width="200px" dan height="200px" /> |
Atribut Align: Untuk Mengatur Rata Penempatan Gambar
Atribut align digunakan untuk mengatur penempatan gambar, nilai dari atribut ini bisa salah satu dari: “bottom“, “left“, “middle“, “right“, dan “top“. Settingan default web browser jika atribut ini tidak ditulis adalah left. Berikut contoh penggunaan atribut align:
<input type="image" src="koala.jpg" align="right" /> |
Atribut alt: Alternatif Tulisan Jika Gambar Gagal Tampil
Atribut alt berfungsi untuk memberikan alternatif tulisan jika gambar gagal di tampilkan. Nilai dari atribut ini adalah tulisan yang dapat menggantikan atau menjelaskan gambar. Berikut contoh penggunaan atribut alt:
<input type="image" src="koala.jpg" alt="Gambar Koala" /> |
Atribut disabled: Untuk Menonaktifkan Gambar
Atribut disabled digunakan untuk membuat file gambar tidak bisa digunakan. Namun berbeda dengan objek form lainnya, ketiga tag input dengan tipe=”image” ini disabled, gambar seolah-olah tidak berpengaruh apa-apa, namun anda tidak bisa men-klik gambar tersebut.
Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan gambar hanya dapat diproses ketika user telah mengisi form diatasnya.
Atribut disabled hanya memiliki 1 nilai, yaitu ditulis dengan disabled=”disabled” Berikut contoh penulisannya:
<input type="image" src="koala.jpg" disabled="disabled" /> |
Cara Penggunaan tag input type image dalam Form HTML
Biasanya, tag input type image ini digunakan tanpa objek form lainnya, karena jika tag input ini berada di dalam tag form, maka ketika user men-klik gambar tersebut, secara otomatis form akan di-submit dan mengirimkan koordinat dimana gambar tersebut di klik (tanpa menggunakan tombol submit).
Berikut adalah contoh kode HTML penggunaan atribut type=”image”:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html><head> <title>Belajar Tag Input Type=image HTML</title></head><body> <h4>Belajar tag Input type="image":</h4> <form action="proses.php" method="get"> <input type="image" src="koala.jpg" alt="gambar koala" name="gambar_koala"/> </form></body></html> |
Silahkan jalankan kode tersebut, dan ketika men-klik gambar, halaman web akan berpindah dan perhatikan di bagian alamat web, akan terlihat koordinat gambar seperti berikut:
file:///D:/BelajarHTML/proses.php?gambar_koala.x=136&gambar_koala.y=94 |
Gambar_koala.x=136 dan gambar_koala.y=94 adalah koordinat dimana men-klik gambar tersebut. Informasi ini bisa digunakan di sisi web server untuk diproses.
Fungsi dan Cara Penggunaan Tag Input Type Hidden HTML
Tag input dengan type hidden adalah sebuah objek form khusus yang sesuai dengan nama tipenya, memang tersembunyi dan tidak dapat dilihat oleh user.
Type hidden ini bisa digunakan untuk mengirim suatu data dari sebuah halaman ke halaman lain tanpa mengganggu bentuk form yang telah ada, dan biasanya digabungkan dengan pemrosesan javascript atau PHP.
Cara penulisan dasar type hidden ini adalah sebagai berikut:
<form> <input type="hidden" /></form> |
Atribut name: Untuk Pemrosesan tag input type hidden
Atribut name berfungsi sebagai penanda nama untuk memproses hasil pilihan form ke dalam web server. Berikut adalah cara penulisan tag input type hidden dengan atribut name:
<form> <input type="hidden" name="asal_halaman"/></form> |
Atribut value: Sebagai Nilai tag input type hidden
Atribut value untuk type hidden berguna pada saat pemrosesan form oleh web server. Misalnya dalam bahasa PHP, nilai dari value inilah yang akan diproses. Dalam type hidden ini, nilai dari atribut value inilah yang merupakan nilai terpenting, karena disinilah programmer dapat menyisipkan data yang diinginkan.
Berikut adalah contoh penggunaan atribut value:
<form> <input type="hidden" name="asal_halaman" value="halaman_register"/></form> |
Cara Penggunaan tag input type hidden dalam Form HTML
Untuk merangkum penggunaan Tag Input type hidden beserta atributnya, akan dibuat contoh kode HTML cara penggunaan tag input type hidden:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html><html><head> <title>Belajar Tag Input Type=hidden HTML</title></head><body> <h4>Belajar tag Input type="hidden" </h4> <form action="proses.php" method="get"> <input type="hidden" name="asal_halaman" value="halaman_register"/> <input type="submit" value="Kirim pesan rahasia"/> </form></body></html> |
Jika menjalankan kode HTML tersebut, yang terlihat hanya sebuah tombol, namun ketika tombol tersebut diklik, objek form hidden akan terlihat nilainya di alamat web browser sebagai berikut:
file:///D:/BelajarHTML/proses.php?asal_halaman=halaman_register |
Pesan ini menandakan bahwa sebenarnya di dalam form terdapat tag input dengan type hidden. Asal_alaman berasal dari atribut name, dan halaman_register adalah nilai dari atribut value.
Fungsi dan Cara Penggunaan Tag Select Form HTML
Tag select di dalam HTML digunakan untuk membuat objek form yang berupa list pilihan yang dapat dipilih oleh user. Biasanya tag select digunakan untuk “memaksa” user memilih salah satu dari pilihan yang tersedia. Pilihan ini telah didefenisikan pada saat form dibuat.
Pada penggunaan tag select ini, kita juga membutuhkan tag option sebagai “isi” dari tag select. Format dasar pembuatan select dalam HTML adalah sebagai berikut:
<select > <option>Pilihan 1</option> <option>Pilihan 2</option> <option>Pilihan 3</option></select > |
Pada hal ini tidak harus menggunakan tag select di dalam form HTML, namun bisa juga digunakan tanpa tag form. Akan tetapi jika digunakan diluar form, membutuhkan bantuan bahasa pemograman lain seperti javascript untuk memproses hasilnya.
Atribut name: Untuk Pemrosesan Tag Select
Atribut name untuk tag select digunakan sebagai identitas dari tag select tersebut. Identitas ini diperlukan pada saat pemrosesan di sisi server. Atribut name inilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut name diletakkan di dalam tag select, bukan di dalam tag option. Berikut contoh penulisan atribut name untuk tag select:
<select name=”judul_pilihan”> <option>Pilihan 1</option> <option>Pilihan 2</option></select > |
Atribut value: Sebagai Nilai untuk Tag Option
Atribut value digunakan di dalam tag option. Nilai dari atribut inilah yang akan dikirimkan kedalam web server, sehingga disarankan menggunakan nilai yang mencerminkan pilihan user. Nilai dari value tidak harus sama dengan apa yang dilihat user. Berikut contoh penulisannya:
<select> <option value="pil1">Pilihan 1</option> <option value="pil2">Pilihan 2</option> <option value="pil3">Pilihan 3</option></select> |
Atribut selected: Menampilkan Nilai Default dari Tag Select
Atribut selected digunakan pada tag option. Jika sebuah tag option mememiliki atribut selected, maka pada saat form ditampilkan, pilihan tag inilah yang akan tampil sebagai nilai awal dari select (nilai default). Nilai dari atribut ini adalah dirinya sendiri, sehingga penulisannya menjadi selected=“selected”. Berikut contoh penulisannya:
<select> <option >Pilihan 1</option> <option selected="selected">Pilihan 2</option> <option>Pilihan 3</option></select> |
Atribut Size: Menentukan Besar tampilan Select
Atribut size digunakan untuk menentukan besar dari tampilan tag select. Jika tidak ditulis, tag select memiliki nilai default size=”1″, sehingga hanya 1 pilihan yang “terlihat” ketika user memilih pilihan yang ada.
Namun jika menambahkan atribut size=”3″, maka pada saat form ditampilkan, tag select akan ditampilkan sebanyak 3 baris, bukan 1 baris seperti biasanya.
Atribut size ini umumnya digunakan apabila tag select dirancang untuk dapat dipilih dengan beberapa pilihan sekaligus. Untuk keperluan ini, atribut size biasanya di kombinasikan dengan atribut multiple yang akan kita bahas setelah ini.
Berikut contoh penulisan atribut size untuk tag select:
<select size="2"> <option>Pilihan 1</option> <option>Pilihan 2</option></select > |
Atribut Multiple: Untuk Memilih lebih dari 1 pilihan tag Select
Atribut multiple untuk tag select digunakan untuk memungkinkan user untuk dapat memilih lebih dari 1 nilai. Namun untuk dapat memilih lebih dari 1 nilai, user harus menekan tombol ctrl pada keyboard.
Atribut multiple akan lebih mudah digunakan jika ditambahkan atribut size. Satu-satunya nilai untuk atribut multiple ini adalah “multiple”. Berikut contoh penggunaan atribut multiple, dan dikombinasikan dengan atribut size:
<select size="3" multiple="multiple"> <option>Pilihan 1</option> <option>Pilihan 2</option> <option>Pilihan 3</option></select > |
Atribut disabled: Menonaktifkan tag Select
Atribut disabled digunakan untuk membuat tag select tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal, misalkan sebuah pilihan select hanya dapat diisi ketika user telah mengisi form diatasnya.
Atribut disabled ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya atribut disabled untuk tag select HTML:
<select disabled="disabled"> <option>Pilihan 1</option> <option>Pilihan 2</option> <option>Pilihan 3</option></select > |
Selain digunakan untuk tag select, atribut disabled juga bisa digunakan untuk tag option. Ketika digunakan di dalam tag option, maka pilihan yang memiliki atribut disabled tidak akan bisa digunakan. berikut contoh penulisannya:
<select> <option>Pilihan 1</option> <option disabled="disabled">Pilihan 2</option> <option>Pilihan 3</option></select> |
Tag optgroup dan atribut label
Tag optgroup digunakan untuk membuat kelompok-kelompok pilihan. Jika list pilihan anda panjang, menggunakan tag optgroup akan memudahkan user dalam menentukan pilihan apabila telah dikelompokkan terlebih dahulu.
Atribut label diperlukan untuk menampilkan judul dari tag optgroup. Berikut contoh penulisan tag optgroup:
<select> <optgroup label="Kelompok 1"> <option>Pilihan 1</option> <option>Pilihan 2</option> <option>Pilihan 3</option> <optgroup label="Kelompok 2"> <option>Pilihan 5</option> <option>Pilihan 6</option> <option>Pilihan 7</option></select> |
Dalam penulisan tag optgroup, membutuhkan sebuah atribut, yakni atribut label yang berisi tulisan yang akan muncul untuk grup pilihan tersebut. Di dalam web browser, tag optgroup ini akan ditampilkan dalam huruf tebal (bold), namun user tidak dapat memilihnya karena fungsi tag ini memang hanya sebagai keterangan saja.
Cara Penggunaan Tag Input select dalam Form HTML
Contoh cara penggunaannya di dalam form HTML:
<!DOCTYPE html><html><head> <title>Belajar Tag Select HTML</title></head><body> <h4>tag Select dengan atribut: name+value+selected:</h4> <form name="form1" action="proses.php" method="get"> <select name="bulan_lahir"> <option value="jan">Januari</option> <option value="feb">Februari</option> <option value="mar" selected="selected">Maret</option> <option value="apr">April</option> <option value="mei">Mei</option> <option value="jun">Juni</option> <option value="jul">Juli</option> </select> </form> <h4>tag Select dengan atribut: name+value+selected+size=3:</h4> <form name="form2" action="proses.php" method="get"> <select name="bulan_lahir" size="3"> <option value="jan">Januari</option> <option value="feb">Februari</option> <option value="mar">Maret</option> <option value="apr">April</option> <option value="mei">Mei</option> <option value="jun">Juni</option> <option value="jul" selected="selected">Juli</option> </select> </form> <h4>tag Select dengan atribut: name+value+selected+size=6+multiple:</h4> Tahan tombol crtl pada saat memilih > 1 pilihan. <br /> <form name="form2" action="proses.php" method="get"> <select name="bulan_lahir" size="6" multiple="multiple"> <option value="jan" selected="selected">Januari</option> <option value="feb">Februari</option> <option value="mar">Maret</option> <option value="apr">April</option> <option value="mei">Mei</option> <option value="jun">Juni</option> <option value="jul">Juli</option> </select> </form> <h4>tag Select dengan atribut: name+value+selected+disabled</h4> <form name="form2" action="proses.php" method="get"> <select name="bulan_lahir" disabled="disabled"> <option value="jan">Januari</option> <option value="feb">Februari</option> <option value="mar">Maret</option> <option value="apr">April</option> <option value="mei"selected="selected">Mei</option> <option value="jun">Juni</option> <option value="jul">Juli</option> </select> </form> <h4>tag Select dengan atribut: name+value dan tag optgroup</h4> <form name="form2" action="proses.php" method="get"> <select name="bulan_lahir"> <optgroup label="Triwulan 1"> <option value="jan">Januari</option> <option value="feb">Februari</option> <option value="mar">Maret</option> </optgroup> <optgroup label="Triwulan 2"> <option value="apr">April</option> <option value="mei">Mei</option> <option value="jun">Juni</option> </optgroup> <optgroup label="Triwulan 3"> <option value="jul">Juli</option> </optgroup> </select> </form></body></html>
Fungsi dan Cara Penggunaan Tag Textarea
Form HTML
Objek form textarea digunakan untuk membuat text inputan yang bisa menampung lebih dari 1 baris inputan. Tag textarea mirip dengan tag input type text, namun memiliki kelebihan untuk menampung beberapa baris. Biasanya textarea digunakan untuk inputan yang panjang, seperti komentar, keterangan, atau catatan.
Untuk menggunakan textarea, kita cukup membuat tag textarea sebagai berikut:
<textarea></textarea> |
Diantara tag pembuka dan penutup bisa diselipkan text yang akan ditampilkan sebagai isian awal dari text area seperti berikut ini:
<textarea>Silahkan isi komentar anda</textarea> |
Atribut name: Untuk pemrosesan Tag Textarea
Walaupun tidak harus, namun jika text area digunakan di dalam form, maka atribut name berfungsi sebagai identitas dari tag textarea tersebut. Identitas ini diperlukan pada saat pemrosesan di sisi server. Atribut name inilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut name diletakkan di dalam tag textarea:
<textarea name="komentar">Silahkan isi komentar anda</textarea> |
Atribut cols dan rows: Menentukan Lebar dan Tinggi Textarea
Kedua atribut ini berfungsi untuk membatasi tampilan lebar kolom(cols) dan tinggi baris (rows) dari textarea. Nilai yang diinput adalah jumlah karakter yang menjadi lebar dari text area. Misalkan membuat atribut cols=”40”, maka text area akan memiliki lebar 40 karakter. Namun lebar ini tidak akan persis sama dengan 40 karakter, karena akan tergantung font, serta jenis huruf yang diinput.
Contoh penggunaan atribut cols dan rows:
<textarea cols="40">Silahkan isi komentar anda</textarea><textarea cols="40" rows="10">Silahkan isi komentar anda</textarea> |
Atribut disabled dan readonly: menonaktifkan tag Textarea
Atribut disabled dan readonly digunakan untuk membuat textarea tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah textarea hanya dapat diisi ketika user telah mengisi kotak isian lainnya.
Kedua atribut ini hanya memiliki 1 nilai, yaitu ditulis dengan disabled=”disabled” dan readonly =“readonly”. Berikut contoh penulisannya:
<textarea readonly="readonly">Silahkan isi komentar anda</textarea><textarea disabled="disabled">Silahkan isi komentar anda</textarea> |
Walaupun kedua textarea yang memiliki atribut ini tidak bisa digunakan, namun keduanya akan memiliki tampilan yang berbeda. Atribut disabled akan membuat kotak text berwarna abu-abu, sedangkan atribut readonly tampak seperti kotak text biasa.
Atribut id dan class: CSS dan Javascript
Selain atribut name, value, cols, rows, disabled dan readonly , uga bisa menggunakan atribut umum seperti id dan class dalam tag textarea. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.
Cara Penggunaan Tag Textarea dalam form HTML
Contoh atribut dari tag textarea dalam form HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html><html><head> <title>Belajar Tag Textarea HTML</title></head><body> <form action="proses.php" method="get"> <h4>Tag textarea dengan atribut: name</h4> <textarea name="komentar1"> Silahkan isi komentar anda </textarea> <br /> <h4>Tag textarea dengan atribut: name + cols="40"</h4> <textarea name="komentar2" cols="40"> Silahkan isi komentar anda </textarea> <br /> <h4>Tag textarea dengan atribut: name + cols="40" + rows="5"</h4> <textarea name="komentar3" cols="40" rows="5"> Silahkan isi komentar anda </textarea> <br /> <h4>Tag textarea dengan atribut: name + readonly</h4> <textarea name="komentar4" readonly="readonly"> Silahkan isi komentar anda </textarea> <br /> <h4>Tag textarea dengan atribut: name + disabled</h4> <textarea name="komentar5" disabled="disabled"> Silahkan isi komentar anda </textarea> </form></body></html> |
