Bagian 14. Membuat Form Pada Halaman HTML

Baca Juga

Form digunakan untuk input data/entri data. Di dalam html terdapat beberapa control form yg dapat digunakan, seperti control text box, list box, password box, text area box, radio button, check box, reset button, submit button, hidden field, file select.

Untuk membuat form dalam html kita cukup menambahkan tag <form>...</form> diantara tag <body>...</body>, untuk lebih jelasnya lihat kode di bawah ini:




<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Image</title>
</head>
<body>
<form>
Control form yg digunakan
</form>
</body>
</body>
</html>

Priview

Control form yg digunakan

Control Text Box

Untuk membuat control text box dalam html kita cukup menambahkan tag <input/> yg disimpan di antara tag <form>...</form>.

Contoh:




<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Image</title>
</head>
<body>
<form>
<label for="nama">Nama:</label>
<input type="text" size="20" name="nama" id="nama"/><br/>
<label for="alamat">Alamat:</label>
<input type="text" size="40" name="alamat" id="alamat"/>
</form>
</body>
</html>

Priview

Nama:
Alamat:

Kita bisa lihat tampilan form tidak rapih, supaya tampilan terlihat rapih maka kita harus menyimpan control form dalam tabel.

Contoh:




<!DOCTYPE html>
<html>
<head>
<title>Input Text Image</title>
</head>
<body>
<form>
<table>
<tr>
<td><label for="nama">Nama</label></td>
<td>:<input type="text" size="20" name="nama"/></td>
</tr>
<tr>
<td><label for="alamat">Alamat</label></td>
<td>: <input type="text" size="40" name="alamat"/></td>
</tr>
</table>
</form>
</body>
</html>

Priview