Tag Input dan Atributnya

Tag ini berguna untuk memberikan inputan berupa data pada dokumen HTML kita yang kemudian akan diproses oleh kode program pemroses. Tag ini digunakan bersamaan dengan tag FORM sehingga dapat diarahkan ke kode program yang akan pemroses data yang dikirimkan melalui tag INPUT.

TYPE

Atribut ini merupakan atribut terpenting dari tag INPUT dikarenakan atribut ini berguna untuk menentukan jenis dari inputan data yang akan digunakan pada dokumen HTML kita.

TYPE = TEXT

Jenis ini akan menghasilkan tampilan input data berupa kotak yang dapat menampung hanya sebaris tulisan.
Jenis ini biasanya digunakan untuk memasukkan nama atau kata kunci.

Contoh :
<input type="text" name="semogaberkah" /> HASILNYA

 TYPE = CHECKBOX

Jenis ini akan menghasilkan tampilan berupa pilihan yang dapat dipilih lebih dari satu, tampilannya berupa kotak yang dapat diberi tanda centang/contreng. Jenis ini biasa digunakan untuk memasukkan data pilihan yang pilihannya bisa lebih dari satu, seperti hobby, makanan, dan lain-lain.

Contoh :

1. <INPUT TYPE=CHECKBOX NAME="sepak bola"> sepak bola  
2. <INPUT TYPE=CHECKBOX NAME="tenis"> tenis  
3. <INPUT TYPE=CHECKBOX NAME="renang"> renang  
4. <INPUT TYPE=CHECKBOX NAME="basket"> basket 

Hasilnya ...

sepak bola
tenis
renang
basket

TYPE = RADIO

Jenis ini hampir mirip seperti TYPE = CHECKBOX yang digunakan untuk data berupa pilihan berganda, bedanya tipe ini hanya dapat dipilih jawaban salah satu saja. Jenis ini biasa digunakan untuk memasukkan data seperti jenis kelamin, status pernikahan, dan lain-lain.

Contoh :

1. <INPUT TYPE=RADIO NAME="jeniskelamin" VALUE="pria">pria  
2. <INPUT TYPE=RADIO NAME="jeniskelamin" VALUE="wanita">wanita 

Hasilnya ..

pria
wanita

TYPE = PASSWORD

Jenis ini hampir sama dengan jenis TYPE = TEXT berupa kolom kecil yang hanya dapat menampung sebaris tulisan, bedanya pada jenis ini semua tulisan yang diketikkan pada kolom tersebut tidak akan ditampilkan tetapi diganti menjadi tanda ● atau * sehingga kerahasiaannya akan terjamin. Jenis ini memang ditujukan untuk penulisan data berupa password sehingga kerahasiaannya harus sangat dijaga.

Contoh :
<INPUT TYPE=PASSWORD NAME="katasandi"> Hasilnya

TYPE = SUBMIT

Jenis ini menampilkan berupa tombol yang berfungsi untuk mengirim data dari masukkan yang sudah ditulis oleh pengguna. Tanpa penggunaan jenis ini maka semua data yang sudah diisi oleh pengguna tidak akan berarti apa-apa karena tidak dapat diproses oleh kode pemroses, sehingga penggunaan tipe ini akan sangat berarti sekali. Biasanya penggunaan tombol submit ini ditampilkan pada akhir formulir ketika pengguna telah selesai memasukkan data.

Contoh :

1. <FORM ACTION="tampil.php" METHOD=POST>  
2. Masukkan nama anda : <INPUT TYPE=TEXT NAME="nama"> <INPUT TYPE=SUBMIT>  
3. </FORM> 

Hasilnya ...

Masukkan nama anda :


TYPE = RESET

Berbeda dengan TYPE = SUBMIT yang berguna untuk mengirimkan data yang telah ditulis oleh pengguna, jenis ini justru digunakan untuk mengosongkan kembali data yang telah dituliskan pengguna.

Contoh :

1. <FORM ACTION="tampil.php" METHOD=POST>  
2. Masukkan nama anda : <INPUT TYPE=TEXT NAME="nama"> <INPUT TYPE=SUBMIT>   
3. <INPUT TYPE=RESET>  
4. </FORM>

Hasilnya ..

Masukkan nama anda :      

MULTIPLE

MULTIPLE adalah atribut yang digunakan untuk menampilkan lebih dari satu pilihan pada tampilan daftar pilihan. Biasanya penggunaan atribut MULTIPLE selalu diikuti dengan penggunaan atribut size, yang berguna untuk menentukan berapa banyak pilihan yang dapat ditampilkan secara sekaligus.

Sebagai contoh :

1. <SELECT NAME="semogaberkah2010.blogspot.com" MULTIPLE SIZE=4>  
2.     <OPTION VALUE="m">Matematika</OPTION>  
3.     <OPTION VALUE="i">Bahasa Indonesia</OPTION>  
4.     <OPTION VALUE="k">Kimia</OPTION>  
5.     <OPTION VALUE="f">Fisika</OPTION>  
6. </SELECT> 

Tag diatas akan menghasilkan tampilan sebagai berikut :

SIZE

SIZE adalah atribut dari tag SELECT yang digunakan untuk menampilkan jumlah pilihan pada daftar pilihan lebih dari satu. Tanpa penggunaan atribut ini, maka secara otomatis pilihan yang ditampilkan pada daftar pilihan hanya satu.

Sebagai contoh :

1. <SELECT NAME="semogaberkah2010.blogspot.com" SIZE=2>  
2.     <OPTION VALUE="m">Matematika</OPTION>  
3.     <OPTION VALUE="i">Bahasa Indonesia</OPTION>  
4.     <OPTION VALUE="k">Kimia</OPTION>  
5.     <OPTION VALUE="f">Fisika</OPTION>  
6. </SELECT> 

Tag diatas akan menghasilkan tampilan sebagai berikut :