Membuat Form Isian dengan HTML

Baca Juga :

Form HTML adalah sebuah area yang mengandung elemen – elemen form. Elemen form adalah sebuah elemen yang memungkinkan user untuk memasukkan informasi seperti text, teksarea, menu drop-down, radio button, checkbox,dll.

Sebuah form didefinisikan dengan tag <form>.

<form>

…

</form>

Tag – tag Form

Tag	Keterangan
<form>	Mendefinisikan form untuk masukan user
<input>	Mendefinisikan masukan field
<textarea>	Mendefinisikan textarea
<label>	Mendefinisikan label control
<fieldset>	Mendefinisikan sebuah fieldset
<legend>	Mendefinisikan caption sebuah fieldset
<select>	Mendefinisikan list (drop-down box)
<optgroup>	Mendefinisikan option group
<option>	Mendefinisikan option pada drop-down box
<button>	Mendefinisikan button

Jenis masukan dalam form

Jenis masukan merupakan suatu obyek/komponen yang digunakan untuk memasukkan suatu nilai/data/informasi ke dalam web. Jenis masukan dalam form dibedakan menjadi :

Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server. Nilai yang dimasukkan dapat berupa angka ataupun teks.
Radio : menyediakan beberapa pilihan, hanya satu pilihan yang dapat dipilih.
Check box : menyediakan beberapa pilihan, pilihan bisa lebih dari satu yang dipilih.
Button : digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form.
- SUBMIT : button yang digunakan untuk mengirim data.
- RESET : button yang digunakan untuk menginisialisasi (mengosongkan) form.
List : menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu.
Text Area : digunakan untuk memasukkan data dalam bentuk teks berupa memo.

Tag – tag dan atribut elemen form

· Form

<form name="form1" method="post" action=""></form>

Keterangan :

Form : tag yang menandakan sebuah elemen form
Name : nama form
Methode : metode pengiriman data. Bisa berupa “post” atau “get”
Action : nama file dokumen yang memproses pengiriman data. Lebih lanjut akan dibahas di aplikasi web php mysql.

· Text Field

<input type="text" name="textfield">

Keterangan :

Input : tag yang menandakan sebuah masukan
Type : type sebuah masukan, yaitu ”text”
Name : nama text field

· Text Area

<textarea name="textarea" cols="100" rows="5"></textarea>

Keterangan :

Textarea : tag yang menandakan sebuah masukan textarea
Name : nama textarea
Cols : jumlah kolom textarea
Rows : jumlah baris textarea

· Check box

<input name="checkbox" type="checkbox" value="checkbox" checked>

Keterangan :

Name : nama checkbox
Type : type masukan
Valuae : nilai yang dikirimkan ke server
Checked : menunjukkan bahwa otomatis pilihan tersebut dipilih. Secara default atribut tersebut unchecked (tidak dipilih).

· Radio Button

<input name="radiobutton" type="radio" value="radiobutton">

Keterangan :

Name : nama radiobutton
Type : type masukan
Value : nilai yang akan dikirim ke server

· List Box

<select name="select">
<option value="TI">Teknologi Informasi</option>
</select>

Keterangan :

Select : tag yang menandakan sebuah list/menu
Name : nama list/menu
Option : tag yang menandakan sebuah pilihan list
Value : nilai pilihan yang akan dikirim ke server

· Button – Submit

<input type="submit" name="Submit" value="Submit">

· Button – Reset

<input type="reset" name="Reset" value="Reset">

Cara pembuatan form dengan dreamweaver

· Buka halaman web baru

· Klik menu Insert – Form

· Pilih model form

clip_image001

· Contoh memilih textarea, sehinnga muncul design view sebagai berikut :

clip_image002

Gambar Memilih textarea

· Atur propertiesnya, bisa melalui code design atau design propertiesnya :

clip_image004

Gambar Pengaturan property

Keterangan :

TextField : nama textarea
Char width : lebar kolom
Num Lines : jumlah baris
Wrap : model pengaturan teks dalam textarea
Type : pilih singgle line, multiline atau password
Init val : nilai default
Class : nama class jika menggunakan file CSS

Field Text

Berikut ini adalah contoh penggunakan field text dalam dokumen HTML.

Contoh – Listing : textfield.html

<html><title>text field</title>
<body>
<form>
Nama Depan :
<input name="NamaBelakang" type="text" id="NamaBelakang">
<br>
Nama Belakang :
<input name="NamaBelakang" type="text" id="NamaBelakang">
</form>
</body>
</html>

clip_image006

Gambar . Contoh field text

Field Text – Password

Berikut ini adalah contoh Field Text dengan masukan berupa password.

Contoh - Listing : password.html

<html><title>Password</title>
<body>
<form>
Username:
<input type="text" name="user"><br>
Password:
<input type="password" name="password">
</form>
<p>Keterangan : ketika memasukan data di field password, browser akan menampilkan tanda bintang sebagai pengganti karakter. </p>
</body>
</html>

Gambar . Contoh password

Checkbox

Berikut ini adalah contoh penggunaan checkbox dalam dokumen HTML.

Contoh - Listing : checkbox.html

<html><title>Check Box</title>
<body>
<p> Hobi :</p>
<form>
<p>Baca Majalah :
<input name="majalah" type="checkbox" id="majalah" value="majalah" checked>
<br>
Olah Raga :
<input name="olahraga" type="checkbox" id="olahraga" value="olahraga">
<br>
Memancing :
<input name="mancing" type="checkbox" id="mancing" value="memancing">
</p>
</form></body>
</html>

Gambar Contoh checkbox

Radio Button

Berikut ini adalah contoh penggunaan radion button dalam dokumen HTML.

Contoh - Listing: radiobutton.html

<html><title>Radio Button</title>
<body>
<p>Agama : </p>
<form>
<p>Islam :
<input type="radio" checked="checked"
name="agama" value="islam"> <br>
Kristen :
<input type="radio"
name="agama" value="kristen"><br>
Protestan :
<input name="agama" type="radio" value="protestan"><br>
Hindu :
<input name="agama" type="radio" value="Hindu"><br>
Budha :
<input name="agama" type="radio" value="Budha"></p>
</form></p>
</body>
</html>

clip_image010

Gambar Contoh radiobutton

List Box – Drop Down Menu

Berikut ini adalah contoh penggunaan list box – drop down menu.

Contoh - Listing : listbox.html

<html>
<head>
<title>List Box</title>
</head>
<body>
<p>Tahun Kelahiran</p>
<form name="form1" method="post" action="">
<select name="select">
<option value="1980" selected>1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
</select>
</form>
</body>
</html>

clip_image012

Gambar COntoh listbox dropdown

Textarea

Berikut ini adalah contoh penggunaan textarea dalam dokumen HTML.

Contoh - Listing : textarea.html

<html>
<head><title>textarea</title></head>
<body>
<p>Komentar :</p>
<form name="form1" method="post" action="">
<textarea name="textarea" cols="50" rows="5">isikan komentar anda disini</textarea>
</form>
</body></html>

Gambar Contoh textarea

Button – Submit dan Reset

Berikut ini adalah contoh penggunaan Submit Button dan Reset Button.

Contoh - Listing : button.html

<html>
<head>
<title>Button</title>
</head>
<body>
<form name="form1" method="post" action="">
<input type="submit" name="Submit" value="Send">
<input type="reset" name="Reset" value="Reset">
</form>
</body>
</html>

clip_image015

Gambar Contoh button

Contoh form biodata

Source Code - Listing : biodata.html

<html>
<head>
<title>Biodata</title>
</head>
<body>
<p align="center">Formulir Biodata </p>
<form name="form1" method="post" action="">
<table width="90%" border="0" align="center">
<tr>
<td width="25%">Nama</td>
<td width="2%">:</td>
<td width="73%"><input name="txtnama" type="text" id="txtnama" size="50"></td>
</tr>
<tr>
<td>Tempat Tanggal Lahir </td>
<td>:</td>
<td><input name="tempat" type="text" id="tempat" size="20">
/
<input name="textfield" type="text" size="5">
-
<select name="sBulan" id="sBulan">
<option value="januari" selected>Januari</option>
<option value="pebruari">Pebruari</option>
<option value="maret">Maret</option>
<option value="april">April</option>
<option value="mei">Mei</option>
<option value="juni">Juni</option>
<option value="juli">Juli</option>
<option value="agustus">Agustus</option>
<option value="september">September</option>
<option value="oktober">Oktober</option>
<option value="nopember">Nopember</option>
<option value="desember">Desember</option>
</select>
-
<select name="sTahun" id="sTahun">
<option value="1980" selected>1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
</select></td>
</tr>
<tr>
<td valign="top">Agama</td>
<td valign="top">:</td>
<td valign="top"><input name="agama" type="radio" value="islam" checked>
Islam<br>
<input name="agama" type="radio" value="kristen">
Kristen <br>
<input name="agama" type="radio" value="protestan">
Protestan<br>
<input name="agama" type="radio" value="hindu">
Hindu <br>
<input name="agama" type="radio" value="budha">
Budha <br> </td>
</tr>
<tr valign="top">
<td>Hobi</td>
<td>:</td>
<td><input name="cHobi" type="checkbox" id="cHobi" value="Olah Raga" checked>
Olah Raga <br>
<input name="cHobi" type="checkbox" id="cHobi" value="Baca Majalah">
Baca Majalah<br>
<input name="cHobi" type="checkbox" id="cHobi" value="Memancing">
Memancing<br></td>
</tr>
<tr>
<td>Komentar</td>
<td>:</td>
<td><textarea name="areaKomentar" cols="50" rows="3" id="areaKomentar"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Send">
<input type="reset" name="Reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>

clip_image017

Gambar Contoh pengisian biodata

Kamis, 26 April 2012

Unknown

ditulis dengan judul : Membuat Form Isian dengan HTML