Monday 7 November 2011

4. Modul Kegiatan HTML Membuat Form dan Elemen Input


4. Modul Kegiatan HTML
Membuat Form dan Elemen Input

4.1   Pokok Bahasan
1.      Pengenalan Form
2.      HTML Input Element
3.      Membuat Form

4.2   Tujuan Praktikum
1.      Praktikan mampu memahami maksud dari penggunaan Form pada Dokumen HTML dan mengetahui Elemen-elemen penginputan data pada HTML beserta metode pengiriman data.
2.      Praktikan mampu membuat satu halaman Web sederhana berisi Form dengan memanfaatkan Elemen-elemen untuk Input Data pada HTML.

4.3   Petunjuk Praktikum
1.      Praktikan diharapkan mempersiapkan diri dengan mempelajari dan memahami teori HTML yang diberikan pada saat perkuliahan teori.
2.      Kegiatan praktikum dilakukan dengan cara mempelajari dasar teori dan melakukan langkah-langkah yang diberikan pada subjudul Dasar Teori dan Kegiatan.
3.      Pada setiap modul, Praktikan wajib mengerjakan jurnal praktikum berupa laporan dengan format yang telah ditentukan dan diserahkan kepada Asisten Laboratorium.

4.4   Dasar Teori dan Kegiatan
1.      Pengenalan Form
Untuk sebuah halaman web yang berinteraksi dengan user, keberadaan form sangat penting. Sifat Dinamis sebuah halaman web dapat dilihat dari ada atau tidaknya form. Form adalah tempat disimpannya Form Element, Form Element adalah tempat dimana user bisa memasukan sejumlah informasi untuk diolah. Artinya, Form dapat dimaksudkan sebagai suatu cara yang digunakan oleh server untuk meminta informasi atau meminta umpan balik atau menerima sejumlah masukan dari user untuk diproses pada web server melalui sejumlah Form Element seperti Text Fields, TextArea Fields,Drop-Down Menus, Radio Buttons, Checkbox dan lainnya. Syntak form adalah <form></form>, diantara kedua Tag form tersebut diletakkan Form Element dengan tags <input> atau <textarea> atau <select> tergantung dari cara yang akan digunakan untuk mengoleksi data. Masing-masing Tag tersebut memiliki atribut dan value tertentu.

2.      Form Element
Form Element adalah unsur-unsur yang diterapkan pada struktur form, sebagai berikut:
Tag
Atribut
Keterangan Value
<form>
Action
berisi  URL atau lokasi file yang akan memproses data dari form, misalnya: action=”proses.php”

Method
berisi POST atau GET yaitu suatu aturan yang digunakan untuk mengirimkan data ke server, misalnya: method=”post | get”

Enctype
mendefinisikan type encoding data-data yang di input, misalnya: enctype=”text/plain”

Name
Memberikan nama untuk form apabila dalam satu halaman terdapat 2 form yang berbeda, misalnya: name=”form1”
Atribut Method memiliki 2 nilai yaitu POST dan GET. Perbedaan antara kedua metode tersebut terletak pada metode pengiriman data yang digunakan. Masing-masing memiliki kelebihan dan kekurangan. Perbedaannya dapat dilihat pada URL Address pada toolbar browser.
Metode GET, mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL yang ditunjuk. Pengiriman informasi pada Form dengan metode GET dapat dijelaskan sebagai berikut: (1) Data dikirimkan ke server menyatu dengan string URL, (2) Data yang dikirim terlihat pada URL address, (3) Tidak aman untuk data yang seharusnya rahasia, (4) Cocok untuk data yang sedikit.
Metode POST, mengirimkan datanya secara terpisah. Pengiriman informasi pada Form dengan metode POST dapat dijelaskan sebagai berikut: (1) Data dikirimkan terpisah dengan string URL, (2) Data yang dikirimkan tidak terlihat pada URL address, (3) Untuk sementara bisa dikatakan aman, (4) Cocok untuk data dalam jumlah besar dan kecil.


<form name="Form1" method="post" action="proses1.php"
      enctype="application/x-www-form-urlencoded" runat="server">
  <!--bagian untuk form element-->
</form>

<form name="Form2" method="get" action="proses2.php"
      enctype="multipart/form-data">
  <!--bagian untuk form element-->
</form>

<form name="Form3" method="post" action="proses3.php"
      enctype="text/plain">
  <!--bagian untuk form element-->
</form>


3.      HTML Input Element
HTML input element merupakan komponen-komponen yang bisa diterapkan pada Form Elemen, misalnya: Input Text: <input type=”text”>, Password: <input type=”password”>, Radiobutton: <input type=”radio”>, Checkbox: <input type=”checkbox”>, Hidden: <input type=”hidden”>, File: <input type=”file”>, Submit: <input type=”submit”>, Reset: <input type=”reset”>, List: <select><option></select>, Textarea: <textarea></textarea>.

Property Elemen Input
Nama
TEXT
Fungsi
Menerima masukan user berupa teks
Property
Name: Menyatakan nama dari item masukan. Digunakan sebagai acuan untuk memperoleh nilai masukan dari user pada file yang merespon data form. Type: Menyatakan type masukan dari item masukan. Size: Menyatakan ukuran lebar kotak masukan secara visual. Maxlength: Menyatakan jumlah maksimal karakter yang dapat diketikan oleh user. Value: Properti untuk memberikan nilai inisial (awal) dari input
Sintaks
<input name="" type="text" size="" maxlength="" value="" disabled="true" readonly="true">

Nama
PASSWORD
Fungsi
Menerima masukan user berupa teks, namun hasil masukan perkarakter dari user ditampilkan dalam bentuk **
Property
Name: Menyatakan nama dari item masukan. Digunakan sebagai acuan untuk memperoleh nilai masukan dari user pada file yang merespon data form. Type: Menyatakan type masukan dari item masukan. Size: Menyatakan ukuran lebar kotak masukan secara visual. Maxlength: Menyatakan jumlah maksimal karakter yang dapat diketikan oleh user. Value: Properti untuk memberikan nilai inisial (awal) dari input
Sintaks
<input name="" type="password" value="" size="" maxlength="">

Nama
LIST
Fungsi
Menerima masukan user berupa pilihan teks dari daftar nilai yang telah didefinisikan sebelumnya.
Property
Name: Menyatakan nama dari item masukan. Digunakan sebagai acuan untuk memperoleh nilai masukan dari user pada file yang merespon data form. Size: Menyatakan ukuran tinggi kotak masukan secara visual. Maxlength: Menyatakan jumlah maksimal karakter yang dapat diketikan oleh user. Value: Properti untuk memberikan nilai pada setiap entri pada list. Properti ini dimiliki oleh tags <option>. Multiple: Jika property ini tidak digunakan, maka hanya satu entry pada list yan dapat dipilih. Dengan menambahkan property ini maka user dapat memilih lebih dari satu entri pada list. Properti ini tidak memiliki nilai atau value. Selected: Menyatakan sebuah entri dipilih pada list. Properti ini dimiliki oleh tag <option>. Properti ini tidak memiliki nilai atau value
Sintaks
<select name="select" size="1">
<option> Pilihan1 </option>
<option> Pilihan1 </option>
<option> Pilihan1 </option>
</select>

Nama
RADIOBUTTON
Fungsi
Menerima masukan user berupa klik pada mouse. Masukan jenis ini mengharuskan user untuk memilih salah satu dari sejumlah pilihan yang diberikan.
Property
Name: Menyatakan nama dari item masukan. Digunakan sebagai acuan untuk memperoleh nilai masukan dari user pada file yang merespon data form. Type: Menyatakan type masukan dari item masukan. Value: Properti untuk memberikan nilai pada setiap radiobutton atau pilihan. Checked: Menyatakan sebuah pilihan dipilih pada sekumpulan radiobutton
Sintaks
<input name="" type="radio" value="" checked>



Nama
TEXTAREA
Fungsi
Menerima masukan user berupa teks dengan ukuran relatif besar. Media input yang berupa kotak memudahkan user untuk memberi masukan (ketik) berupa skrip teks.
Property
Name: Menyatakan nama dari item masukan. Digunakan sebagai acuan untuk memperoleh nilai masukan dari user pada file yang merespon data form. Cols: Menyatakan ukuran lebar dari textarea (kolom) dengan satuan lebar karakter. Rows: Menyatakan ukuran tinggi dar textarea (baris) dengan satuan tinggi karakter. Wrap: Menentukan bagaimana textarea menampilkan rangkaian teks yang melebihi lebar textarea, baik secara visual maupun secara fisik. Memiliki 3 nilai yaitu OFF, VIRTUAL dan PHYSICAL.
Sintaks
<textarea name="" cols="" rows="" wrap="VIRTUAL"> </textarea>

Nama
CHECKBOX
Fungsi
Menerima masukan user berupa klik pada mouse. Masukan jenis ini memperbolehkan user untuk memilih lebih dari satu checkbox dari sejumlah pilihan yang diberikan.
Property
Name: Menyatakan nama dari item masukan. Digunakan sebagai acuan untuk memperoleh nilai masukan dari user pada file yang merespon data form. Type: Menyatakan type masukan dari item masukan. Value: Properti untuk memberikan nilai pada setiap checkbox atau pilihan. Checked: Menyatakan sebuah pilihan dipilih
Sintaks
<input name="" type="checkbox" value="" checked>

Nama
HIDDEN
Fungsi
Mengirimkan sebuah data yang secara visual tidak terlihat/tersembunyi.
Property
Name: Menyatakan nama dari item masukan. Digunakan sebagai acuan untuk memperoleh nilai masukan dari user pada file yang merespon data form. Type: Menyatakan type masukan dari item masukan. Value: Properti untuk memberikan nilai dari data yang dikirim.
Sintaks
<input name="" type="hidden" value="">

Nama
FILE
Fungsi
Menerima masukan user berupa informasi lokasi sebuah file di hardisk lokal.
Property
Name: Menyatakan nama dari item masukan. Digunakan sebagai acuan untuk memperoleh nilai masukan dari user pada file yang merespon data form. Type: Menyatakan type masukan dari item masukan. Size: Menyatakan ukuran lebar kotak masukan secara visual.
Sintaks
<input type="file" name="" size="">





Nama
SUBMIT
Fungsi
Mengirimkan semua data pada form dimana tombol submit berada, ke file tujuan yang akan merespon. Semua data yang dimasukan oleh user tidak akan dikirim sebelum tombol submit di klik.
Property
Name: Menyatakan nama dari tombol submit. Type: Menyatakan type dari tombol. Value: Properti untuk memberikan label pada tombol, yakni teks yang muncul pada tombol. Jika nilai ini tidak didefinisikan, maka secara default browser akan menampilkan teks “Submit” pada tombol.
Sintaks
<input type="submit" value="Submit" name="">

Nama
BUTTON
Fungsi
Sama dengan submit, mengirimkan semua data pada form dimana tombol button berada, ke file tujuan yang akan merespon. Semua data yang dimasukan oleh user tidak akan dikirim sebelum tombol button di klik.
Property
Name : Menyatakan nama dari tombol button. Type : Menyatakan type dari tombol. Value : Properti untuk memberikan label pada tombol, yakni teks yang muncul pada tombol. Jika nilai ini tidak didefinisikan, maka secara default browser akan menampilkan teks “Submit” pada tombol, karena Type button biasanya digunakan untuk memanggil objek fungsi yang dibuat untuk verifikasi data missal Javascript.
Sintaks
<input type="button" value="Submit" name="">

Nama
RESET
Fungsi
Menghapus semua isian pada form dimana tombol reset berada. Tombol ini digunakan untuk mengulang masukan user.
Property
Name : Menyatakan nama dari tombol submit. Type : Menyatakan type dari tombol. Value : Properti untuk memberikan label pada tombol, yakni teks yang muncul pada tombol. Jika nilai ini tidak didefinisikan, maka secara default browser akan menampilkan teks “Submit” pada tombol.
Sintaks
<input type="Reset" value="Reset" name="">

4.      Membuat Form
Penggunaan Form dalam suatu situs dapat juga berarti bahwa situs tersebut bersifat dinamis dan interaktif. Yang perlu diperhatikan dalam perancangan sebuah form adalah penggunaan elemen-elemenya harus tepat. Pembatasan ukuran dari informasi yang diketikkan oleh pengguna juga perlu diperhatikan, karena sebuah form juga bisa menjadi senjata untuk melakukan kejahatan internet misalnya Deface. Karena form hanyalah media input data biasa, maka sistem tidak bisa memeriksa secara langsung validitas dari data yang di input sebelum tombol Submit/Button di klik. Agar nilai informasi yang dikirimkan dari sebuah form adalah nilai yang dibutuhkan oleh sistem, maka diperlukan Validasi terhadap data input yang dikirim dari form. Validitas data dapat diperiksa melalui script pada Client Side Programming menggunakan Javascript atau validitas dilakukan pada server dengan Server Side Programming menggunakan PHP/JSP/ASP.
Tags-tags Form dapat disisipkan diantara tags-tag pembentukan tabel, hal ini dimaksudkan agar tampilan form pada browser tidak acak-acakan dan untuk alasan Estetika.
Contoh1: Form dengan HTML Input Elemen
Modul4-1.html

<html>
<head>
<title>Contoh Form dengan HTML Input Element</title>
</head>
<body>
<font size="6">Contoh Form 1</font>
<form method="POST" action="#">
Input Text:<input type="text" name="ketek" size="30"><br/>
Password:<input type="password" name="rahasia" size="30"><br/>
Radiobutton:
  <input type="radio" name="nm1" value="radio1" checked>Radioku
  <input type="radio" name="nm1" value="radio2">Radiomu<br/>
List:
  <select size="1" name="kelek">
    <option>Select1</option>
    <option>Select2</option>
    <option>Select3</option>
  </select><br/>
Checkbox:<br/>
  <input type="checkbox" name="cebok" value="cebok1">Check1
  <input type="checkbox" name="cebok" value="cebok2">Check2<br/>
  <input type="checkbox" name="cebok" value="cebok3">Check3
  <input type="checkbox" name="cebok" value="cebok4">Check4<br/>
Textarea:<br/>
  <textarea rows="5" cols="30" name="ketekarea"></textarea><br/>
File  :<input type="file" size="20" name="fail"><br/>
Hidden:<input type="hidden" size="20" name="nyumput"><br/>
Button:
  <input type="submit" value="Submit" name="tombol1">
  <input type="reset" value="Reset" name="tombol2"><br><br>
</form>
</body>
</html>



Contoh2: Form dengan HTML Input Elemen
Modul4-2.html

<html>
<head>
<title>Contoh Form dengan HTML Input Element</title>
</head>
<body>
<font size="6">Contoh Form 2</font>
<form method="GET" action="#">
Input Nama: <input type="text" name="nama" size="30"><br/>
Input Email: <input type="text" name="email" size="50"><br/>
Input Pesan:<br/>
<textarea rows="5" cols="30" name="pesan"></textarea><br/>
<input type="submit" value="Submit" name="tombol1">
<input type="reset" value="Reset" name="tombol2"><br/><br/>
</form>
</body>
</html>




Contoh3: Penggunaan Form dalam Tabel
Modul4-3.html

<html>
<head>
<title>Form Dalam Tabel</title>
</head>
<body>
<font size="6">Contoh Form 3</font>
<form method="POST" action="#">
 <table bgcolor="#cccccc">
   <tr>
     <td>Nama</td>
     <td><input type="text" name="nama"></td>
   </tr>
   <tr>
     <td>Jenis Kelamin</td>
     <td>
<input type="radio" name="kel" value="L" checked >Laki-Laki<br/>
<input type="radio" name="kel" value="P">Perempuan
     </td>
   </tr>
   <tr>
     <td>Alamat</td>
     <td><textarea name="alamat"></textarea></td>
   </tr>
   <tr>
     <td>Pekerjaan</td>
     <td>
       <select name="job">
       <option value="plj">Pelajar</option>
       <option value="mhs">Mahasiswa</option>
       <option value="dos">Dosen</option>
       <option value="wir">Wiraswasta</option>
       <option value="bar">Baramaen</option>
       </select>
     </td>
   </tr>
   <tr>
     <td>Hobby</td>
     <td>
  <input type="checkbox" name="hoby[]" value="baca">Membaca<br/>
  <input type="checkbox" name="hoby[]" value="masak">Memasak<br/>
  <input type="checkbox" name="hoby[]" value="lamun">Melamun<br/>
     </td>
   </tr>
   <tr>
     <td></td>
     <td>
       <input type="submit" value="KIRIM" name="kirim">
       <input type="reset" value="HAPUS" name="hapus">
     </td>
   </tr>
 </table>
</form>
</body>
</html>



4.5   Jurnal Praktikum
Buatlah Satu dokumen dengan nama Tugas-xxx.html (xxx diisi dengan NPM anda) mengenai formulir untuk menerima input data sebagai berikut:
Nama Depan
Nama Belakang
Gelar
Tempat Lahir
Tanggal Lahir (DD-MM-YYYY)
Jenis Kelamin
Alamat
Nomor Telepon
Email
Hobby
Foto (Load File)
Agama
Status Perkawinan
Golongan Darah
Nomor KTP
Pekerjaan
Alamat Kantor
No Telepon Kantor
No Fax
Pendidikan Terakhir
Riwayat Kesehatan
Program Studi
Tanggal Lulus
IPK
Nama Ayah
Pekerjaan Ayah
Nama Ibu
Pekerjaan Ibu
Nama Istri
Pekerjaan Istri
Jumlah Anak

Kelompokkan data-data diatas sesuai jenis datanya, lalu terjemahkan kedalam sebuah form yang berisi elemen form untuk menampung data-data tersebut dengan menggunakan dan memanfaatkan materi yang telah anda pelajari pada modul praktikum untuk Pengaturan Teks, Enumerasi, Link, Menyisipkan Gambar, Tabel dan Form.

Penilaian diberikan berdasarkan:
-          Ketepatan dalam pengelompokkan data
-          Ketepatan dalam memilih elemen form untuk masing-masing data
-          Kesesuaian dalam penentuan Size masing-masing elemen form
-          Adanya fasilitas penjelasan
-          Rapih, Mudah dipahami, Interaktif, dan MENARIK!

Jurnal Praktikum dikumpulkan dalam bentuk:
a.       Laporan yang berisi Source Code dan Print Screen tampilan tugas anda pada browser. Laporan wajib menggunakan kertas A4, Format laporan tanyakan ke Asisten!
b.      File Tugas diperlihatkan dan diserahkan pada Asisten Laboratorium.

Tugas dikerjakan sendiri-sendiri, tidak diperkenankan melakukan Copy-Paste-Replace terhadap tugas rekan anda. Apabila ditemukan Plagiat (antar teman sekelas atau antar teman beda kelas), maka semua tugas yang ”Sama” tersebut dianggap batal/ tidak mengumpulkan!

No comments: