Web Programming

Di Susun Oleh :
Gita Yulia Almanda
Form
- Form adalah sebuah daftar isian.
- Form pada html dibuat dengan menggunakan elemen form.
Elemen form harus membungkus seluruh elemen-elemen
masukan form lain untuk memastikan masukan informasi
pengguna dapat dibaca oleh aplikasi web.

Penulisan struktur dasar form :

<form>
…isi form…
</form>
Elemen-elemen Input Pada Form
- Elemen yang paling penting dalam form adalah elemen
input. Elemen ini memungkinkan user memasukan data
melalui halaman form yang datanya kemudian akan dikirim
ke server.

Elemen inputnya adalah :

1. Text Field
Elemen yang digunakan untuk memasukan text dalam satu baris.
Lebar karakter defaultnya adalah 20 karakter.
Penulisan : <input type=“text”/>
Langkah – langkah untuk memulai membuat form HTML
sebagai berikut :
1. Buka notepad++ sebagai editor form HTML.
2. Buat skrip sederhana seperti di bawah ini di notepad++ :
3. Simpan form yang telah dibuat dengan menggunakan
ekstensi .html
- Path directory : …./text.html
- Save as type : All types (*.*)
4. Untuk melihat hasil dari form text HTML yang telah dibuat,
buka form tersebut menggunakan web browser. Dengan klick
Run – Launch in IE.
2. Username & Password Field
Untuk memasukan satu baris teks dengan format password.
Dengan karakter yang disamarkan menggunakan bulatan atau
tanda “*”.
Penulisan : <input type=“password”/>
Contohnya :
Untuk melihat hasil dari form username HTML yang
telah dibuat, buka form tersebut menggunakan web
browser. Dengan klick Run – Launch in IE.
3. Radio Button
Radio button digunakan agardapat memilih salah satu pilihan.
Contoh jenis kelamin (Pria atau Wanita).
Penulisannya : Radio Button<input type=“radio”>
Berikut contohnya :
Untuk melihat hasil dari form radio HTML yang telah
dibuat, buka form tersebut menggunakan web browser.
Dengan klick Run – Launch in IE.
4. Check Box
Check box digunakan untuk dapat memilih lebih dari satu
pilihan.
Penulisannya : Check Box<input type=“checkbox”>
Berikut contohnya :
Untuk melihat hasil dari form checkbox HTML yang
telah dibuat, buka form tersebut menggunakan web
browser. Dengan klick Run – Launch in IE.
5. Text Area
Digunakan sebagai input control form untuk memasukan teks
lebih dari satu baris.
Penulisannya : <text area> Name=“name” Cols=“number”
Row=“number” </text area>
Berikut contohnya :
Untuk melihat hasil dari form textarea HTML yang
telah dibuat, buka form tersebut menggunakan web
browser. Dengan klick Run – Launch in IE.
6. Select List
Digunakan untuk menampilkan daftar pilihan dalam bentuk
drop-down list.
Penulisannya : <select>
…
</select>
Berikut contohnya :
Untuk melihat hasil dari form select HTML yang telah
dibuat, buka form tersebut menggunakan web browser.
Dengan klick Run – Launch in IE.
7. Submit Button
Digunakan untuk mengirimkan data dari halaman web ke
server.
Penulisannya : Submit<input type=“submit”>
Berikut contohnya :
Untuk melihat hasil dari form submit HTML yang telah
dibuat, buka form tersebut menggunakan web browser.
Dengan klick Run – Launch in IE.
8. Reset Button
Digunakan untuk membatalkan semua proses atau mereset
proses pengisian data yang dilakukan di elemen input form.
Penulisannya : Reset<input type=“reset”>
Berikut contohnya :
Untuk melihat hasil dari form reset HTML yang telah
dibuat, buka form tersebut menggunakan web browser.
Dengan klick Run – Launch in IE.
Terima Kasih