Pilihan yang terdiri dari beberapa opsi dan user bisa memilih lebih dari satu opsi adalah

Table of Contents Show

Fungsi Tag Select dalam pembuatan Form HTML
Atribut name: Untuk Pemrosesan Tag Select
Atribut value: Sebagai Nilai untuk Tag Option
Atribut selected: Menampilkan Nilai Default dari Tag Select
Atribut Size: Menentukan Besar tampilan Select
Atribut Multiple: Untuk Memilih lebih dari 1 pilihan tag Select
Atribut disabled: Menonaktifkan tag Select
Tag optgroup dan atribut label
Atribut id dan class: CSS dan Javascript
Cara Penggunaan Tag Input select dalam Form HTML
Video yang berhubungan

User interface adalah Cara/mekanisme User melakukan interaksi dengan program, sehingga user dan program dapat ‘berkomunikasi’ satu sama lain. User interface dapat menerima informasi dari user dan memberikan informasi kepada user (setelah melalui proses yang ada pada program/komputer) untuk kepentingan user.

User interface dapat menerima/memberikan informasi kepada user melalui proses interaksi, melalui proses inilah program dan user dapat berinteraksi untuk kepentingan user.
Macam Macam interaksi yang umunya terjadi adalah :

Direct manipulation – pengoperasian secara langsung : interaksi langsung dengan objek pada layer sehingga aktivitas akan dikerjakan oleh komputer ketika pengguna memberikan instruksi langsung yang ada pada layar komputer. Misalnya delete file dengan memasukkannya ke trash, drag and drop, dll. Direct manipulation pada zaman dapat dilakukan juga melalui virtual environment.
Kelebihan : -> Waktu pembelajaran user sangat singkat karena mudah dimengerti dan diingat, feedback langsung diberikan pada tiap aksi sehingga kesalahan pada design UI ataupun kesalahan user dapat terdeteksi dan diperbaiki dengan cepat.
-> Penggunaan lebih menyenangkan sehingga meningkatkan kepuasan user dan memberikan User Experience yang baik.

Kekurangan : -> Interface tipe ini rumit dan memerlukan banyak fasilitas pada sistem komputer, cocok untuk penggambaran secara visual untuk satu operasi atau objek.

-> Desain dapat mengabaikan informasi penting karena design direct manipulation yang dibuat mengutamakan kemudahan user sehingga memiliki resiko melewatkan informasi penting.

Prinsip Direct Manipulation :

Representasi terus menerus dari objek dan tindakan kepentingan dengan metafora visual yang bermakna. 2. Tindakan fisik atau menekan tombol berlabel, bukan sintaks yang kompleks.

3. Cepat, incremental, tindakan reversibel yang efeknya pada obyek yang menarik terlihat segera.

Illustrasi Direct Manipulation

Menu Selection
Tipe menu selection memberikan beberapa pilihan kepada user berbentuk daftar menu yang isinya adalah perintah kepada komputer sesuai dengan menu yang terdaftar, nama perintah yang dijalankan harus sesuai dengan nama pilihan menu. Misal : klik kanan dan memilih pilihan menu yang dikehendaki seperti copy, paste, cut, dll.

Kelebihan : -> User tidak perlu ingat nama perintah karena sudah tertera di dalam menu.

-> Minimalisir pengetikan sehingga meminimalisir tingkat kesalahan pula.

Kekurangan : -> Tidak ada logika AND atau OR. -> Perlu ada struktur menu jika banyak pilihan.

-> Menu dianggap lambat oleh expert user dibanding command language.

Form fill-in – (pengisian form)
Cara sebuah sistem untuk meminta data atau informasi dari user dengan member petunjuk kepada user untuk mengisi area area dan melengkapi data pada kategori dan bagian bagian yang telah disediakan oleh form.

Kelebihan : -> Masukan data/input yang sederhana.

-> Mudah dipelajari oleh user untuk mengurangi kesalah pahaman.

Kekurangan : -> Memerlukan banyak tempat di layer karena beragamnya data yang harus diisi dalam form.

-> Harus menyesuaikan dengan form manual dan kebiasaan user untuk mendapatkan data yang objektif.

Beberapa Panduan dalam membuat Form Fill in : 1. Judul Jelas dan memiliki Arti. 2. Instruksi Dapat dan mudah dimengerti. 3. Pengelompokan dan pengurutan secara digital. 4. Layout mudah dilihat sehingga tidak ada bagian yang tertinggal. 5. Konsistensi 6. Tempat menginput data jelas. 7. Memberikan pencegahan error(validasi).

8. Pesan error mudah dimengerti.

Command language
Menuliskan perintah yang sudah ditentukan pada program. Command language merupakan interaksi manusia dan komputer yang tradisional dan orisinil, dapat dikatakan orisinil adalah karena semua interaksi melalui menu, form dan direct semuanya akan berujung dengan penggunaan Bahasa command language (mengklik suatu menu berarti menjalankan command language untuk perintah menu tersebut ). Pada antarmuka jenis ini, hanya prompt dan instruksi yang disediakan oleh sistem. User harus mengingat nama serta sintaks untuk perintah (command) karena yang tampil hanya prompt yang ‘ready’. CL digunakan pada beberapa sistem komputer awal dan saat itu sangat popular.

Kelebihan: -> Powerful, Command yang simpel dapat lebih handal, dimana pada menu dan fill in form mungkin membutuhkan 2030 menu dan fill-in form mungkin membutuhkan 20-30 screen. -> Flexible, User Controlled, User dapat melakukan apa saja sesuai dengan keinginannya keinginannya.

-> Fast, Efficient, Meskipun pada command language membutuhkan pengetikan lebih sering dibanding beberapa dialog lain pengetikan lebih sering dibanding beberapa dialog lain, namun ternyata bisa lebih cepat dan efisien. Karena Command yang komplek lebih cepat daripada melalui banyak screen scanning untuk pilihan menu atau navigasi, dan pengisian field.

Kekurangan: -> Difficult to Learn, command language lebih kepada proses ‘recall memory’ sehingga sukar untuk di pelajari. Recall Memory maksudnya walau sudah mengerti command di dalam Operating System, namun harus lebih terbiasa terlebih dahulu dengan Bahasa command tersebut agar penggunaan command language menjadi lebih efisien disbanding dengan tipe interaksi yang lain (apabila belum terbiasa dan belum paham penggunaan command language akan menjadi tidak efisien).

-> Assumes Typing Skill. Keterampilan user dalam mengetik pada komputer juga sangat mempengaruhi efisiensi dialgo/interaksi menggunakan Command Language.

Natural language
Perintah dengan menggunakan Bahasa manusia yang digunakan manusia untuk berkomunikasi sehari hari. Program yang dapat menerima perintah menggunakan natural language dapat disebut sebagai artificial intelligence. Contohnya adalah dengan menggunakan search engine di google, ketika user menggunakan search engine google, keyword yang di input adalah Bahasa yang digunakan untuk percakapan sehari hari bukan merupakan Bahasa programing dsb.

Kelebihan :
-> Pengguna memberikan instruksi-instruksi dalam Natural Language/Bahasa percakapan yang lebih umum sifatnya . Pemberian perintah dengan menggunakan pengenalan tutur atau pengetikan bahasa alami lewat keyboard dapat mempermudah penggunaan.

Kekurangan :
-> Natural language tersebut memiliki lebih dari satu arti, sulit dalam perancangannya dan tidak efisien.

Referensi :

http://wahyukintoko.blogspot.co.id/2014/05/dialog-dalam-interaksi-manusia-dan.html

Alvian Shanardi

Pada tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form) kita telah belajar menggunakan tag select, namun dalam tutorial kali ini saya akan membahasnya dengan lebih dalam beserta atribut-atribut tambahan yang bisa gunakan untuk tag select.

Fungsi Tag Select dalam pembuatan Form HTML

Tag select di dalam HTML digunakan untuk membuat objek form yang berupa list pilihan yang dapat dipilih oleh user. Biasanya tag select digunakan untuk “memaksa” user memilih salah satu dari pilihan yang tersedia. Pilihan ini telah didefenisikan pada saat form dibuat.

Pada penggunaan tag select ini, kita juga membutuhkan tag option sebagai “isi” dari tag select. Format dasar pembuatan select dalam HTML adalah sebagai berikut:

<select > <option>Pilihan 1</option> <option>Pilihan 2</option> <option>Pilihan 3</option> </select >

Anda tidak harus menggunakan tag select di dalam form HTML, namun bisa juga digunakan tanpa tag form. Akan tetapi jika digunakan diluar form, kita membutuhkan bantuan bahasa pemograman lain seperti javascript untuk memproses hasilnya.

Atribut name: Untuk Pemrosesan Tag Select

Atribut name untuk tag select digunakan sebagai identitas dari tag select tersebut. Identitas ini diperlukan pada saat pemrosesan di sisi server (misalnya menggunakan PHP). Atribut name inilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut name diletakkan di dalam tag select, bukan di dalam tag option. Berikut contoh penulisan atribut name untuk tag select:

<select name=”judul_pilihan”> <option>Pilihan 1</option> <option>Pilihan 2</option> </select >

Atribut value: Sebagai Nilai untuk Tag Option

Atribut value digunakan di dalam tag option. Nilai dari atribut inilah yang akan dikirimkan kedalam web server, sehingga disarankan menggunakan nilai yang mencerminkan pilihan user. Nilai dari value tidak harus sama dengan apa yang dilihat user. Berikut contoh penulisannya:

<select> <option value="pil1">Pilihan 1</option> <option value="pil2">Pilihan 2</option> <option value="pil3">Pilihan 3</option> </select>

Usahakan untuk memberi nilai value berupa nilai yang singkat namun bermakna sesuai dengan pilihan yang ditampilkan.

Atribut selected: Menampilkan Nilai Default dari Tag Select

Atribut selected digunakan pada tag option. Jika sebuah tag option mememiliki atribut selected, maka pada saat form ditampilkan, pilihan tag inilah yang akan tampil sebagai nilai awal dari select (nilai default). Nilai dari atribut ini adalah dirinya sendiri, sehingga penulisannya menjadi selected=“selected”. Berikut contoh penulisannya:

<select> <option >Pilihan 1</option> <option selected="selected">Pilihan 2</option> <option>Pilihan 3</option> </select>

Atribut Size: Menentukan Besar tampilan Select

Atribut size digunakan untuk menentukan besar dari tampilan tag select. Jika tidak ditulis, tag select memiliki nilai default size=”1″, sehingga hanya 1 pilihan yang “terlihat” ketika user memilih pilihan yang ada.

Namun jika anda menambahkan atribut size=”3″, maka pada saat form ditampilkan, tag select akan ditampilkan sebanyak 3 baris, bukan 1 baris seperti biasanya.

Atribut size ini umumnya digunakan apabila tag select dirancang untuk dapat dipilih dengan beberapa pilihan sekaligus. Untuk keperluan ini, atribut size biasanya di kombinasikan dengan atribut multiple yang akan kita bahas setelah ini.

Berikut contoh penulisan atribut size untuk tag select:

<select size="2"> <option>Pilihan 1</option> <option>Pilihan 2</option> </select >

Atribut Multiple: Untuk Memilih lebih dari 1 pilihan tag Select

Atribut multiple untuk tag select digunakan untuk memungkinkan user untuk dapat memilih lebih dari 1 nilai. Namun untuk dapat memilih lebih dari 1 nilai, user harus menekan tombol ctrl pada keyboard.

Atribut multiple akan lebih mudah digunakan jika ditambahkan atribut size. Satu-satunya nilai untuk atribut multiple ini adalah “multiple”. Berikut contoh penggunaan atribut multiple, dan dikombinasikan dengan atribut size:

<select size="3" multiple="multiple"> <option>Pilihan 1</option> <option>Pilihan 2</option> <option>Pilihan 3</option> </select >

Atribut disabled: Menonaktifkan tag Select

Atribut disabled digunakan untuk membuat tag select tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal, misalkan sebuah pilihan select hanya dapat diisi ketika user telah mengisi form diatasnya.

Atribut disabled ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya atribut disabled untuk tag select HTML:

<select disabled="disabled"> <option>Pilihan 1</option> <option>Pilihan 2</option> <option>Pilihan 3</option> </select >

Selain digunakan untuk tag select, atribut disabled juga bisa digunakan untuk tag option. Ketika digunakan di dalam tag option, maka pilihan yang memiliki atribut disabled tidak akan bisa digunakan. berikut contoh penulisannya:

<select> <option>Pilihan 1</option> <option disabled="disabled">Pilihan 2</option> <option>Pilihan 3</option> </select>

Tag optgroup dan atribut label

Tag optgroup digunakan untuk membuat kelompok-kelompok pilihan. Jika list pilihan anda panjang, menggunakan tag optgroup akan memudahkan user dalam menentukan pilihan apabila telah dikelompokkan terlebih dahulu.

Atribut label diperlukan untuk menampilkan judul dari tag optgroup. Berikut contoh penulisan tag optgroup:

<select> <optgroup label="Kelompok 1"> <option>Pilihan 1</option> <option>Pilihan 2</option> <option>Pilihan 3</option> <optgroup label="Kelompok 2"> <option>Pilihan 5</option> <option>Pilihan 6</option> <option>Pilihan 7</option> </select>

Dalam penulisan tag optgroup, kita membutuhkan sebuah atribut, yakni atribut label yang berisi tulisan yang akan muncul untuk grup pilihan tersebut. Di dalam web browser, tag optgroup ini akan ditampilkan dalam huruf tebal (bold), namun user tidak dapat memilihnya karena fungsi tag ini memang hanya sebagai keterangan saja.

Atribut id dan class: CSS dan Javascript

Selain atribut name, value, selected, size, multipe dan disabled, anda juga bisa menggunakan atribut umum seperti id dan class dalam tag select. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.

Cara Penggunaan Tag Input select dalam Form HTML

Untuk merangkum seluruh contoh atribut dan tag select yang telah kita pelajari disini, saya akan membuat contoh cara penggunaannya di dalam form HTML:

<!DOCTYPE html> <html> <head> <title>Belajar Tag Select HTML</title> </head> <body> <h4>tag Select dengan atribut: name+value+selected:</h4> <form name="form1" action="proses.php" method="get"> <select name="bulan_lahir"> <option value="jan">Januari</option> <option value="feb">Februari</option> <option value="mar" selected="selected">Maret</option> <option value="apr">April</option> <option value="mei">Mei</option> <option value="jun">Juni</option> <option value="jul">Juli</option> </select> </form> <h4>tag Select dengan atribut: name+value+selected+size=3:</h4> <form name="form2" action="proses.php" method="get"> <select name="bulan_lahir" size="3"> <option value="jan">Januari</option> <option value="feb">Februari</option> <option value="mar">Maret</option> <option value="apr">April</option> <option value="mei">Mei</option> <option value="jun">Juni</option> <option value="jul" selected="selected">Juli</option> </select> </form> <h4>tag Select dengan atribut: name+value+selected+size=6+multiple:</h4> Tahan tombol crtl pada saat memilih > 1 pilihan. <br /> <form name="form2" action="proses.php" method="get"> <select name="bulan_lahir" size="6" multiple="multiple"> <option value="jan" selected="selected">Januari</option> <option value="feb">Februari</option> <option value="mar">Maret</option> <option value="apr">April</option> <option value="mei">Mei</option> <option value="jun">Juni</option> <option value="jul">Juli</option> </select> </form> <h4>tag Select dengan atribut: name+value+selected+disabled</h4> <form name="form2" action="proses.php" method="get"> <select name="bulan_lahir" disabled="disabled"> <option value="jan">Januari</option> <option value="feb">Februari</option> <option value="mar">Maret</option> <option value="apr">April</option> <option value="mei"selected="selected">Mei</option> <option value="jun">Juni</option> <option value="jul">Juli</option> </select> </form> <h4>tag Select dengan atribut: name+value dan tag optgroup</h4> <form name="form2" action="proses.php" method="get"> <select name="bulan_lahir"> <optgroup label="Triwulan 1"> <option value="jan">Januari</option> <option value="feb">Februari</option> <option value="mar">Maret</option> </optgroup> <optgroup label="Triwulan 2"> <option value="apr">April</option> <option value="mei">Mei</option> <option value="jun">Juni</option> </optgroup> <optgroup label="Triwulan 3"> <option value="jul">Juli</option> </optgroup> </select> </form> </body> </html>

Contoh kode program HTML tag select yang saya tulis hanya merangkum apa yang telah kita pelajari pada tutorial kali ini. Selnajutnya kita akan mempelajari tentang tag textarea dalam Form HTML.