Adapun form merupakan suatu penulisan input data pada HTML.
Jenis- jenisnya :
o Text
- input data berupa text inputan biasa berupa huruf, angka, simbol, dan lain-lain
(seluruh karakter yang berada di keyboard)
<form>
Nama : <input type="text" name="nama" /><br />
Email : <input type="text" name="email" />
</form>
o Password
- input data berupa kata sandi. ketika diketikkan yang tampil adalah berupa
kode *** atau ··· tergantung pada settingan default browser
<form>
Nama : <input type="text" name="nama" /><br />
Email : <input type="text" name="email" />
</form>
o Checkbox
- input data berbentuk pilihan yang dapat dipilih lebih dari satu
Warna fovorit anda ?<br />
<form><input name="color" type="checkbox" value="Red" />Merah<br />
<input name="color" type="checkbox" value="Blue" />Biru<br />
<input name="color" type="checkbox" value="Black" />Hitam
</form>
o Radio
- input data berupa pilihan (option) yang hanya bisa memilih satu pilihan
<form>
<input type="radio" name="kelamin" value="pria" />Laki-laki<br />
<input type="radio" name="kelamin" value="wanita" /> Perempuan
</form>
o Submit
- input form bebrntuk tombol yang berfungsi untuk mengirim seluruh input form
untuk kemudian di proses oleh file action. Input ini juka tidak diberi value atau nilai
(caption) akan menjadi Submit Query
Submit
<form name="input" action="daftar_nama.html" method="get">
Nama : <input type="text" name="nama" /><input type="submit"
value="Log In" />
</form>
o Reset
- input form berupa tombol juga yang fungsinya untuk mengembalikan nilai input
suatu form ke nilai default. Input ini memiliki value Reset jika Anda tidak
mendefinisikannya
Reset
o File
- input berupa file yang dipilih dari drive komputer. Kegunaannya adalah untuk
mengupload file ke server.
<form><input type="file" name="nama" _cke_saved_name="nama"
_cke_saved_name="nama" _cke_saved_name="nama"
_cke_saved_name="nama" _cke_saved_name="nama"
_cke_saved_name="nama" /></form>
o Hidden
- input data yang tersembunyi dan tidak tampil atau terlihat di browser
<form> <input type="hidden" name="rahasia" /></form>
o Image
- fungsinya sama seperti submit namun tombol ini berupa objek image yang harus
didefinisikan dengan tag src="lokasi_image"
o Button
- input yang hanya berupa tombol. Ketika di klik tidak akan ada aksi apapun.
Berbeda dengan submit dan reset, tipe ini tidak akan memiliki caption jika Anda tidak
mendefinisikannya
Sebagai tambahan :
Textarea
- textarea biasa digunakan untuk memasukan inputan yang membutuhkani kolom
yang lebar. Seperti pada kolom komentar, alamat, dll. berbeda dengan tipe inputan lainya,
text area mempunyai tag tesendiri dengan menuliskan secara langsung dengan tag <textarea>
tetapi tetap dalam tag <form>
Alamat<br />
<form>
<textarea name=text></textarea>
</form>
Fieldset
- kita dapat mempercantik form kita dengan berbagai cara, seperti menambahkan tabel
atau yang lainya. saya akan memberi tahu cara menggukan fieldset. Hasilnya sepertikita
memberi bingkai pada sebuah form.
<fieldset> <legend> Nama Anda</legend>
<form action="#">
Nama Depan<input type="text" size="3">
Nama Belakang <input type="text" size="3">
</form> ></fieldset>
Select
- Input ini berupa dropdown dimana user cukup mengklik salah satu pilihan pada list
yang tersedia. Atribut yang digunakannya sama seperti input-input sebelumnya, namun
khusus untuk size, berfungsi untuk menentukan banyaknya baris yang ditampilkan dalam
dropdown. Secara default input select hanya dapat memilih satu pilihan saja, namun bisa juga
memilih lebih dari satu hanya dengan menambahkan atribut multiple. Bila multiple dipih
dalam tag select, untuk memilih lebih dari satu user harus memilih option sambil menekan
tombol CTRL pada keyboard disarankan untuk memberi size lebih dari 1, misalnya 2 atau 3.
Untuk mendefinisikan pilihan-pilihan yang tersedia dalam input SELECT ini diperlukan tag
<OPTION>...</OPTION>
<select size="1" name="option">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
Contoh :
Form tanggal lahir =
Tempat Lahir : <input type="text" name="tempat" />
</form>
<td>Tanggal lahir :</td>
<td colspan=”2″>
<select name=”tgl”>
<option selected=”selected” value=””>DD</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=”bln”>
<option selected=”selected” value=””>MM</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=”thn”>
<option selected=”selected” value=””>YY</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>
<option>1989</option>
<option>1988</option>
<option>1987</option>
<option>1986</option>
<option>1985</option>
<option>1984</option>
<option>1983</option>
<option>1982</option>
<option>1981</option>
<option>1980</option>
<option>1979</option>
<option>1978</option>
<option>1977</option>
<option>1976</option>
<option>1975</option>
</select>
Semoga bermanfaat ........
Tidak ada komentar:
Posting Komentar