MODUL 8 BEKERJA DENGAN FORM

Pada modul ini, Praktikan akan mengetahui dan memahami tentang fungsi dan cara menggunakan fitur FORM yaitu metoda untuk menerima input atau masukan dari pengunjung web..

HTML memfasilitasi programer guna mendapatkan data dan berinteraksi dengan pengunjung web. Fitur tersebut adalah FORM. Terdapat beberapa cara untuk melakukan

hal tersebut, yaitu :  
1. FORM Membuat formulir
2. INPUT Meminta data dari pemakai (pengunjung)
3. TEXTAREA Meminta sekumpulan teks
4. SELECT Membuat daftar menu pilihan
5. OPTION Membuat menu pilihan
6. FIELDSET Membuat formulir yang terdiri dari beberapa bagian
7. LEGEND Membuat keterangan pada kotak form
8. LABEL Membuat keterangan untuk field (input)

8.1 Tag <FORM>

Tag <form> digunakan untuk menandakan awal pembuatan formulir dan diakhiri dengan </form>. Tag ini mempunyai 2 atribut utama, yaitu : action dan method. Perhatikan sintak form berikut :

<form action=”URL” method=get|post> formulir </form>

Action berisi URL tujuan eksekusi dari form ini, sedangkan Method merupakan metoda

eksekusi dari form.

8.2 Tag <input>

Tag <input> adalah perintah untuk meminta masukan (input) dari pengunjung web. Tag

ini beberapa atribut, antara lain:

  • TYPE=[ text | password | checkbox | radio | submit | reset | file | hidden | image | button ]

Maksudnya, TYPE dapat diisi dengan: text, password, checkbox, radio, submit, reset,

file, hidden, image atau button. Fungsinya sebagai berikut :

TypeKeterangan
TextMeminta input dari user berupa teks
PasswordMeminta input dari user, namun inputkan diinputkan disamarkan dengan ikon *.
CheckboxMeminta input dari user dalam bentuk kotak ceklist
RadioMeminta input dari user berupa pilihan
SubmitMengirimkan hasil input user ke file pada atribut action di tag form
ResetBerfungsi untuk mengosongkan from
FileMeminta input berupa file
HiddenMeminta input dari user namun data yang diinputkan disembunyikan
ButtonUntuk membuat tombol
8.3 Tag <select> dan <option>
Tag  <select> digunakan  untuk  membuat  input  dalam  bentuk  pilihan  berupa  menu

dropdown. List untuk item yang akan ditampilkan menggunakan tag <option>.

Sintak :

<select [atribut]>

<option [atribut]> konten 1</option>

<option [atribut]> konten 2</option>

<option [atribut]> konten n</option>

</select>

Atribut pada tag select :

Type Keterangan
Name Nama untuk menampung pilihan yang dipilih
Multiple Dapat memilih lebih dari satu dari daftar pilihan yang ada.
Size Jumlah pilihan yang terlihat.
Disabled Menonaktifkan pilihan

Atribut pada tag option :

Type Keterangan
Selected Menandakan pilihan yang terpilih secara default
Value Nilai pilihan
Disabled Menonatifkan pilihan

8.4 Tag <textarea>

Tag <textarea> digunakan untuk menerima input dari user dengan kapasitas lebih besar.

Fitur ini merupakan pengembangan dari tag <input type=text>. Biasanya digunakan

untuk buku tamu dan sebagainya.

Sintak : <textarea> konten </textarea>

Atribut utama pada tag ini adalah :

Type Keterangan
cols Menentukan jumlah karakter per kolomnya.
rows Menentukan jumlah baris.

8.5 Tag <fieldset>

Tag ini digunakan untuk membuat formulir yang terdiri atas beberapa bagi (mengelompokan form)

Sintak : <fieldset> form </fieldset>

Contoh :

PRAKTIKUM

Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil kesimpulan.

  1. Latihan 1 : Input dengan type text

Hasilnya :

2. Latihan 2 : Input dengan type password

Hasilnya :

3. Latihan 3 : Input dengan type radio

Hasilnya :


4. Latihan 4 : Input dengan type checkbox

Hasilnya :


5. Latihan 5 : Input dengan type file dan button

Hasilnya :

6. Latihan 6 : Input dengan type submit dan reset

Hasilnya :

7. Latihan 7 : Gabungan

Hasilnya :

8. Latihan 8 : Gabungan

<html>

<head>

<title>Atribut tag Form dan Input</title> </head>

<body><font face=”verdana” size=”2″> <form action=”input.php” method=”post”> <p><b>Tag input dengan atribut type=”text”</b><br>

<input type=”text” name=”teks_ku” size=”16″ maxlength=”20″><br>

Ini textbox dengan nama <i>teks_ku</i> ukuran <i>16 chr</i> dan maksimal karakrer yang dapat ditampung <i>20 chr(character)</i>.</p>

<p><b>Tag input dengan atribut type=”password”</b><br>

<input type=”password” name=”pass” size=”16″ maxlength=”20″<br>

Ini passwordbox dengan nama <i>pass</i> ukuran <i>16 chr</i> dan maksimal karakrer yang dapat ditampung <i>20 chr(character)</i>.</p>

<p><b>Tag input dengan atribut type=”radio”</b><br>

<input type=”radio” name=”radio_ku” value=”isi_1″>Radio 1 –> nama <i>radio_ku</i> isi/value <i>isi_1</i><br>

<input type=”radio” name=”radio_ku” value=”isi_2″>Radio 2 –> nama <i>radio_ku</i> isi/value <i>isi_2</i><br>

<b>Jika nama radio tidak sama maka tidak dianggap satu pilihan. Untuk membuktikannya silahkan ganti salah satu nama dari radio diatas untuk mengetahui

perbedannya.</b></p>

<p><b>Tag input dengan atribut type=”checkbox”</b><br>

<input type=”checkbox” name=”checkbox_ku_1″ value=”isi_1″>Checkbox 1 -> nama<i>checkbox_ku_1</i> isi/value <i>isi_1</i><br>

<input type=”checkbox” name=”checkbox_ku_2″ value=”isi_2″>Checkbox 2 -> nama<i>checkbox_ku_2</i> isi/value <i>isi_2</i><p>

<p><b>Tag input dengan atribut type=”submit”</b><br> <input type=”submit” value=”Tombol Submit”><br>

Tombol ini berguna untuk mem-post(mengirimkan variabel dan isi variabel yang ada pada form ke file tujuan (action=”file_tujuan”))</p>

<p><b>Tag input dengan atribut type=”reset”</b><br> <input type=”reset” value=”Bersihkan”><br>

Tombol ini berguna untuk membersihkan seluruh tulisan yang ada pada seluruh isian form. Coba isikan semua textbox dan radio lalu tekan tombol ini.</p>

<p><b>Tag input dengan atribut type=”hidden”</b><br> <input type=”hidden” value=”data_ku” name=”data”>

Tipe ini berguna jika si webmaster menginkan variabel yang sifatnya sudah didefinisikan. Dan tidak menampilkan output apapun.</p>

<p><b>Tag input dengan propeti type=”image”</b><br>

<input            type=”image”              src=”letak_file_gambar_anda”             height=”98″

width=”98″><br> Image memiliki fungsi yang sama dengan type submit</p>

</form></font>

</body>

</html>

Hasilnya :

9. Latihan 9 : Tag <fieldset> dan <legend>

Hasilnya :


10. Tag <textarea>

Hasilnya :

11. . Tag <select> dan <option>

Hasilnya :

12. Tombol


Hasilnya :

REFERENSI LANJUTAN :

  1. http://www.w3schools.com/html/html_forms.asp
  2. http://www.w3schools.com/tags/tag_form.asp
  3. http://www.javascript-coder.com/html-form/html-form-tutorial-p1.phtml
  4. http://htmldog.com/guides/html/beginner/forms/
  5. www.eplusgo.com/html/html-form/