form

1. Pra Kuliah 2017/2018
MENHYA SNAE, M.KOM.|DOSEN
PENGENALAN INTERNET
Form pada HTML

2. Form pada HTML
Form merupakan salah satu elemen dalam HTML yang digunakan untuk
menerima input dari pengunjung. Melalui form pengunjung sebuah halaman
web dapat melakukan interaksi dengan web. Pengunjung dapat memasukan
data melalui elemen-elemen input seperti textfield, checkbox, radio button,
textarea, submit button, dropdown dan lain-lain. Selain itu
pengunjung juga dapat melakukan pemilihan data mengunakan elemen
select list atau dengan istilah lain combo box atau drop-down list. Form
membuat sebuah halaman web menjadi web interaktif dan dinamis, karena
form merupakan satu-satunya sarana bagi pengembang website untuk
mendapatkan informasi dari pengguna.
Berikut perintah dasar Form :
<form>
Input elements
</form>

3. Elemen-elemen pada HTML
Elemen yang paling penting dalam form adalah elemen input. Elemen ini
memungkinkan pengunjung memasukan data melalui halaman form yang
datanya kemudian akan dikirimkan keserver. Ada banyak elemen-elemen
input pada form, yang dapat digunakan oleh pengguna untuk mengisikan data
dengan yang berbeda-beda jenisnya. Berikut ini pembahasan tiap-tiap
elemen input form, beserta dengan cara pembuatannya.

4. Elemen Text Field
Elemen yang digunakan untuk memasukan text dalam satu baris. Lebar
karakter defaultnya adalah 20 karakter.
Penulisan :< input type=”text” />
Berikut contohnya :
<form>
First name : <input type=”text” name=”first name” /><br/>
Last name :< input type=”text” name=”last name” />
</form>

5. Elemen Password Field
Untuk memasukan datu baris teks dengan format chiphertext/password.
Dengan karakter yang disamarkan dengan bulatan atau tanda “*”.
Penulisan :< input type=”password” />
Berikut contohnya :
<form>
Password : <input type=”password” name=”password”/>
</form>

6. Elemen Radio Button
Radio button digunakan agar dapat memilih salah satu pilihan. Contoh jenis
kelamin (male or female).
Penulisannya : Radio Button<input type="radio">
Berikut contohnya :
<form>
Jenis kelamin <input type =”radio” name=”sex value=”male”/> Male<br/>
<input type =”radio” name=”sex value=”female”/> Female
</form>

7. Elemen TextArea
Digunakan sebagai input kontrol form untuk memasukan teks lebih dari satu baris. Elemen ini
mempunyai atribut yaitu name, cols, dan rows.
Seperti dijelaskan berikut :
Nama = nama dari veriabel yang dikirim ke suatu aplikasi
Rows = panjang baris dalam karakter
Cols = tinggi kotak
Penulisannya :
<text area>
Name=”name”
Cols=”number”
Row=”number”
...........
</text area>
Berikut contohnya:
Alamat : <textarea name="Alamat" cols="25" rows="4"></textarea>

8. Elemen Check Box
Check Box digunakan untuk dapat memilih lebih dari satu pilihan.
Penulisannya: Check Box<input type="checkbox">
Berikut contohnya  Hobby:
<form>
<input type=checkbox name=hobi value=Membaca>Baca Buku
<input type=checkbox name=hobi value=Kesenian>kesenian
<input type=checkbox name=hobi value=olahraga>Olahraga
<input type=checkbox name=hobi value=Traveling>Jalan Jalan
</form>

9. Elemen Select List
Digunakan untuk menampilkan daftar pilihan dalam bentuk drop-down list.
Penulisannya :
<select>
......
</select>
Berikut contohnya Pekerjaan :
<select name=Pekerjaan>
<option value=Pelajar>Pelajar/Mahasiswa
<option value=PNS>Pegawai Negeri Sipil
<option value=Karyawan>Karyawan
<option value=Wiraswasta>Wiraswasta
</select>

10. Elemen Submit Button
Digunakan untuk mengirimkan data dari halaman web ke server. Setiap
elemen form membutuhkan tombol submit untuk mengirimkan nama dan
nilinya ke suatu aplikasi yang di tentukan dalam atribut ACTION dlam
elemen FORM.
Penulisannya : Submit<input type="submit">
Berikut contohnya :
<form name=”input” action=”proses input.php” method=”get’>
....................
<input type=submit value=kirim data/>
</form>

11. Elemen Reset Button
Digunakan untuk membatalkan semua proses ata mereset proses pengisian
data yang dilakukan di elemen input form.
Penulisannya : Reset<input type="reset">
Berikut contohnya :
<form name=”input” action=”proses input.php” method=”get’>
....................
..................
<input type=submit value=kirim data/>
<input type=reset value=reset data/>
</form>

12. Contoh Gabungan elemen-elemen
<html>
<head>
<title bgcolor="Black">Contoh pembuatan
Form</title>
</head>
<body>
<form action="prosesinput.php" method="get">
<p> First name : <input type=”text”
name=”first name” /><br/>
Last name :< input type=”text” name=”last
name” />
<p> Password : <input type=”password”
name=”password”/>
<p> Jenis kelamin : <input type =radio
name=”sex value=”male”/> Male
<input type =radio name=”sex
value=”female”/> Female
<p> Alamat : <textarea name="Alamat"
cols="25" rows="4"></textarea>
<p> Hobi : <input type=checkbox name=hobi
value=Membaca>Baca Buku
<input type=checkbox name=hobi
value=Kesenian>kesenian
<input type=checkbox name=hobi
value=olahraga>Olahraga
<input type=checkbox name=hobi
value=Traveling>Jalan Jalan
<p> Pekerjaan :
<select name=Pekerjaan>
<option value=Pelajar>Pelajar/Mahasiswa
<option value=PNS>Pegawai Negeri Sipil
<option value=Karyawan>Karyawan
<option value=Wiraswasta>Wiraswasta
</select>
<p>Komentar : <textarea name="komentar" cols="25"
rows="4"></textarea>
<p><input type=submit value=kirim data/><input
type=reset value=ulang>
</form>
</body>
</html>
1
2

13. Latihan Soal

14. Sekian…… Terima kasih

15. Questions?