FormPengembangan Web

Edwin Lunando

edwin@kuliahkita.com

FormForm 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.

FormPada 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”

Tipe Input FormForm 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))

Tipe Input FormCara 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)

Tipe Input FormTipe 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 nilainyasize : 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 adaTipe 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

Tipe Input FormTextarea: digunakan untuk input teks yang panjang, misalkan narasi, deskripsi, dll<textarea name="nama" rows="b” cols="k">nilai</textarea>

nilai : nilai defaultrows & 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

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>

<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>

Hasil form:

Berdasarkan kode sebelumnya, dihasilkan form sebagai berikut: