Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan form.
MATERI:
Element FORM, Element INPUT, Element SELECT, Element OPTION, Element TEXTAREA
ELEMENT FORM
Element FORM berfungsi untuk mendefinisikan form interaktif. Element ini mempunyai attribute yaitu action, dan method. Attribute action berisikan aksi terhadap form yang dikirim (URI) dan attribute method berisikan metode form melakukan proses pengiriman(GET/POST).
Sintaks:
HTML 5 (Membuat Form)
filed in Aplikasi IT, Kuliah, Windows on Aug. 27, 2010
10.1 Form
Form adalah suatu cara untuk mejadikan halaman web menjadi lebih interaktif , karena akan mendaptakan umpan balik dari pengunjung situs web. Form dapat digunakan untuk membuat buku tamu, formulir pemesanan, survey, meminta komentar dan lain sebagainya.
Contoh Komponen Nama Komponen
Text Field/Text Box
0Musik 0 Olah Raga 0 Membaca Novel
Check Box
Laki – Laki Perempuan
Radio Button
Text Area
Musik Olah Raga
Radio Group
Jump Menu
Button
Catatan Penting
Untuk lebih lanjut kami jelaskan dalam tehnik mengatur style Form HTML dengan CSS pada Tutorial berikutnya… Fieldset
Gambar 10.1 Contoh Form
Adapun cara untuk membuat form adalah dengan menggunakan elemen FORM kemudian ditambah dengan komponen-komponen pembentuk form seperti input, checkbox, option dan sebagainya.
Perintah untuk membuat form yaitu :
google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);
Method digunakan untuk menentukan bagaimana form diberlakukan, sedang action sering diisi dengan URL tempat pemrosesan form selanjutnya.
10.2 Elemen-elemen pada Form
Bagian berikut menerangkan elemen-elemen yang dapat ditempatkan dalam suatu form :
Elemen Atribut fungsi
INPUT
Top of Form
Bottom of Form TYPE Bentuk masukan. Diisi dengan TEXT atau PASSWORD
NAME Nama komponen input
VALUE Isi/nilai dari komponen input
SIZE Panjang komponen input
MAXLENGTH Batasan panjang penulisan isi input
INPUT Top of Form Bottom of Form TYPE Bentuk masukan RADIO
NAME Nama komponen input radio
VALUE Pemberian nilai pada radio
CHEKED Memilih salah satu radio
INPUT Top of Form Bottom of Form TYPE Bentuk masukan CHECKBOX
NAME Nama komponen input checkbox
VALUE Pemberian nilai pada checkbox
CHEKED Memilih checkbox
SELECT Top of Form Bottom of Form
NAME Nama komponen select /pull down list
OPTION Pilihan dalam list
VALUE Isi pada list
SELECTED Option yang dipilih
SIZE Ukuran list
TEXTAREA Top of Form Bottom of Form
TYPE Bentuk komponen TEXTAREA
NAME Nama komponen textarea
ROWS Jumlah baris pada textarea
COLS Jumlah kolom pada textarea
INPUT TYPE Bentuk masukan tombol. Diisi dengan SUBMIT atau RESET
VALUE Judul pada tombol
Contoh pembuatan form
Hasil pembuatan form dapat dilihat sebagai berikut :
10.2 Form Pendaftaran
ELEMENT INPUT
Element INPUT berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna. Element ini mempunyai attribute yaitu name, size, type, value, checked.
Attribute name mendefinisikan nama dari input kontrol form, attribute size mendefinisikan ukuran teks pada input kontrol, type mendefinisikan bentuk-bentuk input kontrol, value mendefinisikan nilai awal/reset/submit, checked mendefinisikan pilihan terpilih pada type radio/checkbox. Element ini tidak mempunyai tag penutup dan harus berada di dalam element FORM.
Sintaks:
ELEMENT SELECT
Element SELECT berfungsi untuk mendefinisikan opsi pilihan pada form kontrol. Element ini mempunyai attribute yaitu name, size, multiple(diizinkan banyak pilihan). Element ini harus berada di dalam element FORM.
Sintaks:
ELEMENT OPTION
Element OPTION mendefinisikan opsi pilihan pada menu SELECT. Element ini mempunyai attribute selected, dan value. Attribute selected opsi terpilih dan attribute value berisikan nilai element OPTION.
Sintaks:
.....................
ELEMENT TEXTAREA
Element TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris. Element ini mempunyai attribute yaitu name, cols, rows. Attribute name mendefinisikan nama input kontrol form element textarea, attribute cols mendefinisikan jumlah kolom textarea yang terlihat, dan attribute rows mendefinisikan jumlah baris textarea yang terlihat. Element ini harus berada di dalam element FORM
Sintaks:
LATIHAN
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.
Latihan 1:
Buat form dengan input kontrol form seperti text, checkbox, radio, reset, submit, seperti tampilan di bawah ini:
Nama file: latihan7_1.html
Latihan 2:
Dari latihan 1 tambahkan menu select seperti gambar di bawah ini:
Nama file: latihan7_2.html
Latihan 3:
Dari latihan 2 tambahkan textarea seperti gambar di bawah ini:
Nama file: latihan7_2.html
Catatan:
Pemberian nilai attribute action pada element FORM dengan menuju ke alamat email adalah untuk memperlihatkan nilai-nilai data form yang dikirimkan.