sebuah HTML form dapat mengandung beberapa control field seperti:
- Text boxes
- Text Area
- Radio Button
- Check Boxes
- Combo Boxes
- dan sebagainya....
Sebuah HTML document dapat memiliki lebih dari 1 HTML form.
Untuk membuat form dalam suatu HTML document, kita dapat menggunakan tag <form> dimana memiliki format:
<form arguments>
Input elements ......
</form>
beberapa contoh arguments yang dapat diberikan ketika membuat suatu HTML form:
- action="url" : menspesifikasikan lokasi pengiriman data ketika tombol submit diclick.
- method="(get/post)" : menspesifikasikan metode pengiriman data yang dilakukan, terdapat 2 metode, yaitu get dan post. perbedaan get dengan post adalah jika kita menggunakan get, maka semua data yang kita telah isi sebelumnya akan dikirim langsung melalui url, sehingga dengan menggunakan get, kita dapat melakukan bookmark pada halaman tersebut. sedangkan pada metode post, data yang telah diisi akan dikirim secara sistem, sehingga data-data penting seperti password tidak akan terlihat pada url.
- target="target" : menspesifikasikan lokasi url action dibuka pada browser, _blank berarti url akan dibuka pada window baru, sedangkan _top berarti url akan dibuka pada window yang sama.
beberapa contoh pembuatan element input:
Text Field:
<input type="text" name="textfield"
value="initial value">
Text Area:
<textarea name="textarea"
cols="20" rows="2">Hello World</textarea>
Password Field:
<input
type="password"
name="textfield3">
Radio
buttons:
<input
type="radio" name="radiobutton"
value="myValue1">male<br>
<input type="radio" name="radiobutton"
value="myValue2" checked>female
cara untuk mengelompokan radio button adalah dengan memberikan nama yang sama.
Submit Button:
<input type="submit"
name="Submit" value="Submit">
Reset Button:
<input type="reset"
name="Submit2" value="Reset">
Berikut adalah contoh dari HTML form:
<html>
<head>
<title>Registration page</title>
</head>
<h2>REGISTRATION PAGE</h2>
<form action="#" method="post" target="_top">
<table>
<tr>
<td>Name</td>
<td>
<input type="text" name="Name" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="Password" />
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" name="Email" />
</td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="country">
<option value="Indonesia">Indonesia</option>
<option value="Singapura">Singapura</option>
<option value="Malaysia">Malaysia</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="Agree" />I agree
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="Register" value="Register" />
</td>
</tr>
</table>
</form>
<body>
</body>
</html>
hasil dari HTML document tersebut adalah:
