Komponen
Entri Pilihan
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>
</html>
Listing kode diatas menghasilkan tampilannya sebagai berikut
:
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
<!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 :
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"
value="Ijin">Ijin<br>
<input type="checkbox"
name="vehicle" value="Tanpa">Tanpa
Keterangan<br>
</form>
</body>
</html>
Listing kode diatas menghasilkan tampilannya sebagai berikut
:
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>
<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 :
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>
<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>
Hasil dari halaman form di atas adalah sebagai berikut :
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">
<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.
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>
<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"
/>
<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>
<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"> </td>
<td><input
type="submit" name="button" id="button"
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.
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>
<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>
<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>
Bila listing kdoe diatas jalankan akan menghasilkan tampilan
sebagai berikut :
