Mengelolah form

MENGELOLA FORM

Form adalah bentuk pengaplikasian untuk mengisi data user pada halaman web yang kemudian data tersebut diolah menurut kepentingan. Form memiliki bermacam komponen, antara lain: text field, hidden field, textarea, checkbox, radio button, radio group, list/menu, jump menu, image field, file field, button, label dan fieldset.

FORM

Langkah awal dalam membuat form adalah mencantumkan tag form <form>…..</form> pada halaman. Diantara tag – tag  tesebut  terdapat beberapa komponen sehingga terbentuklah suatu form. Sedangkan parameter utama yang digunakan dalam form adalah Action dan Method. Action merupakan alamat yang akan dituju untuk mengeksekusi form dan Method merupakan metode pengiriman form, yaitu get dan post.

Untuk memformat bentuk form, ikuti langkah berikut :

1.     Klik tombol form (  ) Forms insert bar

2.     Pada Design view, muncul garis merah putus-putus sebagai tanda kawasan form.

3.     Isikan parameter-parameter form pada Form Property Inspector dengan keterangan berikut:

·                     Form name, untuk memberi nama form

·                     Action, menentukan alamat yang dituju untuk mengeksekusi form

·                     Method, menentukan metode pengiriman form

·                     Target, menentukan target halaman yang dipakai bila menggunakan frame

·                     Enctype, menentukan tipe kode MME dari data yang terkirim

4.     Isikan komponen-komponen form didalamnya.

TEXT FIELD

Textfield merupakan komponen form yang berfungsi untuk menuliskan teks pada satu baris dengan panjang dan batas tertentu.

Untuk menyisipkan Textfield, ikuti langkah berikut:

1.     Tentukan lokasi yang akan disisipkan Textfield pada area form

2.     Klik tool Textfield ( ) pada forms insert bar

3.     Muncul jendela dialog Input Tag Accessibilty attributes dengan pilihan pengisian label dengan penjelasan berikut:

·                     Label, untuk memberikan nama label Textfield

·      Style, merupakan gaya penulisan label : Wrap with label text (penulisan tag label sejajar). Attach label tag using “for” attributes (penulisan atribut for pada label), No label tag (tidak dituliskan tag label). Untuk mengetahui perbedaannya. Anda dapat melihatnya pada bagian code-nya.

·      Position, untuk mengatur letak label: Before form item (label sebelum Textfield). After form item (label sesudah Texfield).

4.     Klik OK jika pengaturan table label selesai.

5.     Seleksi dan atur Textfield beserta parameter-parameternya pada Textfield Property Inspector

·        Berikan nama Textfield dan tuliskan pada kotak dibawah Textfield

·        Char width, menentukan panjang karakter

·        Max chars, menentukan maksimal panjang karakter

·        Type, menentukan tipe Textfield. Biarkan bertipe Single line karena ini adalah tipe dengan satu baris

·        Init val, memberi isi pada Textfield

·        Class, memberi tipe class CSS

HIDDEN FIELD

Hidden Field merupakan satu-satunya komponen form yang tesembunyi bila ditampilkan pada browser. Komponen ini biasanya digunakan untuk pemrograman sebagai variable didalam form. Parameter Hidden Field hanya berupa nama dan isi yang selanjutnya dapat anda proses menurut kebutuhan.

Untuk membuat Hidden Field, ikuti langkah-langkah berikut:

1.     Tentukan lokasi yang akan diberikan hidden field yang masih berada dalam kawasan form

2.     Klik tool Hidden Field (  ) pada Forms insert bar

3.     Pada halaman muncul tanda Hidden Field (  ) yang berwarna kuning

4.     Isikan parameter-parameternya pada Hidden Field Property Inspector

·                     Berikan nama pada kotak dibawah Hidden Field

·                     Value, merupakan isi dari Hidden Field

TEXTAREA

Textarea merupakan bentuk lain dari Textfield yang memiliki banyak baris dan ditentukan batas kolomnya. Teks yang dimasukkan dalam Textarea biasanya berupa kumpulan kalimat.

Untuk membuat Textarea, ikuti langkah-langkah berikut:

1.     Tentukan lokasi untuk membuat Textarea yang masih berada dalam kawasan form

2.     Klik tool Textarea (  ) pada Forms insert bar

3.     Atur pemformatan label pada jendela dialog Input Tag Accessibility Attributes dan klik OK jika selesai

4.     Pada halaman, seleksi kotak Textarea dan atur parameter-parameternya pada Textarea Property Inspector

Berikut adalah keterangan dari parameter-parameter pada Textarea Property Inspector:

·                     Berikan nama pada Textarea pada kotak dibawah TextField

·                     Char width, menentukan lebar penulisan karakter

·                     Num Lines, menentukan jumlah baris penulisan karakter

·                     Wrap, menentukan panjang dalam suatu baris pada kotak Textarea

·      Type, menentukan tipe dari Textarea. Biarkan bertipe Multi Line karena ini adalah tipe dengan banyak baris

·                     Init val, memberi isi dari Textarea

·                     Class, merupakan tipe dalam class CSS

CHECKBOX

Checkbox digunakan untuk memberikan pilihan dengan tema tertentu dengan memilih lebih dari satu pilihan. Pemberian nama Checkbox harus sama apabila berada dalam satu tema, meskipun memiliki value yang berbeda-beda.

Untuk membuat Checkbox, ikuti langkah-langkah berikut:

1.     Tentukan lokasi yang akan dibuat Checkbox dan berikan tema/judulnya terlebih dahulu

2.     Klik tool Checkbox (    ) pada Forms insert bar

3.     Atur pemformatan label pada jendela dialog Input Tag Accessibility Attributes dan klik OK jika sudah selesai

4.     Seleksi kotak Checkbox dan atur parameter-parameternya pada Checkbox Property Inspector

Berikut adalah keterangan dari parameter-parameter pada Checkbox Property Inspector

·       Checkbox name, memberikan nama checkbox

·       Checked value, member isi dari checkbox

·       Initial state, status cek (pilihan), Ckecked (di cek) dan Unchecked (tidak di cek)

·       Class, merupakan style dari class CSS

5.     Lakukan dan ulangi langkah 1-4 untuk membuat Checkbox baru lainnya

RADIO BUTTON

Radio Button merupakan komponen form yang memberikan isi dengan cara memilih salah satu pada kelompok nama yang sama. Pemberian Checkbox ini biasanya berkaitan dengan pemberian status atau pilihan yang hanya mutlak mempunyai satu pilihan.

Untuk membuat Radio Button, ikuti langkah berikut:

1.     Tuliskan judul/tema dari Radio Button yang akan dibuat

2.     Tentukan lokasi untuk membuat Radio Button

3.     Klik tool Radio Button (   ) pada Form Insert bar

4.     Atur label radio button sesuai dengan isi pada Input Tag Accessibility Attributes dan klik OK jika sudah selesai

5.     Seleksi bulatan Radio Button dan atur parameter-parameternya pada Radio Button Property Inspector

6.     Pengaturan property  Radio Button sama dengan pengaturan Checkbox terutama pengaturan nama dan valuenya, atur sedemikian rupa

7.     Apabila diperlukan, buat Radio Button lagi dengan nama yang sama tapi dengan value yang berbeda dengan mengulangi langkah 1-6

RADIO GROUP

Radio Group merupakan fasilitas untuk membuat komponen Radio Button yang banyak dengan satu koordinasi supaya lebih mudah.

Untuk membuat Radio Group, ikuti langkah berikut:

1.     Tuliskan judul/tema radio group yang akan dibuat

2.     Seleksi lokasi yang akan dibuat radio group

3.     Klik tool Radio Group (  ) pada Forms insert bar

4.     Muncul jendela dialog Radio Group dengan parameter-parameternya

 Berikut adalah keterangan dari parameter-parameter Radio Group:

• Name, memberikan nama Radio Group
• Radio buttons, untuk menambah atau mengurangi Radio button beserta label dan value-nya. Klik tool plus (   ) untuk menambahkan Radio Button dan klik tool minus (   ) untuk mengurangi Radio Button. Ganti label dan value-nya menurut kebutuhan
• Lay out using, untuk menggunakan media, yaitu line breaks (<br>tags) (menggunakan pergantian baris) dan table (menggunakan table)

• Bila diperlukan, atur item Radio Group satu per satu dengan cara pengaturan yang sama pada Radio Button

LIST/MENU

Fungsi List/Menu sama dengan fungsi radio, yaitu untuk memilih salah satu pilihan dari daftar pilihan yang disediakan. Pilihan tersebut akan dijadikan satu dalam combo box dan akan terbuka jika tombol panah bawahnya diklik.

Untuk membuat List/Menu, ikuti langkah berikut:

1.     Seleksi lokasi yang akan dibuatkan List/Menu dan masih dalam kawasan form

2.     Klik tool List/Menu (  ) pada Forms insert bar

3.     Atur penamaan label dan pengaturannya pada Input Tag Accessibility Attributes. Klik OK jika sudah selesai

4.     Tampak pada halaman kotak List/Menu beserta labelnya. Seleksi kotak List/Menu tersebut dan lihat List Property Inspector berikut dan atur parameter-parameternya.

Berikut adalah parameter-parameter pada List/Menu beserta keterangannya:

·       Berikan nama List/Menu pada kotak dibawah List/Menu

·       Type, menentukan tipe Menu atau List. Jika pilih Menu maka kotak hanya akan memiliki satu baris item saja, tapi jika pilih List maka kotak bisa memiliki lebih dari satu baris

·       Height, digunakan mengatur tinggi baris berdasarkan jumlah baris. Parameter ini aktif bila anda memilih tipe List

·       Selection, parameter ini aktif jika anda memilih tipe List. Klik cek Allow Multiple untuk mengijinkan pilihan lebih dari Satu

·       List Values…, untuk mengisi daftar

·       Class, memberikan style CSS

5.     Berikan daftar List/Menu dengan klik tombol List Values…

6.     Muncul jendela dialog List Values

7.     Berikan nama List/Menu dan isikan beserta value-nya. Untuk menambah item, klik tool plus() Dan untuk mengurangi klik tool minus ()

8.     Klik OK jika sudah selesai

JUMP MENU

Jump Menu merupakan bagian bentuk lain dari menu yang bisa melakukan link kehalaman. Komponen ini bisa berdiri sendiri tanpa berada dalam kawasan form karena sifatnya indefenden dan bisa link.

Untuk membuat Jump Menu, ikuti langkah berikut:

1.     Tentukan lokasi pembuatan Jump Menu

2.     Klik tool Jump Menu (  ) pada Forms inset bar

3.     Muncul jendela dialog Insert Jump Menu. Isikan parameter-parameternya.

Berikut adalah parameter-parameter Jump Menu beserta keterangannya :

• Menu Items, merupakan bagian-bagian menu. Klik tools plus () untuk menambah item atau klik tool minus () untuk mengurangi item.
• Text, untuk menuliskan teks item menu
• When selected, go to URL, alamat link halaman yang dituju bila memilih salah satu item
• Open URLs in, buka pada halaman, setting default pada Main window
• Menu Name, memberikan nama menu
• Option, pilihan Insert go button after menu (memberikan tombol Go setelah menu), selected first item after URL change (seleksi item dahulu setelah link berganti)

4.     Isikan item-item menu yang akan anda gunakan

5.     Klik OK jika sudah selesai

6.     Uji Jump Menu pada halaman browser (F 12)

IMAGE FIELD

Image Field merupakan komponen form berupa gambar yang bisa dijadikan suatu tombol Submit atau tombol Reset. Cara kerja Image Field ini sama dengan cara kerja Button. Tombol (button) akan bekerja saat diklik dengan cara Action menurut parameter form yang dibuat sebelumnya.

Untuk membuat Image Field, ikuti langkah berikut:

1.     Tentukan lokasi untuk membuat Image Field yang masih berada dalam kawasan form. Form sebelumnya telah diformat dengan isi parameter action

2.     Klik tool Image Field () pada Forms insert bar

3.     Muncul jendela dialog Select Image source dan pilih file gambar yang akan dijadikan sebagai Image Field

4.     Klik OK jika sudah memilih gambar. Gambar akan muncul pada halaman desain.

5.     Seleksi kotak gambar dan lihat propertinya pada ImageField Property Inspector

6.     Untuk menjadikan gambar sebagai tombol, ubah teks pada toolbox dibawah Image field menjadi Submit atau Reset. Pada contoh. Gambar diubah menjadi tombol Submit dengan Action link index.html

7.     Simpan dokumen dan lihat hasilnya pada browser (F 12). Halaman akan berganti bila gambar di klik.

FILE FIELD

Anda dapat menggunakan komponen form File Field untuk mencantumkan direktori file pada textbox yang selanjutnya digunakan untuk pengolaan form. Penggunaan File Field ini biasanya untuk Upload data, yaitu pengiriman data dari komputer (PC) ke sever.

Untuk membuat File Field, ikuti langkah berikut:

1.     Tentukan lokasi untuk pembuatan File Field, yang masih berada dalam kawasan form

2.     Klik tool File Field () pada Forms insert bar

3.     Atur penamaan label dan formatnya pada jendela dialog Input Tag Accessibility Attributes

4.     Kilik OK jika sudah selesai. Tampak File Field pada halaman desain.

5.     Atur property File Field pada FileField Property Inspector

6.     Simpan file dan uji pada browser

BUTTON

Button dalam komponen form merupakan tombol yang berfungsi mengirim data (submit) atau mengosongkan isi field dalam form (reset). Karena fungsinya paling akhir, maka letak button juga biasanya paling akhir. Pemanfaatan sifat Button juga dapat diaplikasikan kedalam bentuk gambar (image Filed) agar lebih variatif.

Untuk membuat Button, ikuti langkah berikut:

1.     Jika sudah dalam bentuk form, pilih lokasi untuk Button yang paling akhir

2.     Klik tool  Button () pada Form insert bar

3.     Atur penamaan label beserta pilihannya pada Input Tag Accessibility Attributes

4.     Klik OK jika sudah selesai. Tampak Button pada halaman

5.     Seleksi Button dan atur Propertinya pada Button Property Inspector. Berikut adalah property Button beserta keterangannya:

·                     Button name, untuk memberikan nama button

·      Value, untuk memberikan teks didalam button

·      Action, memberikan tipe/metode pada form. Submit untuk mengirimkan data. Reset untuk mengkosongkan isi field pada form dan None jika menginginkan tidak bertipe

·      Class, memberikan style CSS pada button

6.     Secara default, Button bertipe Submit. Jika menginginkan fungsi tombol menjadi Reset, pilih pada Action bertipe Reset

LABEL

Label digunakan untuk menambahkan label pada suatu field yang belum mempunyai label. Untuk memberikan label, ikuti langkah berikut:

1. Klik Tool label () pada forms insert bar.  Secara otomatis halaman menjafi Split view
2. Tuliskan label pada tempat yang disediakan pada halaman Code
3. jangan menggunakan tombol enter pada keyboard, tapi arahkan dan klik mouse pada halaman design.

FIELDSET

Fieldset merupakan pengolompokan field-field menurut kategori pada suatu halaman form. Pengelompokan ini tidak harus dilakukan karena Fieldset hanya berpengaruh pada layar tambah form.

Untuk membuat Fieldset, ikuti langkah berikut:

1.     Rencanakan terlebih dahulu field-filed yang akan dikelompokkan menurut kategori masing-masing

2.     Klik tool Fieldset () pada Forms insert bar

3.     Muncul jendela dialog Fieldset, isikan nama Legend. Legend merupakan teks yang nanti tertulis diatas garis fieldset.

4.     Klik OK tampak pada halaman garis Fieldset beserta nama Legend-nya. Isikan field-field yang dibutuhkan diantara garis Fieldset

5.     Lihat hasil pembentukan field pada browser (F 12)