Tugas Pertemuan

Tugas Pertemuan 7
Membuat FORM
Membuat Form menggunakan HTML
Ketika kita membuka halaman untuk melakukanj registrasi apapun, maka yang harus
kita lakukan adalah memasukkan data-data kita melalui form (daftar isian) yang
disediakan. Pada setiap aplikasi sistim informasi form adalah sebuah kunci penting
karena merupakan jembatan antara user dan aplikasi untuk berinteraksi.Form juga
merupakan salah satu syarat sebuah web menjadi web dinamis.
Didalam form terdapat banyak tipe bagaimana cara data dimasukkan,antara lain:
-
tipe text yang digunakan untuk menerima masukan berupa text sebanyak 1
baris
tipe text area digunakan untuk menerima masukan text lebih dari 1 baris
tipe combo box digunakan untuk menerima masukan text yang sudah
ditentukan pilihannya
tipe submit digunakan untuk mengirim data yang telah dimasukkan untuk
diolah ke halaman yang telah ditentukan dan masih banyak lagi yang lainnya.
Form mempunyai dua properti yang wajib digunakan yaitu “method” dan “action”,
properti “method” berfungsi untuk memberikan metode pengiriman data dari form
dan properti “action” berfungsi untuk memberikan alamat file yang akan mengolah
data masukanan.
Berikut contoh FORM
WEB Design
1
Syntax untuk membuat FORM adalah:
<form action="back-end script" method="posting method">
form elements like input, textarea etc.
</form>
Atribut FORM yang sering digunakan antara lain:



name: Nama sebuah form
action: bagian ini menentukan setiap skrip URL yang menerima data yang
diunggah.
method: bagian ini menentukan metode yang digunakan untuk meng-upload
data, yang sering digunakan adalah GET dan POST.
Terdapat berbagai jenis bentuk kontrol yang dapat digunakan untuk mengumpulkan
data dari pengunjung WEB, antara lain: Text input controls






Buttons
Checkboxes dan radio buttons
Select boxes
File select boxes
Hidden controls
Submit dan reset button
Berikut beberapa contohnya:
WEB Design
2
Single-line text input controls:
<form action="/cgi-bin/hello_get.cgi" method="get">
First name:
<input type="text" name="first_name" />
<br>
Last name:
<input type="text" name="last_name" />
<input type="submit" value="submit" />
</form>
Password input controls:
<form action="/cgi-bin/hello_get.cgi" method="get">
Login :
<input type="text" name="login" />
<br>
Password:
<input type="text" name="password" />
<input type="submit" value="submit" />
</form>
Multiple-Line Text Input Controls:
<form action="/cgi-bin/hello_get.cgi" method="get">
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
<input type="submit" value="submit" />
</form>
HTML Forms - Creating Button:
<form action="http://www.example.com/test.asp" method="get">
WEB Design
3
<input type="submit" name="Submit" value="Submit" />
<br /><br />
<input type="reset" value="Reset" />
<input type="button" value="Button" />
</form>
HTML Forms - Checkboxes Control:
<form action="/cgi-bin/checkbox.cgi" method="get">
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
<input type="submit" value="Select Subject" />
</form>
HTML Forms - Raido box Control:
<form action="/cgi-bin/radiobutton.cgi" method="post">
<input type="radio" name="subject" value="maths" /> Maths
<input type="radio" name="subject" value="physics" /> Physics
<input type="submit" value="Select Subject" />
</form>
HTML Forms - Select box Control:
<form action="/cgi-bin/dropdown.cgi" method="post">
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
<input type="submit" value="Submit" />
</form>
HTML Forms - File Select Boxes:
<form action="/cgi-bin/hello_get.cgi" method="post"
name="fileupload" enctype="multipart/form-data">
<input type="file" name="fileupload" accept="image/*" />
</form>
WEB Design
4
Tugas:
Buatlah form seperti pada contoh berikut:
Atau
WEB Design
5