Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai dengan kebutuhan. Contohnya proses pengiriman data, browse, hapus, penyuntingan data dan lain sebagainya. Cara penulisan form dalam html adalah.
<form name="nama_form" method="post/get" action="url">...isi form...</form>
pada penulisan form "nama form" adalah nama form yang sedang digunakan, method adalah metode atau cara yang digunakan untuk menyimpan data ke server sedangkan action adalah alamat atau bisa juga file lain yang digunakan untuk memproses input dari form kedalam server.
Pada bagian form tersedia kontrol-kontrol input yang digunakan untuk masing-masing keperluan dalam memasukan data input. Dan kontrol form terdiri dari :
1. Kontrol Text dan Kontrol Password
Kontrol text atau biasa disebut textbox digunakan untuk menampilkan kotak masukan/input text, sedangkan kontrol password adalah suatu kontrol input text yang fungsinya mirip dengan kontrol text tetapi data yang ada pada kontrol pasword akan ditampilkan dalam bentuk asterisk (*).Cara penulisannya adalah :
a. Kontrol Text
<input type="text" [properti]>
b. Kontrol Password
<input type="password" [properti]>
Properti kedua kontrol ini adalah :
- Name, adalah nama dari kontrol tersebut
- Size, adalah ukuran dari kontrol tersebut
- value, adalah text yang tertulis pada kontrol
- Maxlength, adalah panjang maksimal karakter yang diperbolehkan
- Dir, digunakan untuk mengatur arah tampilan teks pada kontrol, seperti rtl(right to left) dan ltr (left to right).
<html>
<head>
<TITLE>Login User</TITLE>
<body>
<p>Silahkan login dulu !!!</p>
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="11%">Nama</td>
<td width="3%">:</td>
<td width="86"><input type="text" name="nama" size="20"></td>
</tr>
<tr>
<td width="11%" height="22">Password</td>
<td width="3%">:</td>
<td width="86"><input type="password" name="pass" size="20"></td>
</tr>
<tr>
<td width="11%">Sekolah</td>
<td width="3%">:</td>
<td width="86"><input type="text" name="sekolah" size="20"></td>
</tr>
</table>
</body>
</head>
</html>
2. Kontrol Input Untuk Memilih
a. Kontrol Radio
Digunakan untuk memilih salah satu dari beberapa pilihan yang disediakan. Biasa digunakan untuk membuat pilihan jenis kelamin, karena jenis kelamin hanya wanita dan pria dan tak mungkin keduannya. Cara penulisannya adalah.
<input type="radio" [properti]>
b. Kontrol Checkbox
Digunakan untuk memilih beberapa pilihan dari pilihan yang telah disediakan. Perbedaannya dengan kontrol radio adalah kontrol ini dapat memilih beberapa pilihan sekaligus, sedangkan kontrol radio hanya bisa satu pilihan.
<input type="checkbox" [properti]>
Properti yang ada pada kedua kontrol ini adalah :
- Name, adalah nama dari kontrol
- Value, adalah nilai pada kontrol yang tidak dapat di tampilkan, tetapi dapat dioleh melalui masukan user
- Checked, digunakan memberi tanda bahwa pilihan tersebut sedang diaktifkan.
- Default, adalah kontrol yang telah dipilih secara default
c. Kontrol Select
Digunakan untuk membuat daftar pilihan atau menu. Cara penulisannya adalah.
<select [properti]>
<option>pilihan ke1
<option>pilihan ke 2
<option>pilihan ke 3
<option pilihan ke n
</select>
properti yang ada pada kontrol select adalah :
- Name, adalah nama dari kontrol select
- Selected, adalah item yang dipilih
- Size, adalah banyak item yang ditampilkan (default=1)
- Multiple, tampilandari drop-down box, seperti tombol spinner
- Dir, digunakan untuk mengatur arah tampilan teks pada kontrol, seperti rtl(right to left) dan ltr (left to right).
<html>
<head>
<title>Check Box , Radio dan Select</title>
</head>
<body>
<p>Contoh Kontrol Radio</p>
<p>
<input type="radio" value="v1" checked name="k1">Pria<br>
<input type="radio" value="v2" name="k1">Wanita<br>
</p>
<p>Contoh kontrol Checkbox</p>
<p>
<input type="checkbox" name="c1" checked>Makan<br>
<input type="checkbox" name="c2" >Tidur<br>
<input type="checkbox" name="c3" >Baca Buku<br>
<input type="checkbox" name="c4" >Chatting
</p>
<p>Contoh kontrol Checkbox</p>
<p>
<select name="PilAgama" size="1">
<option selected >Islam
<option>Kristen
<option>Katholik
<option>Hindu
<option>Budha
</select>
</p>
</body>
</html>
Posts
terima kasih....ini sangat membantu kak :)
ReplyDelete