Membuat Form

Form dalam desain web merupakan hal vital yang mutlak yang harus ada untuk membuat keinteraktifan dengan pengunjung web. Kita dapat membuat aplikasi buku tamu, online shopping, forum, dan sebagainya dengan menggunakan form. Untuk keperluan interaksi dengan pengunjung, form tidak dapat berdiri sendiri. Form harus diintegrasikan dengan pemrograman web, misalnya javascript, PHP, ASP, Perl, dll. Hal ini harus dilakukan karena input yang dimasukkan pengunjung situs ke dalam form harus diolah terlebih dahulu oleh program, yang selanjutnya akan ditampilkan sebagai output dalam browser.


Text Box

Komponen text box dibuat dengan menuliskan tag <input type=”text” name=”komponen”>. Dengan atribut name diisi dengan nama komponen sesuai dengan data isian. Nama komponen mutlak dituliskan karena akan digunakan pada script pengolah data

Script Code

<form method=”post” action=”form.html”>
First Name :
<br/>
<input type=”text” name=”firstname” value=”Mickey”>
<br/>
Last Name :
<br/>
<input type=”text” name=”lastname” value=”Mouse”>
<br/>
<br/>
<input type=”submit” name=”Submit”>
</form>

Hasil Jadi

First Name :

Last Name :

Kesimpulan

Untuk membuat text box dapat dilakukan dengan tag <input type=”text” name=”komponen”>.


Radio Button

Radio button digunakan untuk input data yang sifatnya opsional. Dalam hal ini penggua diminta memilih option yang ada pada radio button. Item pada radio button hanya bisa dipilih salah satu saja. Pembuatan radio button dapat dilakukan dengan menuliskan <input type=”radio” name=”namakomponen” value=”nilai”>.

Script Code

<form method=”post” action=””>
<input type=”radio” name=”job” value=”Dokter” /> Dokter <br />
<input type=”radio” name=”job” value=”Petani” /> Petani <br />
<input type=”radio” name=”job” value=”Wiraswasta” /> Wiraswasta <br />
<br />
<input type=”submit” name=”submit” value=”Kirim Data”>
</form>

Hasil Jadi

 Dokter
 Petani
 Wiraswasta

Kesimpulan

Untuk membuat radio button diperlukan tag <input type=”radio” name=”namakomponen” value=”nilai”>.


Text Area

Komponen text area mirip dengan text box dengan perbedaannya dalam menampung data text yang lebih dari satu baris. Untuk membuat text area digunakan perintah <textarea name=”namakomponen”></textarea>. Kita dapat mengatur text area dengan panjang baris dan kolom tertentu dengan menambah atribut rows=”n” dan cols=”n”.

Script Code

<h5> Alamat Anda </h5>
<form method=”post” action=””>
<textarea name=”alamat” rows=”5″ cols=”40″></textarea>
<br />
<br />
<input type=”submit” name=”submit” value=”Kirim Data”>
</form>

Hasil Jadi

Alamat Anda

Kesimpulan

Untuk membuat text area diperlukan tag <textarea name=”namakomponen”></textarea>.


Combo Box

Combo box digunakan untuk inputan yang berupa pilihan. Tampilan combo box mirip seperti text box namun terdapat drop down button untuk menampilkan item pilihan. Untuk membuat combo box dapat menggunakan tag <select name=”namakomponen”> dengan item pilihan diapit dengan <option value=”nilaiItem”></option>.

Script Code

<h5> Pekerjaan Anda </h5>
<form method=”post” action=””>
<select>
<option value=”Dokter”> Dokter </option>
<option value=”Petani”> Petani </option>
<option value=”Wiraswasta”> Wiraswasta </option>
<option value=”Karyawan”> Karyawan </option>
</select>
<input type=”submit” name=”submit” value=”Kirim Data”>
</form>

Hasil Jadi

Pekerjaan Anda
 Dokter
Petani
Wiraswasta
Karyawan

Kesimpulan

Untuk membuat combo box dapat menggunakan tag <select name=”namakomponen”>ndengan item pilihan diapit dengan<option value=”nilaiItem”></option>.


List Box

List box memiliki tampilan yang hampir sama dengan combo box, hanya saja tidak terdapat drop down button. Semua item pada list box ditampilkan dalam box sekaligus. Perintahnya sama dengan combo box dengan perbedaan pada atribut size=”n” pada tag <select name=”namakomponen” size=”n”></select> dengan n merupakan jumlah item yang ditampilkan.

Script Code

<h5> Pekerjaan Anda </h5>
<form method=”post” action=””>
<select name=”post” size=”4″>
<option value=”Dokter”> Dokter </option>
<option value=”Petani”> Petani </option>
<option value=”Wiraswasta”> Wiraswasta </option>
<option value=”Karyawan”> Karyawan </option>
</select>
<input type=”submit” name=”submit” value=”Kirim Data”>
</form>

Hasil Jadi

Pekerjaan Anda
 Dokter 
 Petani 
 Wiraswasta 
 Karyawan 
 

Kesimpulan

Untuk membuat List box diperlukan atribut size=”n” pada tag <select name=”namakomponen” size=”n”></select> dengan n merupakan jumlah item yang ditampilkan.


Check Box

Check box digunakan untuk input yang berupa pilihan. Penampilannya hampir sama dengan radio button dengan perbedaan yaitu check box memungkinkan user memilih item lebih dari satu. Tag pembuatan check box yaitu <input type=”checkbox” name=”namakomponen” value=”nilai” />.

Script Code

<h5> Hobi Anda </h5>
<form method=”post” action=””>
<input type=”checkbox” name=”hobi” value=”memancing” /> Memancing
<br />
<input type=”checkbox” name=”hobi” value=”main game” /> Main Game
<br />
<input type=”checkbox” name=”hobi” value=”nonton film” /> Nonton Film
<br />
<input type=”checkbox” name=”hobi” value=”travelling” /> Travelling
<br />
<br />
<input type=”submit” name=”submit” value=”Kirim Data”>
</form>

Hasil Jadi

Hobi Anda
 Memancing
 Main Game
 Nonton Film
 Travelling 

Kesimpulan

Untuk membuat check box diperlukan tag <input type=”checkbox” name=”namakomponen” value=”nilai” />.


ile Field

File Field sering digunakan untuk keperluan upload file ke server. Tampilannya seperti text box dengan tombol untuk mencari file yang akan di upload. Untuk membuat file field diperlukan tag <input type=”file” name=”namakomponen” /> dan menambahkan atribut enctype pada tag <form method=”post” action=”” enctype=”multipart/form-data”>.

Script Code

<h5> Upload File </h5>
<form method=”post” action=”” enctype=”multipart/form-data”>
<input type=”file” name=”fileku” />
<input type=”submit” name=”submit” value=”Kirim Data” />
</form>

Hasil Jadi

Upload File
 

Kesimpulan

Untuk membuat file field diperlukan tag <input type=”file” name=”namakomponen” /> dan menambahkan atribut enctype pada tag <form method=”post” action=”” enctype=”multipart/form-data”>.

Leave a Reply

Your email address will not be published. Required fields are marked *