pw

Uraian materi.
Form HTML digunakan untuk memilih pelbagai macam inputan yang disediakan. Data bisa diinputan dalam komponen entri pilihan, diantaranya input file, radio button, chexbox, select serta datalist.
1.) Komponen input file
Komponen input file berfungsi untuk memasukan data file yang dibutuhkan kedalam sistem web yang dibuat. Format tag HTML-nya adalah sebagai berikut :
<input type=file name=name accept=mime type list>
Name= “name” merupakan pemberian nama pada komponen input sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Contoh bentuk tampilannya adalah sebagai berikut : <!doctype html> <html> <head> <title>input file </title> </head> <body> <font face="Courier New, Courier, mono">---- Tambahkan File KRS --- </font><br> <form > <input type="file" name="pic" accept="image/*"> </form> </body>
Pemrograman Web
Page | 24
</html>
Listing kode diatas menghasilkan tampilannya sebagai berikut :
Gambar 2.1 hasil form input file
Bila dklik browse maka akan muncul kotak dialog untuk mencari file, seperti berikut :
Gambar 2.2 file upload dari form input
2.) Komponen radio button
Pada form input radio button hanya ada satu pilihan yang terseleksi,tidak bisa digunakan untuk multiple answer. Format umum tag HTML dari Form Input Radio Button adalah sebagai berikut :
<input type=radio name=name value=value> <input type=radio name=name value=value checked>
Name= “name” merupakan pemberian nama pada komponen input sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Berikut adalah penggalan listing program penulisan form input radio button
Pemrograman Web
Page | 25
<!doctype html> <html> <head> <title>radio button </title> </head> <body> Tingkat Pendidikan : <form> <input type="radio" name="pendidikan" value="SD">SD<br> <input type="radio" name="pendidikan" value="SMP">SMP<br> <input type="radio" name="pendidikan" value="SMA">SMA sederajat<br> <input type="radio" name="pendidikan" value="D3">D3<br> <input type="radio" name="pendidikan" value="S1">S1<br> <input type="radio" name="pendidikan" value="S2">S2<br> <input type="radio" name="pendidikan" value="S3">S3<br> </form> </body> </html>
Yang perlu diperhatikan pada penggunaan input radio adalah bahwa atribut nama (name) dari komponen dari input tersebut harus sama. Contoh bentuk tampilannya adalah sebagai berikut :
Gambar 2.3 tampilan radio button
Pemrograman Web
Page | 26
3) Komponen chexbox
Komponen chexbox memiliki fungsi yang hampir sama dengan radio button, yaitu untuk menentukan pilihan. Namun pada chexbox dapat digunakan untuk memilih lebih dari satu jawaban (multi answer).
Atau bisa dikatakan bahwa komponen input checkbox digunakan sebgai masukan untuk data atau nilai pilihan dengan alternatif jawaban lebih dari 1 opsi pilihan. Tampilan dari komponen input ini berupa kotak yang dapat diberi tanda centang/contreng. Jenis input ini biasa digunakan untuk memasukkan data pilihan yang pilihannya bisa lebih dari satu, seperti hobby, makanan, dan lain-lain. Format tag HTML-nya adalah sebagai berikut :
<input type=checkbox name=name value=value> <input type=checkbox name=name value=value checked>
Setiap komponen input harus diberikan nama (name) yang berbeda karena data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Nilai dari komponen checkbox berupa nilai boolean, yakni true apabila dicentang dan false apabila input pilihan tersebut tidak dicentang.
Berikut ini adalah contoh penerapan dari format form input check box <!doctype html> <html> <head> <title>FORM INPUT</title> </head> ---- KETERANGAN ---- <form> <input type="checkbox" name="vehicle" value=" Sakit " >Sakit<br> <input type="checkbox" name="vehicle"
Pemrograman Web
Page | 27
value="Ijin">Ijin<br> <input type="checkbox" name="vehicle" value="Tanpa">Tanpa Keterangan<br> </form> </body> </html>
Listing kode diatas menghasilkan tampilannya sebagai berikut :
Gambar 2.4 hasil form input checkbox
4) Komponen Input Image
Komponen input image bertujuan untuk memasukan file gambar yang dibutuhkan oleh sistem web, misalnya saja file gambar foto.jpg. Format tag HTML dengan atribut image adalah sebagai berikut :
<input type=image name=name src="url"> <input type=image name=name src="url" align="alignment">
Name= “name” merupakan pemberian nama pada komponen input sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Sedangkan type=image merupakan tipe file yang dapat dimasukan dalam sistem. Berikut adalah salah satu contoh form Input Image dengan atribut image
<!doctype html> <html>
Pemrograman Web
Page | 28
<body> <form > Nama depan : <input type="text" name="fname"><br> Nama belakang: <input type="text" name="lname"><br> <input type="image" src="img_submit.gif" alt="Submit" width="50" height="50"> </form> </body> </html>
Bila listing program diatas di jalankan di browser (http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_image) akan menghasilkan tampilan sebagai berikut :
Gambar 2.5 form input image
5) Komponen select
Komponen input dengan tipe ‘select’ adalah komponen input dengan banyak pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan. Istilah lain dari bentuk komponen ini adalah combo box atau list box. Contoh penggunaan komponen ini adalah pemilihan data agama, jurusan, pekerjaan, dan sebagainya. Format umum Penulisan komponen select adalah sebagai berikut : <select name=”name”> <option value="nilai1"> nilai1 </option> <option value=" nilai2"> nilai2 </option> <option value=" nilai3"> nilai3 </option>
Pemrograman Web
Page | 29
<option value=" nilai4 "> nilai4</option> </select>
Name= “name” merupakan pemberian nama pada komponen input select sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Sedangkan value=”nilai” merupakan nilai dari setiap pilihan yang diberikan.
Berikut ini adalah contoh penggunaan dari komponen input bertipe ‘select’ : <html> <head> <title>Form</title> </head> <body> Pilih Jurusanmu : <form> <select name="jurusan"> <option value="informatika">informatika</option> <option value="matematika">matematika</option> <option value="kimia">kimia</option> <option value="biologi">biologi</option> <option value="fisika">fisika</option> </select> </form> </body> </html>
Pemrograman Web
Page | 30
Hasil dari halaman form di atas adalah sebagai berikut :
Gambar 2.5 komponen form select
6) Komponen datalist
Komponen datalist merupakan elemen form baru pada HTML5. Datalist digunakan untuk membuat daftar list. Komponen datalist memberikan dukungan autocomplete dasar untuk pilihan pada field input. Komponen datalist merupakan pengabungan antara list dan field input dengan atribut autocomplete. Saat membuat pilihan pada datalist, bila terdapat huruf/item yang sama dengan data pada data list maka akan muncul item yang cocok (fungsi autocomplete bekerja).
Format umum Penulisan komponen datalist adalah sebagai berikut : <input list="list"> <datalist id="id"> <option value="nilai1"> <option value=" nilai2"> <option value=" nilai3"> </datalist>
Berikut ini adalah contoh penggunaan dari komponen input datalist <!DOCTYPE html> <html> <body> <form action="demo_form.asp" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer">
Pemrograman Web
Page | 31
<option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> </body> </html>
Bila listing kode diatas dijalankan maka akan menghasilkan tampilan seperti dibawah ini. Pada saat textfield diketikan huruf “C” maka akan muncul pilihan “chrome” dimana kata “chrome” menggandung unsur huruf “C” hal ini menandakan fungsi autocompletenya berjalan.
Gambar 2.7 komponen form datalist
7) Contoh Pembuatan Form dengan elemen entri pilihan
Berikut adalah listing kode untuk membuat form menggunakan elemen entri pilihan, textarea <!DOCTYPE html > <html> <head> <title>form</title> </head> <body>
Pemrograman Web
Page | 32
<table border="1"> <tr><td><form id="form1" name="form1" method="post" action=""> <table width="354" align="center"> <tr> <td height="24" colspan="3" align="center"><B>PENDAFTARAN</td> </tr> <tr> <td>Nama Pengguna</td> <td align="center">:</td> <td><label for="textfield"></label> <input type="text" name="textfield" id="textfield" /></td> </tr> <tr> <td>Sandi</td> <td align="center">:</td> <td><label for="textfield2"></label> <input type="text" name="textfield2" id="textfield2" /></td> </tr> <tr> <td>Jenis Kelamin</td> <td align="center">:</td> <td><input type="checkbox" name="checkbox" id="checkbox"
Pemrograman Web
Page | 33
/> <label for="checkbox">Pria <input type="checkbox" name="checkbox2" id="checkbox2" /> Wanita</label></td> </tr> <tr> <td>Tanggal lahir</td> <td align="center">:</td> <td><label for="select"></label> <select name="select" id="select"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <label for="select2"></label> <select name="select2" id="select2"> <option>Januari</option> <option>Februari</option> <option>Maret</option>
Pemrograman Web
Page | 34
<option>April</option> <option>Mei</option> <option>Juni</option> <option>Juli</option> <option>Agustus</option> <option>September</option> <option>Oktober</option> <option>November</option> <option>Desember</option> </select> <label for="select3"></label> <select name="select3" id="select3"> <option>1991</option> <option>1992</option> <option>1993</option> <option>1994</option> <option>1995</option> <option>1996</option> <option>1997</option> <option>1998</option> <option>1999</option> </select></td> </tr> <tr> <td colspan="2">&nbsp;</td> <td><input type="submit" name="button" id="button"
Pemrograman Web
Page | 35
value="Simpan" /> <input type="reset" name="button2" id="button2" value="Batal" /></td> </tr> </table> </td></tr></table> </form> </body> </html>
Bila listing kode diatas dijalankan akan menghasilkan tampilan form dilengkapi elemen entri pilihan seperti gambar dibawah ini.
Gambar 2.8 elemen form entri pilihan
8) Pembuatan form dengan elemen entri pilihan dan elemen fieldset
Berikut adalah listing kode untuk membuat form menggunakan elemen entri pilihan, textarea dan fieldset.
<html> <head> <title>pengaturan pada form</title> </head>
Pemrograman Web
Page | 36
<body> <form> <form action="test.html"> <fieldset> <legend>tentang anda </legend> <table> <tr> <td width="50"> <label for="first">nama lengkap </label> </td> <td><input type="text" name="nama_lengkap" id="first" size="20" maxlength="50" /><br /> </td> </tr> <tr><td><label for="last">alamat</label> </td> <td><input type="text" name="alamat" id="last" size="20" maxlength="50" /><br /> </td> </tr> <tr><td><label for="desc">pesan dan kesan</label> <td><textarea rows="5" cols="20" id="desc">tuliskan pesan anda disini</textarea><br /> </td> </tr> </table>
Pemrograman Web
Page | 37
<fieldset class="hoby"> <legend>hoby anda?</legend> <input type="radio" id="berkebun" value="berkebun" name="hoby" /><label for="cberkebun"> berkebun</label><br /> <input type="radio" id="memasak" value="memasak" name="hoby" /><label for="memasak"> memasak</label><br /> <input type="radio" id="renang" value="renang" name="hoby" /><label for="renang"> renang</label><br /> </fieldset> <input type="submit" value="submit" id="submit" /> </fieldset> </form> </body> </html>
Pemrograman Web
Page | 38
Bila listing kdoe diatas jalankan akan menghasilkan tampilan sebagai berikut :
Gambar 2.9 elemen form entri dan fieldset
c. Rangkuman.
Pada kegiatan belajar menyajikan komponen entri pilihandapat disimpulkan menjadi beberapa point penting seperti berikut :
 Data bisa diinputan dalam komponen entri pilihan, diantaranya input file, radio button, chexbox, select serta datalist.
 Komponen input file berfungsi untuk memasukan data file yang dibutuhkan kedalam sistem web yang dibuat
 Format tag HTML input file adalah sebagai berikut : <input type=file name=name accept=mime type list>
 Pada form input radio button hanya ada satu pilihan yang terseleksi
 Format tag HTML input radio button adalah sebagai berikut <input type=radio name=name value=value>
 komponen input checkbox digunakan sebgai masukan untuk data atau nilai pilihan dengan alternatif jawaban lebih dari 1 opsi pilihan.
 Format tag HTML input checkbox adalah sebagai berikut <input type=checkbox name=name value=value>
 Komponen input image bertujuan untuk memasukan file gambar yang dibutuhkan oleh sistem web, misalnya saja file gambar foto.jpg.
Pemrograman Web
Page | 39
 Format tag HTML dengan atribut image adalah sebagai berikut : <input type=image name=name src="url">
 Komponen input dengan tipe ‘select’ adalah komponen input dengan banyak pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan
 Komponen datalist memberikan dukungan autocomplete dasar untuk pilihan pada field input
 Name= “name” merupakan pemberian nama pada komponen input select sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut.