Membuat Form pada HTML
Holaaa, kali ini kita akan
membuat form berbasis html. Seperti biasa, berikut ini adalah gambar tugas yang diinstruksikan
Sebelumnya seperti biasa, kita pelajari dulu yah
pengertian dan berbagai tag yang akan kita gunakan dalam membuat form tersebut.
Jadi, form itu biasanya kita
gunakan saat akan mencoba untuk mengumpulkan data dari pengunjung suatu web. Mulai
dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk
mengirimkan data antar halaman web. Nah, pada contoh pembuatan form kali
ini, kita akan membuat form untuk mengisi biodata diri, seperti nama, TTL, juga
riwayat pendidikan sampai data orang tua.
Dan kemudian, beberapa tag
dasar yang akan kita gunakan untuk membuat form di HTML ada tag
form, input, textarea, select dan option.
1.
Pengertian tag <form>
Sebuah form dalam
HTML harus berada di dalam tag form, yang diawali dengan <form> dan
diakhiri dengan </form>. Nah, pada tag yang satu ini kita
membutuhkan beberapa atribut antara lain action, yang berfungsi untuk
menjelaskan kemana data form akan dikirimkan. Biasanya nilai dari atribut action ini
adalah alamat dari sebuah halaman PHP yang digunakan untuk
memproses isi data form.
Atribut
kedua adalah method, yang berfungsi untuk menjelaskan bagaimana
data isian form akan dikirim oleh web browser
2.
Mengenal tag <input>
Tag
input merupakan tag paling banyak digunakan di
dalam form dan memiliki banyak bentuk, mulai dari isian text
biasa, text password, checkbox, radio, sampai
dengan tombol submit, semuanya dalam bentuk tag <input>.
3.
Mengenal tag <textarea>
Tag
textarea pada dasarnya sama dengan input type text, namun lebih besar
dan dapat berisi banyak baris. Panjang dan banyak baris untuk text area di atur
melalui atribut rows dan cols, atau melalui CSS.
4. Mengenal tag <select>
Tag select digunakan untuk inputan yang telah
tersedia nilainya, dan user hanya dapat memilih dari nilai yang ada. Tag
select digunakan bersama-sama dengan tag option untuk membuat
box pilihan.<!DOCTYPE html>
<html>
<head>
<title>FORM</title>
<style>
img {
padding-right: 780px
}
</style>
</head>
<body>
<h1>Formulir Registrasi</h1>
<img src="bgbiru.jpg" align="right" height="200" width="150">
<form method="post" action="#">
<ol type="A">
<b><li>Data Diri</li></b>
<table>
<form method="post" action="#">
<ol>
<tr>
<td>1. Nama</td>
<td></td>
<td></td>
<td></td>
<td>:</td>
<td><input type="text" name"textname" maxlength="15">
</td>
</tr>
<tr>
<td>2. Tempat Lahir</td>
<td></td>
<td></td>
<td></td>
<td>:</td>
<td><input type="text" name"textname" maxlength="15">
</td>
</tr>
<tr>
<td>3. Tanggal Lahir</td>
<td></td>
<td></td>
<td></td>
<td>:</td>
<td><select name="tanggal">
<option value="">-Date-</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 name="bulan">
<option>-Month-</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 name="tahun">
<option value="">-Year-</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>
</select></td>
</tr>
<tr>
<td>4. Jenis Kelamin</td>
<td></td>
<td></td>
<td></td>
<td>:</td>
<td><input type="radio" name="JK" value="L">Laki-laki
<input type="radio" name="JK" value="P">Perempuan
</td>
</tr>
<tr>
<td>5. Agama</td>
<td></td>
<td></td>
<td></td>
<td>:</td>
<td>
<select name="Agama">
<option>-Pilih-</option>
<option>Islam</option>
<option>Kristen</option>
<option>Protestan</option>
<option>Buddha</option>
<option>Hindu</option>
</select>
</td>
</tr>
<tr>
<td>6. Golongan Darah</td>
<td></td>
<td></td>
<td></td>
<td>:</td>
<td>
<select name="goldar">
<option>-Goldar-</option>
<option>O</option>
<option>A</option>
<option>B</option>
<option>AB</option>
</select>
</td>
</tr>
</ol>
</form>
</table>
<b><li>Pendidikan</li></b>
<table>
<ol>
<tr>
<td>1. Asal Sekolah</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>:</td>
<td><input type="text" name"textname" maxlength="15">
</td>
</tr>
<tr>
<td>2. Tahun Masuk</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>:</td>
<td><input type="text" name"textname" maxlength="4" size="5">
</td>
</tr>
<tr>
<td>3. Tahun Lulus</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>:</td>
<td><input type="text" name"textname" maxlength="4" size="5">
</td>
</tr>
</ol>
</table>
<b><li>Data Orang Tua</li></b>
<table>
<ol>
<tr>
<td>1. Nama Ayah</td>
<td>:</td>
<td><input type="text" name"textname" maxlength="15">
</td>
</tr>
<tr>
<td>2. Nama Ibu</td>
<td>:</td>
<td><input type="text" name"textname" maxlength="15">
</td>
</tr>
<tr>
<td>3. Alamat Orang Tua</td>
<td>:</td>
<td><textarea name="alamat" cols="16"></textarea>
</td>
</tr>
<tr>
<td><input type="button" value="Save Data"></td>
</tr>
</ol>
</ol>
</ol>
</form>
</body>
</html>
Nah, itu dia script pembuatan form dengan catatan ada penambahan CSS untuk memposisikan gambar di bagian kanan tulisan seperti yang diblok berwarna biru pada script. Dan hasilnya adalah sebagai berikut:
Tidak ada komentar:
Posting Komentar