BELAJAR
MEMBUAT FORM PADA HTML
Kali ini kita akan
belajar membuat form pada HTML,, sebelum membuat Form HTML harus mengetahui apa
kegunaan dari form HTML tersebut,,nah biasa'nya form digunakan untuk
mengumpulkan data dari pengunjung web kita,,Mulai dari form untuk login, form kontak, form untuk
pendaftaran user, bahkan untuk mengirimkan data antar halaman web.
Sebuah form dalam HTML harus berada di dalam tag form, yang
diawali dengan <form> dan diakhiri dengan </form>. Seperti yang
sudah dipelajari mengenai penulisan kode pada HTML diawali dengan <Nama Function Tag>
......( Isi sebuah tag )..... </Nama Function Tag>,,
nah pada bagian terakhir
kita harus menutup kode dengan menambahkan slash ( / ).
Berikut beberapa properti
masukan pada elemen form :
1. Text box<input type="text">
Dignakan untuk memasukan input yang berupa teks.
2. Password<input type="password">
Di gunakan untuk memasukan password
Tapi ada lagi jenis input lainnya yaitu :
1. Text box<input type="text">
Dignakan untuk memasukan input yang berupa teks.
2. Password<input type="password">
Di gunakan untuk memasukan password
Tapi ada lagi jenis input lainnya yaitu :
<input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkboxberupa hobi, yang oleh user dapat dipilih beberapa hobi.
<input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.
<input type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.
3. Hidden<input
type"hidden">
Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.
4. Check Box<input type="checkbox">
Check box digunakan untuk dapat memilih lebih dari satu pilihan.
5. Radio Button<input type="radio">
Radio button digunakan agar dapat memilih ahnya salah satu pilihan.
6. Push Button<input type="button">
Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.
7. Submit<input type="submit">
Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dlam atribut ACTION dlam elemen FORM.
8. Image Submit Button<input type="image" src="url">
Digunakan untuk menggantikan tombol standar submit dengan image.
9. Reset<input type="reset">
Digunakan untuk mereset semua masukan dalam form.
Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.
4. Check Box<input type="checkbox">
Check box digunakan untuk dapat memilih lebih dari satu pilihan.
5. Radio Button<input type="radio">
Radio button digunakan agar dapat memilih ahnya salah satu pilihan.
6. Push Button<input type="button">
Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.
7. Submit<input type="submit">
Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dlam atribut ACTION dlam elemen FORM.
8. Image Submit Button<input type="image" src="url">
Digunakan untuk menggantikan tombol standar submit dengan image.
9. Reset<input type="reset">
Digunakan untuk mereset semua masukan dalam form.
10. Text
Area<textarea>…</textarea>
Elemen untuk memasukan teks secara leluasa
seperti notepad.
11.
Select<select>…</select>
Daftar isi dalam property select menggunakan
tag <option>
Berikut
Contoh untuk penggunaan tag select adalah sebagai berikut:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga">Pilihan 3</option>
</select>
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga">Pilihan 3</option>
</select>
Nah langsung saja kita
belajar script form :
<html>
<head>
<title>Belajar Membuat Form </title>
</head>
<body>
<form action=" formulir.html" method="get">
Nama: <input type="text" name="nama" value="Nama Kamu" />
<br />
Password: <input type="password" name="password" />
<br />
Jenis Kelamin : <input type="radio" name="jenis_kelamin" value="laki-laki" checked/> Laki - Laki
<input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan
<br />
Hobi: <input type="checkbox" name="hobi_baca" /> Membaca Buku Javascript
<input type="checkbox" name="hobi_nulis" checked /> Menulis Code HTML, CSS, PHP
<input type="checkbox" name="hobi_mancing" /> Menggambar Design Banner Website
<br />
Asal Kota:
<select name="asal_kota" >
<option value="Kota Jakarta"> Jakarta</option>
<option>Bandung</option>
<option value="Kota Semarang" checked>Semarang</option>
</select>
<br />
Komentar Anda:
<textarea name="komentar" rows="5" cols="20">Silahkan berikan komentar anda</textarea>
<br />
<input type="submit" value="Proses" >
</form>
</body>
</html>
<head>
<title>Belajar Membuat Form </title>
</head>
<body>
<form action=" formulir.html" method="get">
Nama: <input type="text" name="nama" value="Nama Kamu" />
<br />
Password: <input type="password" name="password" />
<br />
Jenis Kelamin : <input type="radio" name="jenis_kelamin" value="laki-laki" checked/> Laki - Laki
<input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan
<br />
Hobi: <input type="checkbox" name="hobi_baca" /> Membaca Buku Javascript
<input type="checkbox" name="hobi_nulis" checked /> Menulis Code HTML, CSS, PHP
<input type="checkbox" name="hobi_mancing" /> Menggambar Design Banner Website
<br />
Asal Kota:
<select name="asal_kota" >
<option value="Kota Jakarta"> Jakarta</option>
<option>Bandung</option>
<option value="Kota Semarang" checked>Semarang</option>
</select>
<br />
Komentar Anda:
<textarea name="komentar" rows="5" cols="20">Silahkan berikan komentar anda</textarea>
<br />
<input type="submit" value="Proses" >
</form>
</body>
</html>
Dan ini dia hasil tampilan'nya ::
Dan berikut script Login Form :
<table width="405" height="169" border="0"
cellpadding="0" cellspacing="0">
<tr
bgcolor="#428ef6">
<td height="37"
colspan="2"><div
align="center"><strong>PLEASE
LOGIN</strong></div></td>
</tr>
<tr>
<td width="95"
height="32">Username</td>
<td
width="304"><label>:
<input
name="username" type="text" id="username" />
</label></td>
</tr>
<tr>
<td
height="26">Password</td>
<td><label>:
<input
name="password" type="password" id="password"
/>
</label></td>
</tr>
<tr>
<td
height="48"> </td>
<td><input
name="Login" type="submit" id="Login"
value="Login" />
<input
name="Batal" type="submit" id="Batal"
value="Batal" /></td>
</tr>
<tr
bgcolor="#428ef6">
<td height="26"
colspan="2"><div
align="right"><strong>roypurbo.blogspot.com</strong></div></td>
</tr>
</table>
Dan ini hasil'nya :








