Hallo
Sahabat Web
Pada
kesempatan kali ini saya akan membagikan tentang bagaimana membuat suatu
formulir pada HTML.
Sebelum
itu kita kenali dulu attribut-attribut untuk membuat Form :
Pengertian tag <form>
Sebuah form dalam
HTML harus berada di dalam tag form,
yang diawali dengan <form> dan
diakhiri dengan </form>.
Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan
seharusnya.
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>.
Bentuk-bentuk dari keluarga tag input ini dibedakan
berdasarkan atribut type:
<input type=”text” /> atau bisa
juga <input /> adalah textbox inputan biasa yang menerima input berupa
text, contohnya digunakan untuk inputan nama, username, dan inputan yang berupa text pendek. Input type text ini juga
bisa memiliki atribut value yang
bisa diisi nilai tampilan awal dari text
<input type=”password” /> dalam tampilannya
sama dengan type text, namun teks yang
diinput tidak akan terlihat, akan berupa bintang atau bulatan.
Biasanya hanya digunakan untuk inputan yang sensitif seperti password.
<input type=”checkbox” /> adalah inputan
berupa checkbox yang dapat diceklist atau di centang oleh
user. User dapat memilih atau tidak memilih checkbox ini. Type checkboxmemiliki
atribut checked yang jika ditulis
atau diisi dengan nilai checked,
akan membuat chexkbox langsung terpilih pada saat pertama kali halaman
ditampilkan. Contoh inputancheckbox berupa 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.
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.
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.
Mengenal Atribut: Name
Setiap tag inputan di dalam form harus ditambahkan atribut name agar
dapat diproses oleh web server nantinya. Di dalam halaman proses (yang biasanya
berupa bahasa PHP atau ASP), nilai dari atribut name inilah yang
akan menjadi variabel form. Contoh pemakaiannya adalah sebagai
berikut:
Pertama buka NotePad kemudian Tuliskan Script seperti di bawah ini :
<html>
<title>Form</title>
<style>img{padding-right:785px}</style>
<table
Border="0">
<head>
<body>
<h2><b>Formulir
Registrasi</b></h2>
<img src="Emotion.jpg"
height="180" width="160" align="right"/>
<form action=""
method="post">
<tr>
<td><b>A.Data
Diri</b></td>
</tr>
<tr>
<td
colspan="0">1.Nama</td>
<td>:</td>
<td><input
type="text" placeholder="Nama Lengkap" /></td>
</tr>
<tr>
<td colspan="0">2.Tempat
Lahir</td>
<td>:</td>
<td><input
type="text" placeholder="Masukkan Tempat Lahir"
/></td>
</tr>
<tr>
<td
colspan="0">3.Tanggal Lahir</td>
<td>:</td>
<td><select
name="tanggal"
<select name="Tanggal">
<option>-Tanggal-</option>
<option
value="1">1</option>
<option value="2">2</option>
<option
value="3">3</option>
<option
value="4">4</option>
<option
value="5">5</option>
<option
value="6">6</option>
<option
value="7">7</option>
<option
value="8">8</option>
<option
value="9">9</option>
<option
value="10">10</option>
<option
value="11">11</option>
<option
value="12">12</option>
<option
value="13">13</option>
<option
value="14">14</option>
<option
value="15">15</option>
<option
value="16">16</option>
<option
value="17">17</option>
<option
value="18">18</option>
<option
value="19">19</option>
<option
value="20">20</option>
<option
value="21">21</option>
<option
value="22">22</option>
<option
value="23">23</option>
<option
value="24">24</option>
<option
value="25">25</option>
<option
value="26">26</option>
<option
value="27">27</option>
<option
value="28">28</option>
<option
value="29">29</option>
<option
value="30">30</option>
<option
value="31">31</option>
<option
value="32">32</option>
</select>
<select name="Bulan">
<option>-Bulan-</option>
<option
value="1">Januari</option>
<option
value="2">Februari</option>
<option
value="3">Maret</option>
<option
value="4">April</option>
<option
value="5">Mei</option>
<option
value="6">Juni</option>
<option value="7">Juli</option>
<option
value="8">Agustus</option>
<option
value="9">September</option>
<option
value="10">Oktober</option>
<option
value="11">November</option>
<option
value="12">Desember</option>
</select>
<select name="Tahun">
<option>-Tahun-</option>
<option
value="1980">1980</option>
<option
value="1981">1981</option>
<option
value="1982">1982</option>
<option
value="1983">1983</option>
<option
value="1984">1984</option>
<option
value="1985">1985</option>
<option value="1986">1986</option>
<option
value="1987">1987</option>
<option
value="1988">1988</option>
<option
value="1989">1989</option>
<option
value="1990">1990</option>
<option
value="1991">1991</option>
<option
value="1992">1992</option>
<option value="1993">1993</option>
<option
value="1994">1994</option>
<option
value="1995">1995</option>
<option
value="1996">1996</option>
<option
value="1997">1997</option>
<option
value="1998">1998</option>
<option
value="1999">1999</option>
<option value="2000">2000</option>
<option
value="2001">2001</option>
<option
value="2002">2002</option>
<option
value="2003">2003</option>
<option
value="2004">2004</option>
<option
value="2005">2005</option>
<option
value="2006">2006</option>
<option
value="2007">2007</option>
<option
value="2008">2008</option>
<option
value="2009">2009</option>
<option
value="2010">2010</option>
<option
value="2011">2011</option>
<option
value="2012">2012</option>
<option
value="2013">2013</option>
<option
value="2014">2014</option>
<option
value="2015">2015</option>
</select>
</td>
</tr>
<tr>
<td colspan="0">4.Jenis
Kelamin</td>
<td>:</td>
<td>
<input type="radio"
name="Kelamin" value="L">Laki Laki
<input type="radio"
name="Kelamin" value="P">Perempuan
</td>
</tr>
<tr>
<td
colspan="0">5.Agama</td>
<td>:</td>
<td>
<select
name="select">
<option>-Pilih-</option>
<option>Islam</option>
<option>Kristen
Protestan</option>
<option>Kristen
Khatolik</option>
<option>Hindu</option>
<option>Budha</option>
</td>
</tr>
<tr>
<td
colspan="0">6.Golongan Darah</td>
<td>:</td>
<td>
<select
name="select">
<option>-Pilih-</option>
<option>A</option>
<option>B</option>
<option>O</option>
<option>AB</option>
</td>
</tr>
<tr>
<td><b>B.Pendidikan</b></td>
</tr>
<tr>
<td>1.Asal Sekolah</td>
<td>:</td>
<td><input
type="text" placeholder="Masukkan Asal Sekolah"
/></td>
</tr>
<tr>
<td>2.Tahun Masuk</td>
<td>:</td>
<td><input size="5"
maxlength="4" placeholder="Thn Masuk"/></td>
</tr>
<tr>
<td>3.Tahun Lulus</td>
<td>:</td>
<td><input size="5"
maxlength="4" placeholder="Thn Lulus"/></td>
</tr>
<tr>
<td><b>C.Data Orang
Tua</b></td>
</tr>
<tr>
<td>1.Nama Ayah</td>
<td>:</td>
<td><input
type="text" placeholder="Nama Lengkap" /></td>
</tr>
<tr>
<td>2.Nama Ibu</td>
<td>:</td>
<td><input
type="text" placeholder="Nama Lengkap" /></td>
</tr>
<tr>
<td
valign="top">3.Alamat Orang Tua</td>
<td
valign="top">:</td>
<td
valign="top"><textarea cols="22" rows="2"
placeholder="Alamat Lengkap" /></textarea></td>
</tr>
<tr>
<td
colspan="2"></td>
<table>
<input type="submit"
value="Simpa Data" />
</tr>
</table>
</form>
</html>
|
Jika sudah selesai maka jangan lupa SAVE AS dan ubah format file menjadi HTML,
kemudian buka file yang sudah di simpan tadi.
Maka Hasil OutPut nya adalah :
Catatan
1. Untuk
Menambahkan Gambar, lokasi file gambar harus satu FOLDER dalam file HTML yang
kita simpan.
2. Untuk
mengatur letak Gambar seperti gambar di atas jangan lupa gunakan <style>img{padding-right:…px}</style> dan jangan menggunakan SPASI
Baik saya rasa itu saja yang dapat saya bagikan ke sahabat-sahabat web, dan semoga bermanfaat buat sehabat sekalian.
Sekian dan terima kasih
Mak
Tidak ada komentar:
Posting Komentar