Menciptakan Form dalam Web

Transkripsi

1 Menciptakan Form dalam Web STMIK AKAKOM YOGYAKARTA Click to edit Master subtitle style

2 Contoh sebuah Form

3 Komponen dan elemen dalam Form Input box First Name Address #1 Address #2 Last Name radio button drop-down list box City Countr y Item Purchased Used For (check one) Home Busines sreligious or Charitable Government Institution Educational Institution Stat e Purchase Date Serial Number Zip Network Operating System (check all that apply) Netware Banyan Vines Windows IBM Lan Server PC/NFS group box check boxes form button Comments?: Send Registration Cancel text area

4 Form Control Elements Control elements : text boxes untuk input huruf dan angka selection lists untuk daftar pilihan, biasanya ditampilkan dalam drop-down list box radio buttons, juga disebut option buttons, untuk memilih pilihan tunggal dari daftar yang tersedia check boxes untuk menentukan item yang dipilih groups boxes untuk mengelompokkan elemen form text areas untuk input yang panjang, terdiri dari beberapa baris teks buttons tombol yang dapat diklik untuk memulai proses dalam form Setiap control element yang dapat menerima data dari pengguna disebut dengan field.

5 Tag <form> Sebuah halaman dapat menampung beberapa form yang berbeda, tetapi tidak dapat mengaitkan form dalam form lainnya. syntax umum untuk tag <form> adalah: <form attributes> element form dan tags layout </form> Sebuah halalman Web dapat terdiri dari beberapa forms, tag <form> termasuk atribut namanya. atribut nama menunjukkan setiap form dalam halaman. atribut nama juga diperlulkan dalam program yang menerima input dari form.

6 Form Registration yang lengkap contact information Click to edit the outline text format product information usage information comments buttons Second Outline Level Third Outline Level Fourth Outline Level Fifth

7 Tipe Input Type type= button type= checkbox type= file type= hidden type= image type= password type= radio type= reset type= submit type= text Description Display a button which can be clicked to perform an action from a script Display a check box Display a browse button to locate and select a file Create a hidden field, not viewable on the form Display an inline image which can be clicked to perform an action from a script Display a text box in which hides text entered by the user Display a radio (option) button Display a button which resets the form when clicked Display a button which submits the form when clicked Display a text box in which displays text entered by the user

8 Bekerja dengan Text Boxes Text boxes dibuat dengan tag <input>. syntax umumnya adalah: <input type= tipe_input name= nama_field id= id_field > type menentukan tipe dari field data atribut name dan id menentukan field input bagi script CGI Untuk mebuat text box sederhana, tulislah tag: <input type= text >

9 membuat Text Box Untuk membuat text box, gunakanlah kode HTML berikut: <input type= text name= nama_field id= id_field value= isi_textbox size= panjang maxlength= max isian > atribut name dan id memberi identitas pada field value nilai default pada text box size lebar text box dalam satuan karakter maxlength jumlah karakter maksimum yang ditampung dalam field

10 Name/Value Pairs sent from the Web Form to the CGI Script This figure shows when form data is sent to the CGI script, the script receives the name or id of each field in the form paired with whatever value the user entered in the field. The script then processes the data according to each name/value pair.

11 Text Boxes on the Form Pada awalnya Text boxes kosong dan tidak berisi teks apapun sehingga diperlukan adanya text description untuk memberikan keterangan pada setiap box sehingga user mengetahui data apa yang harus diinputkan. text description text box

12 Mengatur lebar Text Boxes

13 Menentukan panjang Maksimum untuk sebuah Field potongan berikut memberikan contoh pembatasan lebar karakter dari field zip code Tidak lebih dari 5 karakter yang dapat diterima dalam text box ini

14 Mengatur nilai Default untuk sebuah Field Jika data yang sama sering diinputkan ke dalam field, disarankan untuk memberikan nilai default bagi field. Nilai Default dapat menghemat waktu dan meningkatkan ketepatan dalam pengisiannya. Untuk menentukan nilai default, gunakan syntax: <input value= value > value adalah huruf atau angka default yang akan ditampilkan dalam field

15 Menentukan nilai Default Value bagi sebuah Field Jika pengguna dari negara selain United States menggunakan form web ini, Mereka dapat menghapus nilai default dengan memilih teks tersebut dan menghapusnya kemudian mengisi data yang sesuai. Nilai default

16 Nilai = United States

17 Membuat Field Password field password adalah text box yang akan menampilkan bullets atau asterisks (****) ketika user mengetikkan karakter di dalamnya. syntax untuk membuat field Password adalah: <input type= password > Menggunakan password field bukan berarti telah memberikan koneksi yang aman. password itu sendiri tidak dienkripsi. password field berguna untuk menyamarkan tampilan ketika field tersebut diinputkan.

18 Labels Form & selection list HTML memungkinkan kita untuk menghubungkan sebuah label dengan elemen teks yang berkesesuaian untuk kepentingan scripting. syntax untuk membuat label form adalah: <label for= id >label text</label> id adalah nilai dari atribut id untuk field dalam sebuah form teks label adalah teks dari label tersebut Anda harus mengaitkan label ke atribut id dari field, bukannya atribut nama

19 Membuat label untuk field fname Gambar berikut menunjukkan label untuk field fname. Nilai dari atribut id untuk field first name

20 Menggunakan Selection List Sebuah Selection List akan terlihat sedikit berbeda tergantung pada browser dan versinya.

21 Membuat Selection List selection list adalah kotak daftar di mana pengguna akan memilih atau mengatur item dalam selection list. Selection lists tepat digunakan pada item dengan nilai yang sudah tertentu. Selection lists dapat membantu mencegah pengejaan yang salah atau input yang salah. selection list ditulis dengan tag <select>. Tag <option> digunakan untuk memberikan item pilihan yang tertentu.

22 Membuat Selection List Nama field selection list Item-item yang terdapat alam selection list

23 Selection List dengan ukuran yang berbeda size = "1" size = "4" size = "7" size = "9"

24 Selection List dengan Value dan display yang berbeda Sering terjadi dibutuhkan selection list yang memiliki value dan display yang berbeda, misal : Pilihan Jurusan, isi pilihan adalah : Teknik Informatika, Sistem Informasi, tetapi jika dipilih Teknik Informatika maka value yang dibutuhkan adalah = TI, jika dipilih Sistem Informasi, maka value yang dibutuhkan adalah SI Pilihan Bulan : isi pilihan : Januari, Februari, Maret,, Saat memilih nama bulan, value yang dibutuhkan adalah nomor urut bulan : 1 untuk januari, 2 untuk februari, dst

25 Contoh : <select name= jurusan > <option value= TI >Teknik Informatika</option> <option value= SI >Sistem Informasi</option> </select> <select name= bulan > <option value= 1 >Januari</option> <option value= 2 >Februari</option> <option value= 3 >Maret</option> <option value= 4 >April</option> </select>

26 Nilai Default Untuk Selection List Untuk menampilkan pilihan awal (nilai default) pada selection list digunakan : selected <select name= bulan > <option value= 1 >Januari</option> <option value= 2 selected>februari</option> <option value= 3 >Maret</option> <option value= 4 >April</option> </select>

27 Option Groups HTML mampu mengorganisir selection lists kedalam group yang terpisah, yang disebut option groups. syntax untuk menbuat option group adalah: <optgroup label= label > label adalah tulisan yang menandai option group teks untuk label tampil di atas setiap group items, tetapi label ini sendiri tidak dapat dipilih

28 Option Groups Internet Explorer dan Netscape sebelum version 6.0 Menampilkan daftar pilihan tanpa label group. option group label a single option group option group label a single option group

29 Radio Buttons Radio buttons menampilkan daftar pilihan yang harus dipilih oleh pengguna. Hanya satu radio button yang dapat dipilih dalam sekali waktu. syntax untuk membuat radio button adalah: <input type= radio name= name id= id value= value > name - field yang terdiri dari radio button (harus ada) id option tertentu. Diperlukan ketika akan diputuskan untuk menggunakan label field dengan radio button value - value akan dikirim ke CGI script, jika radio button tersebut dipilih oleh pengguna

30 Membuat Radio Button Pada contoh kode berikut, nilai yang dikirim ke CGI script tidak sama dengan label field. Jika pengguna memilih radio button Republican, nilai gop Akan terkirim ke CGI script bersesuaian dengan nama field party.

31 membuat Group Box group box menandai seluruh pilihan dari radio buttons. group box adalah kotak yang ditempatkan disekitar field yang menunjukkan bahwa radio button tersebut berada dalam suatu group. syntax untuk membuat group box adalah: <fieldset> <legend align= align >legend text</legend> collection of fields </fieldset>

32 Group Boxes untuk Radio Buttons dan Check Boxes

33 Membuat Group Box dan Legend Awal dari group box group box legend Menghasilkan radio buttons dan group box

34 Bekerja dengan Check Boxes check box memungkinkan pengguna untuk memilih atau tidak Check box dibuat dengan menggunakan syntax: <input type= checkbox name= name id= id value= value > name dan id - identitas dari checkbox value - nilai yang akan dikirim kecgi script ketika checkbox itu terpilih

35 Nilai Default pada CheckBox dan Radio Button Check boxes dan radio buttons tidak terpilih secara default. Untuk menjadikannya terpilih secara default, tambahkan atribut checked pada tag <input> <input type = checkbox checked = checked > <input type= radio checked = checked >

36 Group Boxes untuk Radio Buttons dan Check Boxes

37 membuat Text Area default teks yang ada dalam text area Dimensi dari text area Hasil text area

38 Comment Text Area

39 Wrapping pada textarea Attribut wrap digunakan untuk mengatur reaksi dari text jika text yang diisikan melebihi ukuran textarea Terdapat 3 macam : Soft / virtual: secara tampilan, text akan turun ke bawah (seperti ada linebreak), tetapi saat disimpan linebreak tsb akan dihilangkan Hard / physical : text secara fisik ditambah linebreak, sehingga saat disimpan linebreak ikut tersimpan Off : saat sampai ke tepi textarea, text tetap akan terus ke kanan, dan textarea akan menambahkan scroll horisontal

40 Membuat Form Button

41 membuat Push Button Salah satu tipe button, yang disebut push button, dibuat dengan tag <input> : <input type= button value= text > text adalah tulisan yang tampil pada button push buttons tidak melakukan actions apapun pada halaman Web. Untuk memberikan action, tuliskan script atau program yang secara otomatis akan dijalankan ketika button diklik.

42 Membuat Submit dan Reset Buttons submit button adalah tombol yang mengirim form ke CGI script untuk diproses. reset button mengembalikan kondisi form pada kondisi semula (default). syntax untuk membuat kedua tombol tersebut: <input type= submit value= text > <input type= reset value= text > Atribut value mendefinisikan teks yang akan tertera pada tombol tersebut

43 membuat Form Button Gambar berikut menampilkan tag HTML untuk tombol yang akan men-download program, menampilkan informasi, dan me-resets form pada kondisi semula.

44 Membuat File Button Contoh penggunaan file button untuk menuju ke lokasi file dengan nama report.doc. 1. Pengguna mengklik tombol Browse 2. Pilih file kotak dialog Choose File 3. Nama file dan lokasi secara otomatis akan ditempatkan dalam text box

45 Bekerja dengan atribut Form Setelah menambahkan elemen pada sebuah form, perlu ditentukan kemana data form tersebut akan dikirim dan bagaimana mengirimnya. Gunakan atribut: <form action= url method= type enctype= type > </form> URL - nama file dan lokasi CGI script yang akan memproses form Method bagaimana cara Web browser mengirim data ke CGI script enctype format data yang tersimpan dalam field form