Pengertian,
element dan cara membuat formulir registrasi dengan form
Pengertian Form
Form merupakan salah satu elemen dalam HTML yang
digunakan untuk menerima input dari pengunjung. Melalui form pengunjung sebuah
halaman web dapat melakukan interaksi dengan web. Pengunjung dapat memasukan
data melalui elemen-elemen input seperti textfield, checkbox, radio button,
textarea, submit button, dropdown dan lain-lain. Selain itu pengunjung
juga dapat melakukan pemilihan data mengunakan elemen select list atau dengan
istilah lain combo box atau drop-down list. Form membuat sebuah halaman web
menjadi web interaktif dan dinamis,
karena form merupakan satu-satunya sarana bagi pengembang website untuk
mendapatkan informasi dari pengguna.
Berikut perintah dasar Form :
<form>
Input elements
</form>
Ada dua atribut yang digunakan pada elemen form yaitu method dan action.
Method yang berfungsi sebagai pengiriman data pada server dengan cara ke
tujuan yaitu :
- Get: mengirim data pada server dengan cara meletakan data pada bagian
akhir URL yang ditunjuk.
- Post : mengirim datanya secara terpisah.
Perbedaannya, jika kita mengisi atribut method dengan get (dimana ini
adalah nilai default seandainya kita tidak menuliskannya) maka isian form akan
terlihat pada url browser. Method get ini biasanya digunakan untuk query
pencarian. Method post biasanya digunakan untuk data yang lebih sensitif
seperti yang berisi password, atau registrasi user. Data hasil form tidak akan
terlihat pada browser.
Action yang berfungsi menentukan lokasi dari script yang akan memproses
data dari form.
Struktur dasar form akan terlihat sebagai berikut:
<form action="logindata.php" method="post">
...isi form...
</form>
Elemen yang
paling penting dalam form adalah elemen input. Elemen ini memungkinkan
pengunjung memasukan data melalui halaman form yang datanya kemudian akan
dikirimkan keserver. Ada banyak elemen-elemen input pada form, yang dapat
digunakan oleh pengguna untuk mengisikan data dengan yang berbeda-beda
jenisnya. Berikut ini saya akan membahas tiap-tiap elemen input form,
beserta dengan cara pembuatannya.
1. Text Field
Elemen yang
digunakan untuk memasukan text dalam satu baris. Lebar karakter defaultnya
adalah 20 karakter.
Penulisan :<
input type=”text” />
Berikut contohnya
:
<form>
First name :
<input type=”text” name=”first name” /><br/>
Last name :<
input type=”text” name=”last name” />
</form>
2. Password Field
Untuk memasukan
datu baris teks dengan format chiphertext/password. Dengan karakter yang
disamarkan dengan bulatan atau tanda “*”.
Penulisan :<
input type=”password” />
Berikut contohnya
:
<form>
Password :
<input type=”password” name=”password”/>
</form>
3. Radio Button
Radio button
digunakan agar dapat memilih salah satu pilihan. Contoh jenis kelamin (male or
female).
Penulisannya :
Radio Button<input type="radio">
Berikut contohnya
:
<form>
Jenis kelamin
<input type =”radio” name=”sex value=”male”/> Male<br/>
<input type
=”radio” name=”sex value=”female”/> Female
</form>
4. Text Area
Digunakan sebagai
input kontrol form untuk memasukan teks lebih dari satu baris. Elemen ini
mempunyai atribut yaitu name, cols, dan rows.
Seperti
dijelaskan berikut :
Nama
= nama dari veriabel yang dikirim ke suatu aplikasi
Rows
= panjang baris dalam karakter
Cols
= tinggi kotak
Penulisannya :
<text area>
Name=”name”
Cols=”number”
Row=”number”
...........
</text
area>
Berikut
contohnya:
Alamat :
<textarea name="Alamat" cols="25"
rows="4"></textarea>
5. Check Box
Check Box
digunakan untuk dapat memilih lebih dari satu pilihan.
Penulisannya:
Check Box<input type="checkbox">
Berikut contohnya
:
Hobi :
<form>
<input
type=checkbox name=hobi value=Membaca>Baca Buku
<input
type=checkbox name=hobi value=Kesenian>kesenian
<input
type=checkbox name=hobi value=olahraga>Olahraga
<input
type=checkbox name=hobi value=Traveling>Jalan Jalan
</form>
6. Select List
Digunakan untuk
menampilkan daftar pilihan dalam bentuk drop-down list.
Penulisannya :
<select>
......
</select>
Berikut
contohnya:
Pekerjaan :
<select
name=Pekerjaan>
<option
value=Pelajar>Pelajar/Mahasiswa
<option
value=PNS>Pegawai Negeri Sipil
<option
value=Karyawan>Karyawan
<option
value=Wiraswasta>Wiraswasta
</select>
7. Submit Button
Digunakan untuk
mengirimkan data dari halaman web ke server. Setiap elemen form membutuhkan
tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di
tentukan dalam atribut ACTION dlam elemen FORM.
Penulisannya :
Submit<input type="submit">
Berikut contohnya
:
<form
name=”input” action=”proses input.php” method=”get’>
....................
..................
<input
type=submit value=kirim data/>
</form>
8. Reset Button
Digunakan untuk
membatalkan semua proses ata mereset proses pengisian data yang dilakukan di
elemen input form.
Penulisannya :
Reset<input type="reset">
Script Formulir
<html>
<table>
<tr>
<td
colspan="3">FORMULIR</td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td>
<input
type="text"/>
</td>
</tr>
<td
valign="top"colspan="0">Alamat</td>
<td
valign="top">:</td>
<td>
<textarea></textarea>
</td>
<tr>
<td>Kota</td>
<td>:</td>
<td>
<input
type="text"/>
</td>
</tr>
<tr>
<td>Golongan Darah</td>
<td>:</td>
<td>
<input
type="radio" name="mey" value="A"/>A
<input
type="radio" name="mey" value="B"/>B
<input
type="radio" name="mey" value="AB"/>AB
<input
type="radio" name="mey" value="O"/>O
</td>
</tr>
<tr>
<td>Agama</td>
<td>:</td>
<td>
<select>
<option>-pilih-</option>
<option>Islam</option>
<option>Kristen</option>
<option>Hindhu</option>
<option>Budha</option>
</select>
</td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>
<input
type="checkbox" name="DJ" value="Golf"/>Golf
<input
type="checkbox" name="DJ" value="Bola"/>Bola
<input
type="checkbox" name="DJ"
value="Renang"/>Renang
</td>
</tr>
<tr>
<td
colspan="2"></td>
<td>
<input
type="Submit"
value="Kirim"/>
<input
type="Reset" value="Clear"/>
</td>
</tr>
</table>
</html>
Hasil nya
Script Formulir Registrasi
<html>
<title>form</title>
<style>img{padding-right:280px}</style>
<table border="0">
<head>
<body>
<h2><b>Formulir
Registrasi</b></h2>
<img
<tr>
<td><b>A.</b></td>
<td
colspan="3"><b>Data Diri</b></td>
</tr>
<tr>
<td
rowspan="6"></td>
<td colspan="0">1.
Nama</td>
<td>:</td>
<td><input
type="text"/></td>
</tr>
<tr>
<td colspan="0">2.
Tempat Lahir</td>
<td>:</td>
<td><input
type="text"/></td>
</tr>
<tr>
<td colspan="0">3.
Tanggal lahir</td>
<td>:</td>
<td><select><option>Tanggal</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select>
<option>Bulan</option>
<option>januari</option>
<option>februari</option>
<option>maret</option>
<option>april</option>
<option>mei</option>
<option>juni</option>
<option>juli</option>
<option>agustus</option>
<option>september</option>
<option>oktober</option>
<option>november</option>
<option>desember</option>
</select>
<select>
<option>Tahun</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
</select>
</td>
</tr>
<tr>
<td colspan="0">4.
Jenis Kelamin</td>
<td>:</td>
<td><input
type="radio" name="mey"
value="L"/>laki-laki
<input
type="radio" name="mey"
value="perempuan"/>perempuan
</td>
</tr>
<tr>
<td colspan="0">5.
Agama</td>
<td>:</td>
<td><select>
<option>-Pilih-</option>
<option>Islam</option>
<option>kristen</option>
<option>Hindhu
</option>
<option>Budha</option>
</select>
</td>
</tr>
<tr>
<td colspan="0">6.
Golangan Darah</td>
<td>:</td>
<td><select>
<option>-Pilih-</option>
<option>A</option>
<option>B</option>
<option>AB
</option>
<option>O</option>
</select>
</td>
</tr>
<tr>
<td><b>B.</b></td>
<td
colspan="3"><b>Pendidikan</b></td>
</tr>
<tr>
<td
rowspan="3"></td>
<td colspan="0">1.
Asal Sekolah</td>
<td>:</td>
<td><input
type="text"/></td>
</tr>
<tr>
<td colspan="0">2. Tahun
Masuk</td>
<td>:</td>
<td><input
type="text" maxlength="4"
size="4"/></td>
</tr>
<tr>
<td colspan="0">3.
Tahun Lulus</td>
<td>:</td>
<td><input
type="text" "text" maxlength="4"
size="4"/></td>
</tr>
<tr>
<td><b>C.</b></td>
<td
colspan="3"><b>Data Orang Tua</b></td>
</tr>
<tr>
<td
rowspan="3"></td>
<td colspan="0">1.
Nama Ayah</td>
<td>:</td>
<td><input
type="text"/></td>
</tr>
<tr>
<td colspan="0">2.
Nama Ibu</td>
<td>:</td>
<td><input
type="text"/></td>
</tr>
<tr>
<b><td
colspan="0" valign="top">3. Alamat Orang
Tua</td></b>
<td
valign="top">:</td>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td
colspan="1"></td>
<td>
<input
type="Submit"
value="Simpan Data"/>
</td>
</tr>
</body>
</head>
</table>
</html>
Catatan :
1. Yang harus kalian
perhatikan untuk mengatur gambar agar tepat di samping kalian harus menambahkan
tag seperti ini
<title>form</title>
<style>img{padding-right:280px}</style>
2.
Untuk menbuat tulisan Formulir Registrasi lebih besar
kalian harus menggunakan <h2></h2> seperti contoh di samping ini <h2>Formulir
Registrasi</h2>
3.
Berikutnya adalah pada scrip saya terdapat tulisan
rowspan dan colspan
a.
Rowspan adalah mengabungkan sel dalam satu kolom
b.
Colspan adalah menggabungkan sel dalam satu baris yang
perlu teman-teman perhatikan jika pada tr terdapat 6 td maka untuk menggubah
kolomnya kalian harus menuliskan seperti ini <td rowspan="6"></td>
4. Pada scrip tahun
masuk dan tahun lulus saya menambahkan <input type="text" maxlength="4"
size="4"/> yang bertujuan agar kolom yang terisi hanya
dapat 4 saja
5. Dan hal yang
harus kalian perhatikan jika ingin menyispkan gambar kalian harus simpan foto
yg ingin kalian letakkan pada scrip , harus sama dengan folder html yg anda
letakkan.
Hasil Dari Form Registrasi
Berikut ini kalian bisa coba isi form dari
contoh-contoh di atas
|
FORMULIR
|
||
|
Nama
|
:
|
|
|
Alamat
|
:
|
|
|
Kota
|
:
|
|
|
Golongan
Darah
|
:
|
A B AB O
|
|
Agama
|
:
|
|
|
Hobi
|
:
|
Golf Bola Renang
|
|
|
||
Formulir Registrasi
| A. |
Data Diri
|
||
|
1. Nama
|
:
|
|
|
|
2. Tempat
Lahir
|
:
|
|
|
|
3. Tanggal
lahir
|
:
|
|
|
|
4. Jenis
Kelamin
|
:
|
laki-laki perempuan
|
|
|
5. Agama
|
:
|
|
|
|
6.
Golangan Darah
|
:
|
|
|
|
B.
|
Pendidikan
|
||
|
1. Asal
Sekolah
|
:
|
|
|
|
2. Tahun
Masuk
|
:
|
|
|
|
3. Tahun
Lulus
|
:
|
|
|
|
C.
|
Data Orang
Tua
|
||
|
1. Nama
Ayah
|
:
|
|
|
|
2. Nama
Ibu
|
:
|
|
|
|
3. Alamat
Orang Tua
|
:
|
|
|
|
|
|||
Tidak ada komentar:
Posting Komentar