Komponen Form Entry Pilihan

KOMPETENSI INTI
3. Memahami, menerapkan dan menganalisis pengetahuan faktual, konseptual, dan prosedural berdasarkan rasa ingin tahunya tentang ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam wawasan kemanusiaan,  kebangsaan, kenegaraan, dan peradaban terkait penyebab fenomena dan kejadian dalam bidang kerja yang spesifik untuk memecahkan masalah.
4. Mengolah,  menalar, dan menyaji dalam ranah konkret dan ranah abstrak  terkait dengan pengembangan dari yang dipelajarinya di sekolah secara mandiri, dan mampu melaksanakan tugas spesifik di bawah pengawasan langsung.

KOMPETENSI DASAR
3.6. Memahami format formulir pada halaman web

4.6. Menyajikan formulir pada halaman web

TUJUAN PEMBELAJARAN
Setelah mengikuti kegiatan belajar 2 diharapkan peserta didik dapat :
1) Memahami komponen entri pilihan
2) Menyajikan komponen entri pilihan ke dalam sebuah halaman Web

URAIAN MATERI

Form HTML digunakan untuk memilih pelbagai macam inputan yang disediakan. Data bisa diinputan dalam komponen entri pilihan, diantaranya input file, radio button, chexbox, select serta datalist.

1. KOMPONEN INPUT FILE
Komponen input file berfungsi untuk memasukan data file yang dibutuhkan kedalam sistem web yang dibuat. Format tag HTML-nya adalah sebagai berikut :

<input type=file name=name accept=image type list>

Name= "name" merupakan pemberian nama pada komponen input sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut.

Latihan 1 - Komponen Input File

2. KOMPONEN RADIO BUTTON
Pada form input radio button hanya ada satu pilihan yang terseleksi,tidak bisa digunakan untuk multiple answer. Format umum tag HTML dari Form Input Radio Button adalah sebagai berikut:

<input type=radio name=name value=value>

Name= “name” merupakan pemberian nama pada komponen input sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Berikut adalah penggalan listing program penulisan form input radio button

Latihan 2 - Komponen Radio Button

3. KOMPONEN CHECKBOX
Komponen checkbox memiliki fungsi yang hampir sama dengan radio button, yaitu untuk menentukan pilihan. Namun pada checkbox dapat digunakan untuk memilih lebih dari satu jawaban (multi answer). Atau bisa dikatakan bahwa komponen input checkbox digunakan sebgai masukan untuk data atau nilai pilihan dengan alternatif jawaban lebih dari 1 opsi pilihan. Tampilan dari komponen input ini berupa kotak yang dapat diberi tanda centang/contreng. Jenis input ini biasa digunakan untuk memasukkan data pilihan yang pilihannya bisa lebih dari satu, seperti hobby, makanan, dan lain-lain. Format tag HTML-nya adalah sebagai berikut :

<input type=checkbox name=name value=value>

Setiap komponen input harus diberikan nama (name) yang berbeda karena data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Nilai dari komponen checkbox berupa nilai boolean, yakni true apabila dicentang dan false apabila input pilihan tersebut tidak dicentang. Berikut ini adalah contoh penerapan dari format form input check box

Latihan 3 - Komponen CheckBox

4. KOMPONEN INPUT IMAGE
Komponen input image bertujuan untuk memasukan file gambar yang dibutuhkan oleh sistem web, misalnya saja file gambar foto.jpg. Format tag HTML dengan atribut image adalah sebagai berikut :

<input type=image name=name src="url">

Name= “name” merupakan pemberian nama pada komponen input sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Sedangkan type=image merupakan tipe file yang dapat dimasukan dalam sistem. Berikut adalah salah satu contoh form Input Image dengan atribut image

Latihan 4 - Komponen Input Image

5. KOMPONEN SELECT
Komponen input dengan tipe ‘select’ adalah komponen input dengan banyak pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan. Istilah lain dari bentuk komponen ini adalah combo box atau list box. Contoh penggunaan komponen ini adalah pemilihan data agama, jurusan, pekerjaan, dan sebagainya. Format umum Penulisan komponen select adalah sebagai berikut :

<select name=”name”><option value="nilai1"> nilai1 </option><option value="nilai2"> nilai2 </option><option value="nilai3"> nilai3 </option><option value="nilai4"> nilai4 </option></select>

Name= “name” merupakan pemberian nama pada komponen input select sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Sedangkan value=”nilai” merupakan nilai dari setiap pilihan yang diberikan. Berikut ini adalah contoh penggunaan dari komponen input bertipe ‘select’

Latihan 5 - Komponen Select

6. KOMPONEN DATA LIST
Komponen datalist merupakan elemen form baru pada HTML5. Datalist digunakan untuk membuat daftar list. Komponen datalist memberikan dukungan autocomplete dasar untuk pilihan pada field input. Komponen datalist merupakan pengabungan antara list dan field input dengan atribut autocomplete. Saat membuat pilihan pada datalist, bila terdapat huruf/item yang sama dengan data pada data list maka akan muncul item yang cocok (fungsi autocomplete bekerja). Format umum Penulisan komponen datalist adalah sebagai berikut :

<input list="list"><datalist id="id"><option value="nilai1"><option value="nilai2"><option value="nilai3"></datalist>

Berikut ini adalah contoh penggunaan dari komponen input datalist

Latihan 6 - Komponen Data List

MATERI DAN MODUL PRAKTIKUM

ALAT DAN BAHAN 

1. Modul Praktikum
2. Perangkat Komputer
3. Aplikasi Notepad ++ 
4. Aplikasi Browser (Mozilla, IE, Chrome dan lain-lain)

VIDEO PRAKTIKUM

Kuis Komponen Form Entry Pilihan - ProProfs » ProProfs Exam

SOAL DISKUSI
Buatlah kelompok. terdiri atas 2-3 orang. Dalam kegiatan ini masing-masing kelompok kerjakan tugas berikut :

1. Jelaskan fungsi dan format penulisan komponen input file
2. Jelaskan fungsi dan format penulisan komponen radio button
3. Jelaskan fungsi dan format penulisan komponen chexbox
4. Jelaskan fungsi dan format penulisan komponen datalist