Web tidak hanya digunakan unutk menampilkan informasi saja, tetapi juga
dapat untuk mngambil dan memperoleh data atau infor masi dari pengunjung. Dan
salah satu cara memperoleh data dari pengunjung ialah menggunakan form.
Form biasanya digunakan untuk mengumpulkan berupa data menggunakan formulir
pada halaman web. Ada banyak jenis form mulai dari form untuk login, form
kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar
halaman web.
Pada tutorial kali ini kita akan belajar membuat form input dengan HTML.
Cara membuat form input pada HTML
Sebuah form HTML harus
berada di dalam tag form <form>….</form>,Tag
ini memiliki beberapa atribut yang harus diberikan, seperti:
· Action berfungsi untuk menjelaskan kemana data form akan dikirimkan.
· Method yang berfungsi untuk menjelaskan bagaimana data
isian form akan dikirim oleh web browser.
Struktur dasar form
akan terlihat seperti berikut:
Langkah-langkah membuat form input pada HTML
Pada kali ini saya akan membuat tutorial form input pada halaman web
menggunakan HTML dengan hasil seprti gambar dibawah:
Adapun kode HTML yang digunakan pada kode editor nya
adalah seperti di bawah ini:
<!DOCTYPE
html>
<html>
<head>
<title>Formulir
Pendaftaran</title>
<link rel="stylesheet"
type="text/css" href="style.css">
</head>
<body
>
<center>
<fieldset
class="fieldset"><legend class="leg"><h4
class="legend">From Pendaftaran Extra
Kulikuler</h4></legend>
<table>
<form>
<!-- nim -->
<tr>
<td><label>NIM</label></td>
<td>:</td>
<td><input
type="text" name="NIM"/></td>
</tr>
<!-- nama -->
<tr>
<td><label>Nama</label></td>
<td>:</td>
<td><input
type="text" name="Nama"/></td>
</tr>
<!-- jeis kelamin
-->
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input
type="radio" name="opsi"
value="laki-laki">Laki-laki</td>
<tr>
<td></td>
<td></td>
<td><input
type="radio" name="opsi"
value="perempuan">Perempuan<br></td>
</tr>
<!-- alamat -->
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea
rows="2" cols="17" wrap="physical"
name="Alamat"></textarea><br></td>
</tr>
<!-- jurusan -->
<tr>
<td>
Jurusan<br>
<td>:</td>
<td><select
name="jurusan">
<option value="TINF">
Multemedia<br> </option>
<option
value="MI"> Jaringan <br> </option>
<option
value="TI">Sistem Cerdas <br> </option>
</td>
</select></td>
</tr>
<!-- email -->
<tr>
<td><label>Email</label></td>
<td>:</td>
<td><input
type="text" name="Email"/></td>
</tr>
<!-- Password -->
<tr>
<td><label>Password</label></td>
<td>:</td>
<td><input
type="Password" name="Password"/></td>
</tr>
<!-- chek box extra
yang dipilih -->
<tr>
<td>
Extra yang
di pilih <br>
<td>:</td>
<td><input
type="checkbox" name="Extra" value=" Club Match ">Club
Match</td>
<td><input
type="checkbox" name="Extra" value=" Volly ">Volly</td>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><input
type="checkbox" name="Extra" value=" Sepak Bola ">Sepak
Bola</td>
<td><input
type="checkbox" name="Extra" value=" Bulu Tangkis ">Bulu
Tangkis</td>
</tr>
<!-- tombol submit
& reset -->
<tr>
<td></td>
<td></td>
<td><input
type="submit" value="simpan" name="simpan">
<input
type="submit" value="reset"
name="reset"></td>
</tr>
</form>
</table>
</fieldset>
</center>
</body>
</html>
Dan
untuk kode CSS untuk merapikan halaman web ketikan kode ini pada halaman kode editor yang anda gunakan:
body
{
background-color:
orange;
}
.fieldset
{
width: 30%;
background-color: white;
font-family: cursive;
}
Maka hasil yang di
tampilkan seperti gambar berikut:
Penjelasan tentang kode kode yang digunakan
1. <link rel="stylesheet" type="text/css"
href="style.css"> berfungsi untuk memanggil file CSS yang
terpisah.
2. <input type="text" name="NIM"/> berfungsi untuk membuat kolom pengisisan NIM.
3. <input type="text" name="Nama"/> berfungsi untuk membuat kolom pengisian Nama.
4. <input type="radio" name="opsi" value="laki-laki">& <input type="radio" name="opsi" value="perempuan"> berfungsi unutk membuat pilihan jenis kelamin.
5. <textarea rows="2" cols="17" wrap="physical" name="Alamat"></textarea> untuk membuat pengisian alamat menggunakan text area
6. <select name="jurusan"> - <option value="TINF"> - <option value="MI"> - <option value="TI"> berfungsi membuat pilihan jurusan menggunakan drop down.
7. <input type="text" name="Email"/></td> berfungsi untuk membuat kolom pengisian alamat E-mail.
2. <input type="text" name="NIM"/> berfungsi untuk membuat kolom pengisisan NIM.
3. <input type="text" name="Nama"/> berfungsi untuk membuat kolom pengisian Nama.
4. <input type="radio" name="opsi" value="laki-laki">& <input type="radio" name="opsi" value="perempuan"> berfungsi unutk membuat pilihan jenis kelamin.
5. <textarea rows="2" cols="17" wrap="physical" name="Alamat"></textarea> untuk membuat pengisian alamat menggunakan text area
6. <select name="jurusan"> - <option value="TINF"> - <option value="MI"> - <option value="TI"> berfungsi membuat pilihan jurusan menggunakan drop down.
7. <input type="text" name="Email"/></td> berfungsi untuk membuat kolom pengisian alamat E-mail.
8. <input
type="Password" name="Password"/> berfungsi untuk
membuat kolom pengisian password.
9. <input
type="checkbox" name="Extra" value="Club
Match"> berfungsi untuk membuat checkbox untuk extra.
10. <input
type="submit" value="simpan" name="simpan"> berfungsi untuk
membuat tombol simpan.
11. <input
type="reset" value="reset" name="reset"> berfungsi untuk
membuat tombol reset
Demikianlah
artikel kali ini tentang Tutorial form input dengan HTML .Semoga
bermanfaat bagi Anda. Sekian dan terimakasih.
