Tutorial Membuat Form HTML

Tutorial HTML Lanjutan: Tag dan Atribut untuk Pembuatan Form HTML
27 Feb 14 | Andre | Tutorial HTML | 2 Comments

Pada tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag
form) anda telah mempelajari cara membuat form sederhana di dalam
HTML. Dalam penggunaannya, HTML masih memiliki
banyak tag dan atribut yang dapat digunakan untuk membuat form yang
lebih kompleks.
Dalam 10 tutorial khusus tentang pembuatan form HTML ini, anda dapat
mempelajari lebih dalam tentang tag dan atribut pembuatan form HTML,
mulai dari tag input type text, checkbox, radio, sampai type file,
image dan hidden.
Tutorial Form HTML Part 1: Fungsi dan Cara Penggunaan Tag Label HTML
Tag pertama yang akan kita pelajari dalam Tutorial Form HTML ini adalah
tentang fungsi dan cara penggunaan tag label.
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 (kecuali anda mengubahnya menggunakan CSS).
Sehingga tanpa atau dengan tag label, anda tidak akan melihat
perbedaannya.
Untuk memahami kegunaan tag label, silahkan jalankan contoh kode
form HTML berikut ini:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Tag Label HTML</title>
5 </head>
7 <body>
8 <h4>Jadwal kegiatan saya sekarang: </h4>
10 <form action="daftar.php" method="post">
11
12 <input type="checkbox" name="belajarhtml" id="belajarhtml"
13 value="belajarhtml"/> Saya sedang belajar HTML
14 <br />
15
16 <input type="checkbox" name="belajarcss" id="belajarcss"
17 value="belajarcss"/> Saya sedang belajar CSS
18 <br />
19
20 <input type="checkbox" name="duniailkom" id="duniailkom"
21 value="duniailkom"/> Saya sedang belajar pemograman di Duniailkom
22
23 </form>
24 </body>
25 </html>
Dari contoh
kode form HTML diatas, saya membuat 3 isian checkbox sederhana.
Ketika kita mencheklist salah satu dari checkbox tersebut, cara yang
paling banyak digunakan adalah dengan men-klik kotak putih
pada checkbox tersebut.
Namun kotak checkbox tersebut cukup kecil, dan akan sedikit

menyulitkan untuk mengklik-nya.
Salah satu cara agar lebih mudah bagi kita (dan juga bagi pengguna)
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 <label>
3 value="belajarhtml"/>Saya sedang belajar HTML
4 </label>
Dengan memasukkan seluruh tag input checkbox dan keterangannya

ke dalam tag label, maka kita bisa men-klik tulisan keterangan dari
checkbox, dan secara otomatis checkbox tersebut akan terisi.
Silahkan anda langsung mengubah kode kita sebelumnya, dan tambahkan

tag label.
Cara kedua untuk menggunakan tag label adalah

menggunakan atribut for. Dengan menggunakan atribut for ini, maka
kita tidak harus memasukkan seluruh tag input ke dalam tag label.
Berikut contoh penggunaannya:
1 <input type="checkbox" name="belajarcss" id="belajarcss" value="belajarcss"/>
2 <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 saya membuat
atribut id=belajarcss di dalam tag input checkbox. Sehingga dalam
pembuatan labelnya, saya memberikan nilai atribut for=belajarcss.
Cara ketiga untuk penggunaan tag label adalah dengan menggabungkan

kedua cara diatas. Perhatikan contoh berikut:
1 <label for="duniailkom">
2 <input type="checkbox" name="duniailkom" id="duniailkom" value="duniailkom
3 Saya sedang belajar pemograman di Duniailkom
4 </label>
Di dalam contoh tersebut saya menggabungkan penggunaan atribut

for untuk tag label, namun juga mengurung tag input checkbox
dengan tag label.
Sebagai contoh utuh dari form kita, berikut adalah contoh form
sebelumnya dengan tambahan tag label:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar Tag Label HTML</title>
5 </head>
7 <body>
8 <h4>Jadwal kegiatan saya sekarang: </h4>
11
12 <label>
14 value="belajarhtml"/> Saya sedang belajar HTML
15 </label>
16 <br />
17
19 value="belajarcss"/>
20 <label for="belajarcss"> Saya sedang belajar CSS</label>
21 <br />
22
23 <label for="duniailkom" >
25 value="duniailkom"/> Saya sedang belajar pemograman di Duniailkom
26 </label>
27
28 </form>
29 </body>
30 </html>
Silahkan anda
mencoba menjalankan kode tersebut, dan jika anda men-klik tulisan
keterangan dari checkbox, maka secara langsung kotak checkbox akan
berisi. Hal seperti ini akan lebih memudahkan user dalam mengisi form
yang kita rancang.
Di dalam beberapa referensi, anda disarankan menggunakan cara

penulisan tag label yang kedua, yakni dimana kita memisahkan tag
label dari tag input, dan menggunakan atribut for sebagai pengikat
label. Dengan cara ini, form akan lebih fleksibel.
Demikian tutorial kita kali ini mengenai Fungsi dan Cara Penggunaan Tag
Label dalam pembuatan form HTML. Menggunakan tag label untuk
merancang form akan memudahkan user dalam mengisi form yang
dibuat.
Berikutnya dalam tutorial form HTML, saya akan membahas

tentang fungsi dan cara penggunaan tag fieldset dan tag legend untuk
mengelompokkan objek form.
Tutorial Form HTML Part 2: Fungsi dan Cara Penggunaan Tag Fieldset dan
Tag Legend
Setelah mempelajari tag Label pada tutorial pertama, dalam tutorial

kedua ini kita akan mempelajari fungsi dan penggunaan tag fieldset dan
tag legend dalam pembuatan form HTML.
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:
Dari gambar diatas dapat dilihat bahwa pilihan dari checkbox yang ada
dikelompokkan kedalam kelompok Agenda hari ini, dan browser akan
menampilkannya dalam sebuah kotak.
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:
2 <fieldset>
3 <legend>Judul pada kelompok objek</legend>
4 ...kelompok objek form...
5 </fieldset>
6 </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 <!DOCTYPE html>
2 <html>
4 <head>
5 <title>Belajar Tag Fieldset dan Tag Legend HTML</title>
6 </head>
8 <body>
11 <fieldset>
12
13 <legend>Agenda Hari ini</legend>
14
16 value="belajarhtml"/>Belajar HTML
17 <br />
18
20 value="belajarcss"/>Belajar CSS
21 <br />
22
23 <input type="checkbox" name="php" id="belajarphp"
24 value="belajarphp"/>Belajar PHP
25 <br />
26
28 value="duniailkom"/>Belajar pemograman di Duniailkom
29
30 </fieldset>
31 </form>
32
33 </body>
34 </html>
Hasil tampilan kode diatas akan sama dengan tampilan di awal tutorial ini.
Cara merubah rata text tag legend: atribut align
Jika anda perhatikan, 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. Anda bisa mencoba kelima
nilai ini, namun nilai top dan bottom umumnya tidak di support oleh web
browser.
Karena atribut align ini sangat berkaitan dengan CSS, sebaiknya anda
menggunakan CSS untuk mengatur align dari tag legend.
Tag fieldset dan tag legend yang kita pelajari disini lebih berfungsi untuk
tampilan dari form, namun form yang tertata dan terkelompok dengan
baik akan memudahkan user dalam menggunakannya.
Pada tutorial berikutnya kita akan membahas tentang fungsi dan cara
penggunaan tag button di dalam form HTML.
Tutorial Form HTML Part 3: Fungsi dan Cara Penggunaan Tag Button HTML
Jika dalam tutorial sebelumnya kita mempelajari tentang tag fieldset dan
tag legend, dalam tutorial kali ini kita akan mempelajari tag button yang
digunakan untuk membuat tombol di dalam HTML. Tag button ini bisa
digunakan di dalam form, maupun di luar form.
Fungsi Tag Button dalam pembuatan Form HTML
Di dalam tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag
form), kita telah menggunakan tag input dengan type=submit untuk
membuat tombol di dalam form HTML, namun HTML menyediakan tag
khusus yang memiliki fungsi sama, yakni tag button.
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, kita 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. Anda bisa memprogramnya
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, kita 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 anda 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 diprogram menggunakan javascript untuk
mengaktifkan tombol tersebut. Misalkan kita memprogram sebuah tombol
yang hanya bisa aktif ketika user telah mengisi seluruh formulir.
Atribut id dan class: CSS dan Javascript
Selain atribut type dan disabled, kita bisa menggunakan atribut

seperti id dan class dalam tagbutton. 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 <!DOCTYPE html>
2 <html>
4 <head>
5 <title>Belajar Tag Button HTML</title>
6 </head>
8 <body>
10 <button>Silahkan Klik Saya</button>
11 <br />
12
13 <button disabled="disabled">Tombol ini tidak bisa di-klik</button>
14 <br />
15
16 <h4>Formulir isian duniailkom:</h4>
17
18 <form action=" formulir.html" method="get">
19
20 Nama : <input type="text" name="nama_user" id="nama_user"/>
21
22 <button type="submit">Mulai Proses!</button>
23 <button type="reset">Reset Form</button>
24
25 </form>
26
27 </body>
28 </html>
Anda akan
menjumpai bahwa penggunaan tag button di dalam HTML tidak hanya
terbatas di dalam form. Dalam proses desain website, tag button juga
sering diprogram dengan menggunakan javascript.
Dalam tutorial form HTML selanjutnya, kita akan membahas tentang cara
dan fungsi tag input type text dalam HTML. Objek form ini banyak
digunakan dalam form html.
Tutorial Form HTML Part 4: Fungsi dan Cara Penggunaan tag input type
text dan type password
01 Mar 14 | Andre | Tutorial HTML | 33 Comments
Di dalam tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag
form), kita telah menggunakan tag input
dengan type=text dan type=password, namun kali ini kita akan
mempelajari beberapa atribut penting yang sering digunakan untuk tipe
ini.
Beberapa atribut lebih berfungsi sebagai persentasi atau mempercantik

tampilan dari form, sehingga jika anda telah menguasai CSS, sebaiknya
menggunakan CSS untuk keperluan tersebut.
Fungsi Tag Input Type Text dan Type Password dalam pembuatan
Form HTML
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 anda juga
bisa menggunakannya di luar tag form, terutama jika anda akan
memprosesnya menggunakan javascript. Format penulisan paling dasar
dari tag input type=text dan type=password ini adalah:
<input type="text" />
<input type="password"/>
Jika anda 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.
Di dalam contoh dan penjelasan dalam artikel ini, saya hanya

menggunakan contoh dan penjelasan untuk tag
input type=text. Untuk tag input type=password caranya persis
sama, dan anda bisa merubah semua kode yang ada
dari type=text menjadi type=password sebagai sarana latihan.
Atribut name: Untuk Pemrosesan tag input type text
Selain atribut type yang digunakan sebagai pembeda kedua input,

atribut name merupakan atribut paling penting jika anda bermaksud
memprosesnya 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 <form>
2 Nama: <input type="text" name="nama_user" />
3 Password: <input type="password" name="password_user"/>
4 </form>
Anda boleh bebas memberikan nilai untuk atribut name ini, namun
disarankan menggunakan nama yang singkat dan sesuai dengan
peruntukannya agar tidak bingung ketika membuat program PHPnya.
Atribut value: Nilai Awal tag input type text
Atribut value digunakan sebagai nilai isian awal untuk

input type=text. Namun atribut ini bersifat opsional dan anda tidak
harus menambahkannya untuk setiap text inputan.
Berikut adalah cara penulisannya:
1 <input type="text" name="nama_user" value="masukkan nama anda"/>
2 <input type="password" name="password_user" value="masukkan password and
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 mengapus 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 anda 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
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <title>Belajar Tag Input Type=text HTML</title>
6 </head>
8 <body>
10 <h4>Belajar tag Input type="text" duniailkom:</h4>
11 <form>
12
13 Nama User :<input type="text" name="nama_user" value="masukkan nama a
14 <br/>
15
16 Password User :<input type="password" name="password_user"
17 value="masukkan password anda"/>
18
19 </form>
20 </body>
21 </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 <!DOCTYPE html>
2 <html>
4 <head>
6 </head>
7
8 <body>
11 <form>
12
13 Size = 04 pixel :
14 <input type="text" name="nama_user" size="4"/>
15 <br/>
16
19 <br/>
20
23
24 </form>
25 </body>
26 </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 kita membutuhkan panjang karakter yang telah
dibatasi untuk inputan form, misalkan untuk password yang dibatasi
sebanyak 6 karakter.
Namun anda tidak 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 <!DOCTYPE html>
2 <html>
4 <head>
6 </head>
8 <body>
11 <form>
12
13 Size = 04 pixel, maxlength = 04 :
14 <input type="text" name="nama_user" size="4" maxlength="4"/>
15 <br/>
16
19 <br/>
20

23
24 </form>
25
26 </body>
27 </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 <!DOCTYPE html>
2 <html>
4 <head>
6 </head>
8 <body>
11 <form>
12
13 User name (normal) :

14 <input type="text" name="nama_user"/>
15 <br/>
16
17 User name (readonly) :
18 <input type="text" name="nama_user" readonly="readonly" />
19 <br/>
20
21 User name (disabled) :
22 <input type="text" name="nama_user" disabled="disabled" />
23
24 </form>
25 </body>
26 </html>
Selain atribut type, value, size, maxlength, readonly dan disabled,

kita 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
Sebagai penutup, saya akan membuat beberapa tag input untuk

merangkum apa yang telah kita pelajari dalan tutorial kali ini, berikut cara
penggunaan tag input type text dan type password dalam HTML:
1 <!DOCTYPE html>
2 <html>
4 <head>
6 </head>
8 <body>
10 <h4>Belajar tag Input type="text" di duniailkom.com:</h4>
11 <form>
12
13 Tag Input dengan atribut value :
14 <input type="text" name="nama_user" value="masukkan nama anda"/>

15 <br/>
16
17 Tag Input dengan atribut size = 4 :
19 <br/>
20
21 Tag Input dengan atribut maxlength = 5 :
22 <input type="text" name="nama_user" maxlength="5" />
23 <br/>
24
25 Tag Input dengan atribut readonly :
26 <input type="text" name="nama_user" readonly="readonly"/>
27 <br/>
28
29 Tag Input dengan atribut disabled :
30 <input type="text" name="nama_user" disabled="disabled" />
31 <br/>
32
33 </form>
34 </body>
35 </html>
Objek form berupa text inputan yang dibuat dengan tag input type
text ini mungkin merupakan inputan form yang akan paling sering anda
gunakan. Selain memahami atribut-atribut HTML yang digunakan untuk
merancang form, di dalam tutorial cara pembuatan form HTML dengan tag
input type text ini anda juga telah mempelajari contoh penggunaannya.
Tutorial Form HTML Part 6: Fungsi dan Cara Penggunaan tag input type
radio HTML
Cara penggunaan tag input type radio telah kita bahas pada
tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form),
namun kali ini kita akan mempelajari beberapa atribut penting yang
sering digunakan untuk tipe radio ini.
Beberapa atribut lebih berfungsi sebagai persentasi atau mempercantik

tampilan dari form, sehingga jika anda telah menguasai CSS, sebaiknya
menggunakan CSS untuk keperluan tersebut.
Fungsi tag input type radio dalam Pembuatan Form 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 anda 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. Misalnya dalam bahasa pemograman PHP, nilai dari value inilah
yang akan diproses. Anda bebas mengisinya dengan nilai apapun, namun
akan lebih memudahkan jika diisi dengan fungsi dari radio itu sendiri.
Berikut contoh penggunaan atribut value:
<form>
<input type="radio" name="nama_radio" value="isi_radio1"/>keterangan radio1
</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_radio2"
checked="checked"/>keterangan radio2
</form>
Jika anda 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 anda.
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.
Selain atribut type, value, checked dan disabled, kita 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, saya akan membuat contoh kode HTML untuk semua atribut
yang telah kita pelajari:
1 <!DOCTYPE html>
2 <html>
4 <head>
5 <title>Belajar Tag Input Type=radio HTML</title>
6 </head>
8 <body>
10 <h4>Belajar tag Input type="radio" di duniailkom.com:</h4>

11 <form>
12
13 Radio dasar :
14 <input type="radio" name="jenis_kelamin1" value="Laki-laki"/>Laki-laki
15 <br />
16
17 Radio dengan pilihan :
19 <input type="radio" name="jenis_kelamin2" value="Perempuan"/>Perempuan
20 <br />
21
22 Radio + checked :
24 <input type="radio" name="jenis_kelamin3" value="Perempuan"
25 checked="checked"/>Perempuan
26 <br />
27
28 Radio + disabled :
29 <input type="radio" name="jenis_kelamin4" value="Laki-laki"
30 disabled="disabled"/>Laki-laki
31 <input type="radio" name="jenis_kelamin4" value="Perempuan"
32 disabled="disabled"/>Perempuan
33 <br />
34 <br />
35
36 Radio + Tag Label + Tag fieldset + Tag legend :
37 <fieldset>
38 <legend>Jenis Kelamin</legend>
39 <label>
41 </label>
42 <label>
43 <input type="radio" name="jenis_kelamin5" value="Perempuan"/>Perempua
44 </label>
45 </fieldset>
46
47 </form>
48 </body>
49 </html>
Jika anda perhatikan, pada setiap contoh saya memberikan atribut name
yang berubah-ubah dari jenis_kelamin1 sampai
dengan jenis_kelamin5, hal ini agar masing-masing radio dianggap
sebagai contoh yang terpisah.
Pada contoh terakhir saya menggunakan tag label, tag fieldset dan
tag legend yang telah kita pelajari pada tutorial form HTML: Fungsi dan
Cara Penggunaan Tag Fieldset dan Tag Legend untuk menambah struktur
dan mempercantik tampilan form.
Tag input type radio yang telah kita pelajari dalam Tutorial Form HTML:
Fungsi dan Cara Penggunaan Tag Input Type Radio ini cocok digunakan
untuk objek form yang membutuhkan user untuk memilih hanya satu
diantara pilihan yang ada.
Selanjutnya kita akan membahas tag input tipe file yang digunakan
untuk upload data.
utorial Form HTML Part 7: Fungsi dan Cara Penggunaan tag input type file
(form upload)
Form tidak hanya digunakan untuk menerima inputan berupa text saja,
namun juga digunakan untuk menerima inputan berupa upload data dari
user. Untuk keperluan ini, HTML menyediakan tag input type file.
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 sendiri akan banyak
melibatkan web server (menggunakan PHP). Saya tidak akan
membahasnya pemograman PHPnya, namun akan fokus pada kode HTML
yang diperlukan.
Dalam menggunakan tag input dengan atribut type=file ini, kita

hanya menambahkan kode berikut kedalam form HTML:
<form>
<input type="file">
</form>
Jika anda menjalankan 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 anda 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 membasi 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
(menggunakan PHP).
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 dirinya sendiri, yang ditulis
dengan disabled=disabled Berikut contoh penulisannya:
<form>
<input type="file" name="upload_gambar" disabled="disabled">
</form>
Selain atribut type, name, accept dan disabled, kita juga bisa
menggunakan atribut umum seperti id dan class dalam tag input type
file. Tag id dan class akan dibutuhkan untuk pemograman HTML
Cara Penggunaan tag input type file Dalam Form HTML
Untuk merangkum penggunaan tag input type file beserta atribut-

atributnya, saya akan membuat contoh kode HTML untuk semua atribut
yang telah kita pelajari:
1 <!DOCTYPE html>
2 <html>
4 <head>
5 <title>Belajar Tag Input Type=file HTML</title>
6 </head>
8 <body>
10 <h4>Belajar tag Input type="file" di duniailkom.com:</h4>
11 <form name="form_upload" >
12
13 Input type="file" dasar :
14 <input type="file">
15 <br />
16
17 Input type="file" tipe data gambar :
18 <input type="file" accept="image/*"/>
19 <br />
20
21 Input type="file" disabled :
22 <input type="file" accept="image/*" disabled="disabled">
23
24 </form>
25 </body>
26 </html>
Jika anda ingin menjalankan form diatas untuk diproses oleh PHP, kita
perlu menambahkan beberapa atribut dan aturan untuk tag form.
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. Lebih jauh tentang penggunaan ini
akan kita bahas dalam tutorial PHP, karena akan banyak
menggunakan PHP.
Dalam tahap ini kita cukup 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 <!DOCTYPE html>
2 <html>
4 <head>
5 <title>Belajar Tag Input Type=file HTML</title>
6 </head>
8 <body>
10 <h4>Belajar tag Input type="file" di duniailkom.com:</h4>
11 <form name="nama_form" enctype="multipart/form-data"
12 action="proses.php" method="POST">
13
14 Upload Gambar: <input type="file" accept="image/*"/>
15 <br />
16 <input type="submit" value="Proses Upload">
17
18 </form>
19 </body>
20 </html>
Di dalam tutorial form html kali ini kita telah mempelajari cara membuat
form untuk keperluan upload file dengan tag input type file, walaupun
pemrosesan file yang diupload tidak bisa ditangani dengan HTML saja,
namun harus melibatkan bahasa pemograman web seperti PHP.
Selanjutnya kita akan mempelajari tentang tag input type image.
Tutorial Form HTML Part 9: Fungsi dan Cara Penggunaan Tag Input Type
Hidden HTML

Tag input dengan type hidden merupakan salah satu senjata rahasia
dalam merancang form HTML. Di dalam Tutorial Form HTML: Fungsi dan
Cara Penggunaan Tag Input Type Hidden ini kita akan mempelajari cara
memanfaatkan fitur objek ini.
Fungsi tag input type hidden dalam pembuatan Form HTML
Tag input dengan type hidden adalah sebuah objek form khusus yang
sesuai dengan nama tipenya, memang tersembunyi dan tidak dapat
dilihat oleh user. Namun objek form ini menawarkan fleksibilitas yang
dapat dimanfaatkan oleh programmer untuk menyisipkan suatu data
untuk diproses.
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 (misalnya dengan bahasa PHP). 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>
Selain atribut yang dijelaskan diatas, kita juga bisa menggunakan atribut
umum seperti id dan class dalam tag input type hidden. Namun
karena sifatnya yang tersembunyi, atribut class tidak akan diperlukan.
Tag id dibutuhkan untuk pemograman HTML menggunakan Javascript.
Cara Penggunaan tag input type hidden dalam Form HTML
Untuk merangkum penggunaan Tag Input type hidden beserta atributnya,

saya akan membuat contoh kode HTML cara penggunaan tag input type
hidden:
1 <!DOCTYPE html>
2
<html>
3
4
<head>
5
<title>Belajar Tag Input Type=hidden HTML</title>
6
</head>
7
8
<body>
9
10
<h4>Belajar tag Input type="hidden" di duniailkom.com:</h4>
11
<form action="proses.php" method="get">
12
<input type="hidden" name="asal_halaman" value="halaman_register"/>
13
<input type="submit" value="Kirim pesan rahasia"/>
14
</form>
15
16
</body>
17
</html>
Jika anda
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. Penggunaan tag
input type hidden ini akan berguna saat dikombinasikan dengan bahasa
pemograman web seperti Javascript.
Dalam tutorial tag input type hidden ini kita telah mempelajari cara
penulisan dan penggunaan objek form hidden. Berikutnya kita akan
membahas tentang tag select.
Tutorial Form HTML Part 10: Fungsi dan Cara Penggunaan Tag Select Form
HTML
form) kita telah belajar menggunakan tag select, namun dalam tutorial
kali ini saya akan membahasnya dengan lebih dalam beserta atribut-
atribut tambahan yang bisa gunakan untuk tag select.
Fungsi Tag Select dalam pembuatan 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>
</select >
Anda tidak harus menggunakan tag select di dalam form HTML, namun
bisa juga digunakan tanpa tag form. Akan tetapi jika digunakan diluar
form, kita 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 (misalnya menggunakan PHP). 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>
</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>
</select>
Usahakan untuk memberi nilai value berupa nilai yang singkat namun
bermakna sesuai dengan pilihan yang ditampilkan.
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>
</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 anda 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">
</select >
Pada saat penulisan artikel ini, saya mengunakan web browser mozilla
firefox dan google chrome untuk pengujian. Untuk google chrome Versi
33 yang saya gunakan, jika kita membuat size=2, atau size=3, google
chrome akan menampilkannya dengan 4 pilihan, bukan 2 atau 3 seperti
yang seharusnya. Teteapi web browser mozilla firefox akan tetap
menampilkannya secara normal. Perbedaan tampilan ini patut menjadi
pertimbangan jika anda ingin menggunakan atribut size dalam membuat
form.
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">
</select >
penggunaan atribut multiple untuk memungkinkan user memilih lebih dari

satu pilihan mungkin bukan ide yang buruk, tetapi tidak semua user
paham cara men-klik sambil menahan tombol ctrl. Jika anda bermaksud
membolehkan user memilih lebih dari 1 pilihan, pertimbangkan
mengganti tag select dengan checkbox.
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">
</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 disabled="disabled">Pilihan 2</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">
<optgroup label="Kelompok 2">
</select>
Dalam penulisan tag optgroup, kita 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.
Selain atribut name, value, selected, size, multipe dan disabled,

anda juga bisa menggunakan atribut umum
seperti id dan class dalam tag select. Tag id dan class akan dibutuhkan
untuk pemograman HTML menggunakan Javascript dan CSS.
Cara Penggunaan Tag Input select dalam Form HTML
Untuk merangkum seluruh contoh atribut dan tag select yang telah kita
pelajari disini, saya akan membuat contoh cara penggunaannya di dalam
form HTML:
1 <!DOCTYPE html>
2 <html>
4 <head>
5 <title>Belajar Tag Select HTML</title>
6 </head>
7
8 <body>
10 <h4>tag Select dengan atribut: name+value+selected:</h4>
11 <form name="form1" action="proses.php" method="get">
12
13 <select name="bulan_lahir">
14 <option value="jan">Januari</option>
15 <option value="feb">Februari</option>
16 <option value="mar" selected="selected">Maret</option>
17 <option value="apr">April</option>
18 <option value="mei">Mei</option>
19 <option value="jun">Juni</option>
20 <option value="jul">Juli</option>
21 </select>
22
23 </form>
24
25 <h4>tag Select dengan atribut: name+value+selected+size=3:</h4>
27
28 <select name="bulan_lahir" size="3">
31 <option value="mar">Maret</option>
35 <option value="jul" selected="selected">Juli</option>
36 </select>
37
38 </form>
39
40 <h4>tag Select dengan atribut: name+value+selected+size=6+multiple:</h4>
41 Tahan tombol crtl pada saat memilih > 1 pilihan.
42 <br />
44
45 <select name="bulan_lahir" size="6" multiple="multiple">
46 <option value="jan" selected="selected">Januari</option>
53 </select>
54
55 </form>
56
57 <h4>tag Select dengan atribut: name+value+selected+disabled</h4>
59
60 <select name="bulan_lahir" disabled="disabled">
65 <option value="mei"selected="selected">Mei</option>
68 </select>
69
70 </form>
71
72 <h4>tag Select dengan atribut: name+value dan tag optgroup</h4>
74
75 <select name="bulan_lahir">
76 <optgroup label="Triwulan 1">
80 </optgroup>
85 </optgroup>
88 </optgroup>
89 </select>
90
91 </form>
92
93 </body>
94 </html>
Contoh kode program HTML tag select yang saya tulis hanya merangkum
apa yang telah kita pelajari pada tutorial kali ini. Selnajutnya kita akan
mempelajari tentang tag textarea dalam Form HTML.
Tutorial Form HTML Part 11: Fungsi dan Cara Penggunaan Tag Textarea
Form HTML
form) kita telah menggunakan tag Textarea, namun dalam tutorial kali ini
saya akan membahasnya dengan lebih dalam.
Fungsi Tag Textarea dalam pembuatan 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 (misalnya menggunakan PHP). 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 kita 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 dirinya sendiri, yang 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.
Sehingga biasanya atribut disabled lah yang sering digunakan, karena

akan memberikan tampilan kepada user bahwa kotak text tersebut tidak
bisa digunakan.
Selain atribut name, value, cols, rows, disabled dan readonly , kita
juga bisa menggunakan atribut umum seperti id dan class dalam tag
textarea. Tag id dan class akan dibutuhkan untuk pemograman HTML
Cara Penggunaan Tag Textarea dalam form HTML
Untuk merangkum seluruh contoh atribut dari tag textarea yang telah kita
pelajari disini, saya akan membuat contoh cara penggunaannya di dalam
form HTML:
1 <!DOCTYPE html>
2 <html>
4 <head>
5 <title>Belajar Tag Textarea HTML</title>
6 </head>
8 <body>
9 <form action="proses.php" method="get">
10
11 <h4>Tag textarea dengan atribut: name</h4>
12 <textarea name="komentar1">
13 Silahkan isi komentar anda
14 </textarea>
15 <br />
16
17 <h4>Tag textarea dengan atribut: name + cols="40"</h4>
18 <textarea name="komentar2" cols="40">
20 </textarea>
21 <br />
22
23 <h4>Tag textarea dengan atribut: name + cols="40" + rows="5"</h4>
24 <textarea name="komentar3" cols="40" rows="5">
26 </textarea>
27 <br />
28
29 <h4>Tag textarea dengan atribut: name + readonly</h4>
30 <textarea name="komentar4" readonly="readonly">
32 </textarea>
33 <br />
34
35 <h4>Tag textarea dengan atribut: name + disabled</h4>
36 <textarea name="komentar5" disabled="disabled">
38 </textarea>
39
40 </form>
41
42 </body>
43 </html>
Textarea kadang
dibutuhkan untuk inputan form yang membutuhkan kalimat yang panjang
seperti komentar.
Tutorial HTML tentang Fungsi dan Cara Penggunaan Tag Textarea ini
menutup tutorial singkat tentang pembuatan form HTML. Jika anda telah
mempelajari dari part 1 sampai 11, maka anda setidaknya telah
menguasai sebagian besar tag dan atribut-atribut tentang form HTML.

Tutorial Membuat Form HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial Membuat Form HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Tutorial HTML Lanjutan: Tag dan Atribut untuk Pembuatan Form HTML

27 Feb 14 | Andre | Tutorial HTML | 2 Comments

27 Feb 14 | Andre | Tutorial HTML | 15 Comments

Fungsi tag label Dalam Pembuatan Form HTML

Tag label dalam HTML berfungsi sebagai pelengkap keterangan untuk

Secara tampilan, tag label tidak akan berpengaruh apa-apa di

4 <title>Belajar Tag Label HTML</title>

8 <h4>Jadwal kegiatan saya sekarang: </h4>

10 <form action="daftar.php" method="post">

12 <input type="checkbox" name="belajarhtml" id="belajarhtml"

13 value="belajarhtml"/> Saya sedang belajar HTML

16 <input type="checkbox" name="belajarcss" id="belajarcss"

17 value="belajarcss"/> Saya sedang belajar CSS

20 <input type="checkbox" name="duniailkom" id="duniailkom"

21 value="duniailkom"/> Saya sedang belajar pemograman di Duniailkom

Namun kotak checkbox tersebut cukup kecil, dan akan sedikit

Untuk keperluan inilah tag label digunakan.

2 <input type="checkbox" name="belajarhtml" id="belajarhtml"

3 value="belajarhtml"/>Saya sedang belajar HTML

Dengan memasukkan seluruh tag input checkbox dan keterangannya

Silahkan anda langsung mengubah kode kita sebelumnya, dan tambahkan

Cara kedua untuk menggunakan tag label adalah

1 <input type="checkbox" name="belajarcss" id="belajarcss" value="belajarcss"/>

2 <label for="belajarcss">Saya sedang belajar CSS</label>

Perhatikan bahwa tag label diletakkan setelah tag input checkbox. Di

Cara ketiga untuk penggunaan tag label adalah dengan menggabungkan

2 <input type="checkbox" name="duniailkom" id="duniailkom" value="duniailkom

3 Saya sedang belajar pemograman di Duniailkom

Di dalam contoh tersebut saya menggabungkan penggunaan atribut

4 <title>Belajar Tag Label HTML</title>

8 <h4>Jadwal kegiatan saya sekarang: </h4>

10 <form action="daftar.php" method="post">

13 <input type="checkbox" name="belajarhtml" id="belajarhtml"

14 value="belajarhtml"/> Saya sedang belajar HTML

18 <input type="checkbox" name="belajarcss" id="belajarcss"

20 <label for="belajarcss"> Saya sedang belajar CSS</label>

23 <label for="duniailkom" >

24 <input type="checkbox" name="duniailkom" id="duniailkom"

25 value="duniailkom"/> Saya sedang belajar pemograman di Duniailkom

Di dalam beberapa referensi, anda disarankan menggunakan cara

Berikutnya dalam tutorial form HTML, saya akan membahas

27 Feb 14 | Andre | Tutorial HTML | 8 Comments

Setelah mempelajari tag Label pada tutorial pertama, dalam tutorial

Tag Fieldset berfungsi untuk mengelompokkan beberapa objek form

Berikut adalah tampilan form HTML yang dikelompokkan

Cara Penggunaan Tag Fieldset dan Tag Legend

Untuk dapat membuat tampilan seperti gambar diatas, kita tinggal

1 <form action="daftar.php" method="post">

3 <legend>Judul pada kelompok objek</legend>

4 ...kelompok objek form...

Berikut adalah contoh kode HTML untuk penggunaan tag

5 <title>Belajar Tag Fieldset dan Tag Legend HTML</title>

10 <form action="daftar.php" method="post">

13 <legend>Agenda Hari ini</legend>

15 <input type="checkbox" name="belajarhtml" id="belajarhtml"

23 <input type="checkbox" name="php" id="belajarphp"

27 <input type="checkbox" name="duniailkom" id="duniailkom"

28 value="duniailkom"/>Belajar pemograman di Duniailkom

Cara merubah rata text tag legend: atribut align

<legend align="right">Agenda Hari ini</legend>

27 Feb 14 | Andre | Tutorial HTML | 14 Comments

Fungsi Tag Button dalam pembuatan Form HTML

Cara Penggunaan Tag Button HTML

Untuk menggunakan tag button, kita cukup menuliskannya dengan