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.
- SUBMIT : button yang digunakan untuk mengirim data.
- 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
· Contoh memilih textarea, sehinnga muncul design view sebagai berikut :
Gambar Memilih textarea
· Atur propertiesnya, bisa melalui code design atau design propertiesnya :
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>
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>
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>
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>
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>
Gambar Contoh pengisian biodata
