praktek 3 form

http://kuliah.msyani.com Pemrograman Web

Form 4-1

4 FORM

Overview

Untuk dapat berinteraksi secara lebih menarik, dalam dokumen HTML harus

mampu menyediakan fasilitas yang dapat menerima masukan atau isian data

dari user. Data isian dari pengguna ini untuk kemudian dapat diproses lebih

lanjut menjadi informasi yang dibutuhkan baik oleh user maupun oleh pemilik

web itu sendiri. Pengguna web dapat memasukkan inputan pada dokumen

HTML melalui elemen form.

Tujuan

1. Membuat form pada dokumen HTML 2. Mengerti cara penggunaan form pada halaman dokumen HTML. 3. Mampu menggunakan Input Field sesuai kegunaannya.


Form 4-2

4.1 Form

Form dalam HTML digunakan untuk menerima masukan atau isian dari

user untuk kemudian diolah lebih lanjut menjadi informasi yang dibutuhkan,

baik oleh user ataupun pihak yang mempunyai web. Elemen dari form HTML

adalah yang menunjukkan awal dari suatu form HTML dan diakhiri

dengan . Dalam sebuah dokumen dapat mempunyai lebih dari satu

form HTML.

Kegunaan Form

Berikut ini beberapa contoh kegunaan Form dalam web:

Memperoleh data-data user baik nama, alamat dan data lainnya.

Untuk mendaftar pada service yang di sediakan.

Memperoleh informasi pembelian secara online.

Memperoleh feedback dari user mengenai website anda.

Sintak penulisan form adalah:

elemen-elemen FORM

Tag digunakan untuk membuat form dalam dokumen HTML.

Tabel 4-1 Jenis- Jenis Atribut dalam Tag

Atribut Deskripsi

METHOD Menentukan bagaimana data akan di kirim ke server.

GET data akan di kirim dengan menggunakan query string pada URL.

POST data akan di kirim ke server sebagai block data ke script.

Syntax:

METHOD=POST|GET

ACTION Menentukan lokasi dari script yang akan memproses data dari

form

Syntax:

ACTION=URL


Form 4-3

4.2 Membuat Input Field

Dalam form, kita dapat membuat input atau kotak isian yang dapat diisi

dengan suatu data oleh user. Tag yang digunakan untuk membuat kotak isian

adalah tag . Tipe-tipe input yang tersedia adalah sebagai berikut :

1. Type=TEXT Kotak isian bertipe teks ini menerima data karakter (default) sebanyak

satu baris.

Tabel 4-2 Jenis- Jenis Atribut pada Input Field Tipe Text

Atribut Deskripsi

Name Nama variable dari control yang akan menyimpan nilai

dari input field

Type

Value Untuk memberikan value ke input field

Size Jumlah karakter dari input field

Maxlength jumlah karakter maksimum untuk input field

Contoh :

Tampilan :

2. TYPE=PASSWORD Kotak isian bertipe password ini menerima data karakter, tapi tidak akan

ditampilkan karena kebutuhan masukan password yang bersifat rahasia.

Atribut nya sama dengan input field type text.

Contoh :

Tampilan :

3. TYPE=CHECKBOX Suatu inputan yang memungkinkan kita memilih satu atau lebih pilihan

atau tidak memilih sama sekali, dengan memberikan tanda pada checkbox

tersebut.


Form 4-4

Tabel 4-3 Jenis-Jenis Atribut pada Input Field Tipe Checkbox

Atribut Deskripsi

Checked Untuk memberi default check

Name Nama variable dari control yang akan menyimpan nilai dari input field

Type

Value Untuk memberikan value ke input

Size Ukuran control

Tampilan :

4. TYPE=RADIO Hanya mengijinkan memilih satu dari banyak pilihan. Setiap radio button

control harus memiliki nama yang sama, sehingga user hanya bisa memilih

satu option saja. Radio button juga harus secara explisit memberikan nilai

ke atribut value.

Tabel 4-4 jenis-Jenis Atribut pada Input Field Tipe Radio

Atribut Deskripsi

Checked Untuk memberi default check

Name Nama variable dari control yang akan menyimpan

nilai dari input field

Type

Value Untuk memberikan value ke input

Size Ukuran control

Tampilan :

5. TYPE=BUTTON

Tabel 4-5 Jenis-Jenis Atribut pada Input Field Tipe Button

Atribut Deskripsi

Name Nama variable dari kontrol yang akan menyimpan



Form 4-5

Type : Mengirimkan form ke URL yang telah didefinisikan pada atribut

ACTION pada tag

: Browser mengembalikan field dalam form ke dalam nilai

default(mengosongkan nilai semua elemen form).

Value Memberikan nama label pada button

Size Menentukan lebar button

Contoh :

Tampilan :

Tampilan :

6. Tag Tag ini digunakan untuk membuat input teks yang lebar, bisa menampung

lebih banyak karakter dibanding input field bertipe TEXT.

Teks yang berada diantara tag dan secara

default akan ditampilkan sesuai aslinya.

Tabel 4-6 Jenis-Jenis Atribut pada Input Tipe Textarea

Attribute Deskripsi

Name Nama variable dari control yang akan menyimpan nilai

dari input field

Rows Jumlah baris

Cols Lebar kolom text area

Wrap WRAP=PHYSICAL tampilan word-wraps. Default WRAP=OFF

Contoh :


Form 4-6

Tampilan :

7. TYPE=IMAGE NAME=SUBMIT SRC= Mengirimkan informasi form seperti halnya tombol Submit, hanya

berbentuk gambar.

Contoh :

Tampilan :

8. Tag dan Digunakan untuk membuat input field yang berbentuk pilihan. Tag

dan ini harus digunakan secara bersama-

sama. Tag ini mendefinisikan pilihan dari item-item. Tag ini

dipasangkan diantara tag dan .

Tabel 4-7 Jenis-Jenis Atribut Pada Input Field Tipe Select

Atribut Deskripsi

Name Nama variable dari control yang akan menyimpan


Value Teks yang ditampilkan pada tombol, default =

Submit Query

Size Untuk menentukan jumlah baris yang di tampilkan

Multiple Untuk menentukan apakah user boleh memilih lebih

dari satu option atau tidak.

Selected Pilihan ini dipilih secara default.


Form 4-7

Contoh :

Web Developer

Web Designer

Web Administrator

Web Database

Tampilan :

Jika size = "3", maka tampilannya sebagai berikut :

Rangkuman

1. Form digunakan untuk menerima masukan berupa informasi atau data dari pengguna.

2. User memasukkan informasi melalui sejumlah elemen yang disebut kontrol. Kontrol ini dapat berupa input field TEXT, PASSWORD,

CHECKBOX, RADIO BUTTON, BUTTON, TEXTAREA, LIST MENU.

3. Terdapat dua atribut metoda penanganan form, yaitu metoda GET dan metoda POST.

Jika di klik panah ke bawah


Form 4-8

Latihan

1. Apa fungsi dari form pada dokumen HTML? 2. Apa perbedaan checkbox dan radio button? 3. Apakah fungsi dari tombol Submit dan Reset? 4. Apa perbedaan penanganan form menggunakan metoda GET dan POST? 5. Buatlah dokumen HTML seperti tampilan di bawah ini, jika ada

penekanan tombol kirim, maka hasilnya akan dikirimkan ke e-mail anda :

praktek 3 form

Documents