Rabu, 25 Februari 2015

Menyajikan Komponen Entri Pilihan

Menyajikan Komponen Entri Pilihan
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.
a.    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
b.    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.
c.    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).
Format tag HTML-nya adalah sebagai berikut :
<input type=checkbox name=name value=value>
<input type=checkbox name=name value=value checked>
d.    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">
e.    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>
f.     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>

Selasa, 24 Februari 2015

Contoh 1 cara menggunakan komponen entri pilahan


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">&nbsp;</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>
Hasilnya :