-
1.
Form
Pengembangan Web
Edwin Lunando
edwin@kuliahkita.com
-
2.
Form
Form digunakan untuk menerima input / masukan dari user.
Masukan pengguna yang ada di dalam form akan diproses lebih lanjut oleh
bahasa pemrosesan lain pada server atau pada bagian backend.
Sebuah Form dimulai dengan menggunakan tag <form> dan berisi minimal
satu input bertipe submit dan satu tipe input yang menerima masukan
pengguna.
-
3.
Form
Pada form terdapat beberapa atribut yaitu:
● action : script pada backend yang akan memroses masukan
● method : metode yang digunakan untuk menggunggah data
sebelum diproses (biasanya GET atau POST)
● target : menentukan target window atau frame dimana hasil akan
ditampilkan
● enctype: menentukan cara browser meng-encode data sebelum
dikirim ke server. Biasa digunakan ketika memroses file dimana
menggunakan “multipart/form-data”
-
4.
Tipe Input Form
Form terdiri dari berbagai jenis input:
● text (tulisan satu baris)
● textarea (tulisan dengan baris lebih dari satu)
● Password (tulisan akan disembunyikan)
● number (angka)
● date (tanggal)
● radiobutton (pilihan tunggal)
● checkbox (centang, bisa banyak pilihan sekaligus)
● file (berkas, bisa berupa gambar, video, dll)
● hidden (tersembunyi)
● select (pilihan tunggal atau majemuk (multiple))
-
5.
Tipe Input Form
Cara Pendefinisian:
<input type="jenis" name="nama" id="id" value="nilai" disabled>
● type : text, password, radio, checkbox, image, submit, reset, button, hidden, file
● name : identifier untuk sisi server
● id : identifier untuk sisi browser
● value : nilai default
● disabled : jika disebutkan maka elemen tidak aktif (tidak digunakan)
● Opsi lainnya adalah kosong atau readonly (hanya dapat dilihat / tidak dapat diedit)
-
6.
Tipe Input Form
Tipe Text atau Password: digunakan untuk input teks yang pendek. Apabila type yang digunakan
adalah password, maka teks akan disembunyikan.
<input type="[text|password]" name="nama" readonly size="m" maxlength="n">
readonly : jika disebutkan maka elemen tidak bisa diubah nilainya
size : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS)
maxlength : banyaknya karakter maksimal yang dapat dimasukkan user
Tipe Radio : digunakan untuk pemilihan salah satu pilihan dari beberapa pilihan yang ada
Tipe Checkbox : digunakan untuk memilih beberapa pilihan dari banyak pilihan yang ada.
<input type="[radio|checkbox]" name="nama" checked>
checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih
-
7.
Tipe Input Form
Textarea: digunakan untuk input teks yang panjang, misalkan narasi, deskripsi, dll
<textarea name="nama" rows="b” cols="k">nilai</textarea>
nilai : nilai default
rows & cols: banyaknya baris yang ditampilkan (tinggi) dan kolom (lebar)
<select name="nama" multiple size="r">
<option value="nilai1" selected>teks1</option>
<option value="nilai2">teks2</option>
…
</select>
multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl)
size : banyaknya baris pilihan yang ditampilkan (default=1)
selected : jika disebutkan maka defaultnya dalam keadaan terpilih
-
8.
Tipe Submit dan Pendefinisian Form
<button type="jenis" name="name" value="nilai"> Nama Button </button>
type : submit (untuk selesai dan menyimpan input form), reset (membersihkan input)
tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol
<input type="submit" name="name" value="nama button">
Sama seperti button dengan tipe submit yang digunakan untuk menyimpan input pada form
Pendefinisian Form:
<form method=”POST” action=”...”>
<input …>
...
<button type=”submit” … ></button>
</form>
-
9.
<form method="POST" action="proses.php">
Silahkan isi data Anda
<input type="hidden" name="halaman" value="1">
<table border="1">
<tr><td><label for="nama">Nama lengkap:</label></td>
<td><input type="text" name="nama" id="nama" maxlength="40" size="20"></td></tr>
<tr><td><label for="pass">Password:</label></td>
<td><input type="password" name="pass" id="pass" maxlength="8" size="8"></td></tr>
<tr><td><label for="jenkel">Jenis kelamin:</label></td>
<td><input type="radio" name="jenkel" id="jenkel" value="L">Laki-laki<br>
<input type="radio" name="jenkel" id="jenkel" value="P">Perempuan</td></tr>
<tr><td><label for="alamat">Alamat:</label></td>
<td><textarea rows="3" cols="30" name="alamat" id="alamat"></textarea></td></tr>
<tr><td><label for="bayar">Sudah bayar?</label></td>
<td><input type="checkbox" name="bayar" id="bayar">Sudah</td></tr>
</table>
<input type="submit" value=" Kirim ">
<input type="reset" value="Reset">
</form>
-
10.
Hasil form:
Berdasarkan kode sebelumnya,
