Assalamualaikum
wr. wb
Selamat
datang ..
kali ni saya akan menjelaskan apa yang di maksud dengan form?. Elemen-elemen
input pada form?. Beserta cara membuat form dan membuat formulir registrasi dengan menampilkan gambar menggunakan Html ,,
PENGERTIAN FORM
Form
digunakan untuk mengirim data merupakan salah satu elemen dalam HTML yang
digunakan untuk menerima input dari pengunjung. Melalui form pengunjung sebuah
halaman web dapat melakukan interaksi dengan web.
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 – ELEMEN INPUT PADA FORM
1.TEXTBOX
Textbox digunakan untuk memasukkan data string sebanyak satu baris.
contoh penulisan TEXTBOX:
Textbox digunakan untuk memasukkan data string sebanyak satu baris.
contoh penulisan TEXTBOX:
<input
type="text" name="text1" size="20"
value="Rampes Team>
<input
type="password" name="pass1" size="20"
value="password">
Hasilnya
:
Username :
Password :
Password :
2.CHECKBOX
Checkbox digunakan untuk memberi beberapa pilihan kepada user, sehingga user dapat memilih salah satu, lebih dari satu pilihan atau tidak sama sekali.
contoh penulisan CHECKBOX:
Checkbox digunakan untuk memberi beberapa pilihan kepada user, sehingga user dapat memilih salah satu, lebih dari satu pilihan atau tidak sama sekali.
contoh penulisan CHECKBOX:
<input
type="checkbox" name="c1" checked> HTML
<input
type="checkbox" name="c2"> CSS
<input
type="checkbox" name="c3"> JavaScript
Hasilnya
:
HTML CSS
JavaScript
3. RADIO Button
Radio button digunakan membuat pilihan. user dapat memilih salah satu pilihan yang yersedia, sehingga user tidak bisa memilih kurang atau lebih dari satu pilihan yang disediakan.
contoh penulisan RADIO button:
<input
type="radio" name="HTML" value="HTML" checked>
HTML
<input
type="radio" name="CSS" value="CSS"> CSS
<input
type="radio" name="Java" value="Java">
JavaScript
Hasilnya :
HTML
CSS JavaScript
4. DROP DOWN Menu
DROP DOWN Menu digunakan untuk membuat menu pilihan.
contoh penulisan DROP DOWN Menu:
<select
name="menu">
<option value="menu"> Drop
Down </option>
<option value="HTML"> HTML
</option>
<option value="CSS"> CSS
</option>
<option value="Java">
JavaScript </option>
</select>
5.
TEXT AREA
Text area digunakan untuk menampilan masukan berupa textbox yang mempu menerima masukan berupa string lebih dari satu baris.
contoh penulisan TEXT AREA:
Text area digunakan untuk menampilan masukan berupa textbox yang mempu menerima masukan berupa string lebih dari satu baris.
contoh penulisan TEXT AREA:
<textarea
name="text1" rows="5" cols="40">
Komentar
Anda:
</textarea>
Hasilnya :
6. BUTTON
Elemen ini diunakan untuk menampilkan tombol yang dapat berupa tombol SUBMIT untuk mengirimkan data ke pemroses di server, RESET untuk mengulangi/mengosongkan isian form yang tidak berfungsi apapun sebelum kita mendefinisikan sebuah fungsi untuknya.
contoh penulisan BUTTON:
<input
type="submit" value="kirim"
name="button1">
<input
type="reset" value="batal" name="button2">
CARA
MEMBUAT FORM
Adapun
Langkah- lanagkah seperti Berikut :
1.
Buka aplikasi Editor.
2. Masukan
kode html berisi list.
3. Simpan dengan menggunakan ekstensi htm atau .html
<table
border="0">
<tr>
<td
colspan="3">FORMULIR</td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td>
<input
type="text" />
</td>
</tr>
<tr>
<td
valign="top">Alamat</td>
<td
valign="top">:</td>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td>Kota</td>
<td>:</td>
<td>
<input
type="text" />
</td>
</tr>
<tr>
<td>Golongan
Darah</td>
<td>:</td>
<td>
<input
type="radio" />A
<input
type="radio" />B
<input
type="radio" />AB
<input
type="radio" />O
</td>
</tr>
<tr>
<td>Agama</td>
<td>:</td>
<td>
<select>
<option>-Pilih-</option>
<select>
</td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>
<input
type="checkbox" />Golf
<input
type="checkbox" />Bola
<input
type="checkbox" />Renang
</td>
</tr>
<tr>
<td
colspan="2"></td>
<td>
<input
type="Submit" value="Kirim" />
<input
type="Reset" value="Clear" />
</td>
<tr>
</table>
4.
Kemudian jalankan Html dengan web browser.
5. Bertikut hasih output seperti yang diminta .
CARA MEMBUAT FORMULIR REGISTRASI DAN CARA MENAMPILKAN GAMBAR MENGGUNAKAN HTML
Adapun langkah langkahnya sebagai berikut ..
1. Buka Aplikasi Editor
2. Masukan kode html berisi list
3. Simpan dengan menggunakan ekstensi htm atau .html
<html>
<head>
<title>Form</title>
<style>
img{padding-right: 850px
}
</style>
</head>
<body>
<h2>Formulir Registrasi</h2>
<img src="http://duniawanita.top/wp-content/uploads/2016/03/hijab-casual-look-2-750x750-150x150.jpg" align="right">
<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="">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 name="Bulan">
<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 name="tahun">
<option value="">Tahun</option>
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</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>
</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>Keristen</option>
<option>Protestan</option>
<option>Budha</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>-Pilih-</option>
<option>A</option>
<option>B</option>
<option>O</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="Simpan Data"></td>
</tr>
</ol>
</ol>
</ol>
</body>
</html>
4. Kemudian jalankan dengan Html dengan web browser
5. Berikut hasil Output seperti yang di minta.
Cara memasukan gambar yaitu dengan mengambil atau mengcopy location yang ada di foto , kemudian di paste kedalam aplikasi editor dengan menggunakan <img src=" "> maka saat list di simpan dengan ekstensi .html foto yanga di minta akan di tampilkan.
contoh seperti berikut <img src="http://duniawanita.top/wp-content/uploads/2016/03/hijab-casual-look-2-750x750-150x150.jpg" align="right">
contoh seperti berikut <img src="http://duniawanita.top/wp-content/uploads/2016/03/hijab-casual-look-2-750x750-150x150.jpg" align="right">
Tidak ada komentar:
Posting Komentar