Membuat Form Dalam Website

Posted by on
Pada kali ini,saya akan membahas tentang cara membuat form dalam website!Selamat Membaca !



Kita biasa melihat dalam suatu website terdapat halaman untuk registrasi atau pendaftaran secara online.Nah itulah yang dinamakan form dalam website.Form terdiri dari textbox, checkbox, datalist, radiobutton, tombol submit ,dan lain sebagainya.Berikut adalah penjelasan untuk pembuatannya :

INPUT

Input merupakan tag yang paling sering digunakan di dalam form dan memiliki banyak variasi bentuk,mulai dari kotak textbox,password,radio button ,sampai dengan tombolnya.Semua komponen form tersebut dibuat dalam bentuk tag <input>.

Bentuk-bentuk dari komponen tag input ini dibedakan berdasarkan atribut type yang kita pilih.Berikut adalah pilihannya :
  • <input type="text"/> akan menghasilkan textbox atau kotak teks yang menerima input berupa teks terbatas.Contoh nama,username dan sebagainya
  • <input type="password"/> akan menghasilkan kotak dengan teks password yang tampilannya sama dengan textbox biasa namun setiap teks yang ditulis tidak akan terlihat karena akan diganti dengan karakter bintang/bullets.
  • <input type="checkbox"/>  adalah input berupa checkbox yang dapat di check-list atau dicentang oleh pengguna.Para pengguna dapat memilih atau tidak memilih checkbox ini dengan cara diklik.Check box memiliki atribut checked yang jika ditulis atau diisi dengan checked,maka akan membuat checkbox itu dalam kondisi tercentang saat pertama kali halaman ditampilkan oleh browser.Contoh penggunaan checkbox misalnya pada hobi,agama dan sebagainya.
  • <input type="radio"/> digunakan untuk membuat radio button,ini berfungsi mirip dengan checkbox,namun umumnya pengguna hanya boleh memilih satu pilihan di antara pilihan-pilihan yang ada.Contoh penggunaan radio button adalah pemilihan gender.
  • <input type="submit"/> akan menampilkan tombol untuk memproses suatu form.Biasanya diletakkan di baris akhir suatu form.Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.

CONTOH PENGGUNAAN KOMPONEN TAG INPUT

<!DOCTYPE HTML>
<html>
<head>
<title>FORM SEDERHANA</title>
</head>

 <body>
<h2>Registration Form</h2>

<form method="post">
<table border="0">
<tr>

 <td width="70">Full Name</td><td width="10">:</td>
<td width="30"><input type"text" name ="Full Name"></td>
</tr>

 <tr>
<td width="70">Nick Name</td><td width="10">:</td>
<td width="30"><input type"text" name ="Nick Name"></td>
</tr>

 <tr>
<td width="70">Address</td><td width="10">:</td>
<td width="30"><input type"text" name ="Address" style=”textbox-align:left”></td>
</tr>

 <tr>
<td width="70">Gender</td><td width="10">:</td> 
<td width="30"><input type="radio" name="gender" value="Male" checked/>
Male
<input type="radio" name="gender" value="Female"/>
Female
</td>
</tr>

 <tr>
<td width="70">Religion<td width="10">:</td>
<td width="30"><select name="religion">
<option value="Katolik">Islam</option>
<option>Kristen</option>
<option>Katolik</option>
<option>Buddha</option>
<option>Hindu</option>
</td>
</select>
</tr>

 <tr>
<td width="70"><input type ="submit" value="Register"></td>
</tr>
</table>
</form>

 </body>
</html>

Hasilnya akan menjadi seperti gambar di bawah(Gambar bisa diklik) :



Untuk form ini kita belum dapat menyimpan data-datanya karena kita belum membuat databasenya.Sekian pembahasan mengenai form dalam HTML,jika ada script yang kurang dimengerti dapat ditanyakan di kolom komentar.Terima Kasih !

Comments

Post a Comment