Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML Form

591 views

Published on

HTML Form

Published in: Education

HTML Form

  1. 1. HTML FORM I PUTU HARIYADI putu.hariyadi@stmikbumigora.ac.id Copyright © 2015 STMIK Bumigora
  2. 2. FORM Copyright 2015 STMIK Bumigora
  3. 3. FORM  Merupakan komponen dari halaman web yang digunakan untuk melakukan pengumpulan data dari pengguna atau pengunjung situs.  Pengguna dapat berinteraksi dengan form dan memasukkan data yang dapat dikirimkan ke server untuk pemrosesan lebih lanjut.  HTML Form dibuat menggunakan tag <form>, sebagai contoh: <form atribut=nilai> …. Form element …. </form>  HTML Form memuat element-element dari form yang dapat berupa element input, button, textarea, select, dan lain sebagainya. Copyright 2015 STMIK Bumigora
  4. 4. FORM ATRIBUT Atribut Deskripsi name Menentukan nama yang digunakan untuk mengidentifikasi form. method Menentukan metode HTTP yang digunakan untuk mengirimkan data dari form berupa GET atau POST. action Menentukan URL atau script pemroses form. enctype Menentukan jenis encode data dari form, berupa: • application/x-www-form-urlencoded Merupakan jenis encode default dari form. • multipart/form-data Merupakan jenis encode yang digunakan ketika melakukan upload binary data dari form seperti file. target Menentukan window atau frame dimana hasil dari script akan ditampilkan, berupa _blank, _self, _parent, dan lain-lain. Contoh: <form name=“frmlogin” method=“post” target=“_blank” action=“login.php”> … … </form> Copyright 2015 STMIK Bumigora
  5. 5. FORM ELEMENT Text Field Text Field Radio Button Dropdown List Checkbox Textarea File Text Field Password Password Submit Button Reset Button Button Copyright 2015 STMIK Bumigora
  6. 6. ELEMENT <input>  Memiliki jenis (type) yang beragam meliputi: 1. Text 2. Password 3. Radio 4. Checkbox 5. Submit 6. Reset 7. Button 8. File 9. Image 10. Hidden Copyright 2015 STMIK Bumigora
  7. 7. HTML Input Type=Text  Digunakan untuk mendefinisikan input field satu baris (text field).  Dibuat menggunakan tag <input>.  Atribut dari tag <input>:  Contoh:  Output: Atribut Deskripsi type Menentukan jenis dari control input yaitu “text”. name Menentukan nama pengenal dari text input. value Menentukan nilai awal dari text input. size Menentukan ukuran lebar penampilan text input dalam satuan karakter. maxlength Menentukan maksimum jumlah karakter yang dapat dimasukkan pada text input. <input type=“text” name=“txtnim” size=“15” maxlength=“10”> Copyright 2015 STMIK Bumigora
  8. 8. HTML Input Type=Password  Digunakan untuk mendefinisikan input field satu baris namun karakter yang dimasukkan akan di-mask (disamarkan) dan ditampilkan sebagai asterisk atau circle.  Dibuat menggunakan tag <input>.  Atribut dari tag <input>:  Contoh:  Output: Atribut Deskripsi type Menentukan jenis dari control input yaitu “password”. name Menentukan nama pengenal dari control input. value Menentukan nilai awal dari control input. size Menentukan ukuran lebar penampilan control input dalam satuan karakter. maxlength Menentukan maksimum jumlah karakter yang dapat dimasukkan pada control input. <input type=“password” name=“txtsandi” size=“15” maxlength=“20”> Copyright 2015 STMIK Bumigora
  9. 9. HTML Input Type=Radio  Digunakan untuk mendefinisikan radio button, dimana pengguna dapat memilih hanya satu pilihan dari sejumlah pilihan yang ada.  Dibuat menggunakan tag <input>.  Atribut dari tag <input>:  Contoh:  Output: Atribut Deskripsi type Menentukan jenis dari control input yaitu “radio”. name Menentukan nama pengenal dari control input. Pastikan nama pengenal dari setiap control input radio sama. value Menentukan nilai yang akan digunakan jika control input radio tertentu dipilih. checked Menentukan agar pilihan dari control input radio langsung terpilih ketika halaman yang memuat control tersebut diakses. <input type=“radio” name=“rbjeniskelamin” value=“P” checked> Pria <input type=“radio” name=“rbjeniskelamin” value=“W”> Wanita Copyright 2015 STMIK Bumigora
  10. 10. HTML Input Type=Checkbox  Digunakan untuk mendefinisikan checkbox, dimana pengguna dapat memilih lebih dari satu pilihan dari sejumlah pilihan yang ada.  Dibuat menggunakan tag <input>.  Atribut dari tag <input>:  Contoh: Atribut Deskripsi type Menentukan jenis dari control input yaitu “checkbox”. name Menentukan nama pengenal dari control input. Nama pengenal dari setiap control input checkbox dapat sama atau berbeda bergantung pada desain penyimpanan data yang digunakan. value Menentukan nilai yang akan digunakan jika control input checkbox tertentu dipilih. checked Menentukan agar pilihan dari control input checkbox langsung terpilih ketika halaman yang memuat control tersebut diakses. <input type=“checkbox” name=“chkhobby[]” value=“Komputer” checked> Komputer <input type=“checkbox” name=“chkhobby[]” value=“Musik”> Musik Copyright 2015 STMIK Bumigora Output:
  11. 11. HTML Input Type=Submit  Digunakan untuk mendefinisikan clickable button yang akan mengirimkan (submit) isian dari form ke form-handler.  Form-handler umumnya berupa script server-side yang akan memproses input data.  Dibuat menggunakan tag <input>.  Atribut dari tag <input>:  Contoh:  Output: Atribut Deskripsi type Menentukan jenis dari control input yaitu “submit”. name Menentukan nama pengenal dari control input. value Menentukan nilai yang akan digunakan sebagai label dari button. <input type=“submit” name=“btnsimpan” value=“Simpan”> Copyright 2015 STMIK Bumigora
  12. 12. HTML Input Type=Reset  Digunakan untuk mendefinisikan clickable button yang akan melakukan reset isian dari form.  Dibuat menggunakan tag <input>.  Atribut dari tag <input>:  Contoh:  Output: Atribut Deskripsi type Menentukan jenis dari control input yaitu “reset”. name Menentukan nama pengenal dari control input. value Menentukan nilai yang akan digunakan sebagai label dari button. <input type=“reset” name=“btnbatal” value=“Batal”> Copyright 2015 STMIK Bumigora
  13. 13. HTML Input Type=Button  Digunakan untuk mendefinisikan clickable button.  Dibuat menggunakan tag <input>.  Atribut dari tag <input>:  Contoh:  Aksi yang dapat dilakukan oleh button dapat diatur dengan menambahkan client-side scripting seperti Javascript atau VBScript.  Contoh button ketika diklik akan mengalihkan (redirect) ke situs Google.com menggunakan object window.location dari Javascript: Atribut Deskripsi type Menentukan jenis dari control input yaitu “button”. name Menentukan nama pengenal dari control input. value Menentukan nilai yang akan digunakan sebagai label dari button. <input type=“button” name=“btngoogle” value=“Google”> <input type=“button” name=“btngoogle” value=“Google” onClick=“window.location=‘http://www.google.com’”> Copyright 2015 STMIK Bumigora Output:
  14. 14. HTML Input Type=File  Digunakan untuk mendefinisikan file upload box atau file select box yang dapat digunakan oleh pengguna untuk mengunggah file.  Dibuat menggunakan tag <input>.  Atribut dari tag <input>: Atribut Deskripsi type Menentukan jenis dari control input yaitu “file”. name Menentukan nama pengenal dari control input. accept Menentukan jenis file yang dapat diterima. Apabila ditentukan maka nilai antar atribut dipisahkan menggunakan tanda koma. Nilai dapat berupa: • String “audio/*” untuk menyatakan file-file audio yang diterima. • String “video/*” untuk menyatakan file-file video yang diterima. • String “image/*” untuk menyatakan file-file gambar yang diterima. • Menggunakan Multipurpose Internet Mail Extensions (MIME) Type yang valid dengan tanpa parameter. • String yang menyatakan ekstensi file tertentu yang diawali dengan tanda “.” sebagai contoh “.jpeg”. Copyright 2015 STMIK Bumigora
  15. 15. HTML Input Type=File  Contoh menerima file-file gambar untuk input file foto: <input type=“file” name=“foto” accept=“image/*”>  Output:  Contoh menerima file-file video untuk input file video: <input type=“file” name=“video” accept=“video/*”>  Contoh menerima file-file audio untuk input file audio: <input type=“file” name=“audio” accept=“audio/*”>  Contoh menerima file-file gambar dengan ekstensi JPEG, JPG & PNG untuk input file foto: <input type=“file” name=“foto” accept=“.jpeg,.jpg,.png”> Copyright 2015 STMIK Bumigora
  16. 16. HTML Input Type=Image  Digunakan untuk mendefinisikan clickable button yang menggunakan gambar sebagai latar belakang dari button.  Dibuat menggunakan tag <input>.  Atribut dari tag <input>:  Contoh: <input type=“image” name=“btndownload” src=“download.jpeg”>  Output: Atribut Deskripsi type Menentukan jenis dari control input yaitu “image”. name Menentukan nama pengenal dari control input. src Menentukan lokasi dan nama file gambar. Copyright 2015 STMIK Bumigora
  17. 17. HTML Input Type=Hidden  Digunakan untuk mendefinisikan hidden field (field tersembunyi) yang dapat digunakan oleh pengguna untuk menyembunyikan data di dalam halaman dan selanjutnya dikirimkan ke server.  Control input ini tidak akan ditampilkan secara aktual pada halaman, namun tersembunyi pada kode HTML.  Dibuat menggunakan tag <input>.  Atribut dari tag <input>:  Contoh: <input type=“hidden” name=“rahasia” value=“1”> Atribut Deskripsi type Menentukan jenis dari control input yaitu “hidden”. name Menentukan nama pengenal dari control input. value Menentukan nilai yang akan dikirimkan. Copyright 2015 STMIK Bumigora
  18. 18. ELEMENT <select>  Digunakan untuk mendefinisikan dropdown list atau list menu.  Dropdown list dapat dibuat menggunakan tag <select>.  Atribut dari tag <select> Contoh: <select name=“lstjurusan”> …. …. </select> Atribut Deskripsi name Menentukan nama pengenal dropdown list. size Menentukan ukuran dari dropdown list. multiple Menentukan agar beberapa pilihan pada dropdown list dapat terseleksi atau terpilih. Copyright 2015 STMIK Bumigora
  19. 19. ELEMENT <select>  Pilihan pada dropdown list dapat digunakan menggunakan tag <option>.  Atribut dari tag <option>  Contoh: <select name=“lstjurusan”> <option value=“”>Pilihan …</option> <option value=“S1TI”>S1TI</option> <option value=“D3TI”>D3TI</option> <option value=“D3MI”>D3MI</option> </select> Atribut Deskripsi value Menentukan nilai yang akan digunakan atau dikirimkan ketika pilihan tertentu pada dropdown list terpilih. selected Menentukan pilihan tertentu pada dropdown list akan terpilih secara langsung ketika halaman tersebut diakses. Copyright 2015 STMIK Bumigora Output:
  20. 20. ELEMENT <select>  Contoh penggunaan atribut selected=“selected” pada tag <option> pembuka untuk menseleksi langsung pilihan tertentu ketika halaman diakses. <select name=“lstjurusan”> <option value=“”>Pilihan …</option> <option value=“S1TI”>S1TI</option> <option value=“D3TI”>D3TI</option> <option value=“D3MI” selected=“selected”>D3MI</option> </select>  Output: Copyright 2015 STMIK Bumigora
  21. 21. Element <select>  Contoh penggunaan atribut size pada tag <select> pembuka: <select name=“lstjurusan” size=“2”> <option value=“”>Pilihan …</option> <option value=“S1TI”>S1TI</option> <option value=“D3TI”>D3TI</option> <option value=“D3MI”>D3MI</option> </select>  Output: Copyright 2015 STMIK Bumigora
  22. 22. Element <select>  Contoh penggunaan atribut multiple=“multiple” pada tag <select> pembuka: <select name=“lstjurusan” size=“4” multiple=“multiple”> <option value=“”>Pilihan …</option> <option value=“S1TI”>S1TI</option> <option value=“D3TI”>D3TI</option> <option value=“D3MI”>D3MI</option> </select>  Tekan tombol Ctrl pada keyboard dan seleksi pilihan pada dropdown list untuk memilih lebih dari satu pilihan.  Output: Copyright 2015 STMIK Bumigora
  23. 23. ELEMENT <textarea>  Digunakan untuk mendefinisikan input field multi baris.  Atribut dari tag <textarea>  Contoh: <textarea name=“txtcatatan” cols=“100” rows=“5”> </textarea>  Output: Atribut Deskripsi name Menentukan nama pengenal dari textarea rows Menentukan jumlah baris dari textarea cols Menentukan jumlah kolom dari textarea. Copyright 2015 STMIK Bumigora
  24. 24. ELEMENT <button>  Digunakan untuk membuat clickable button.  Dibuat menggunakan tag <button>. <button type=“button”>…label…</button>  Contoh button dengan label “Peringatan”: <button type=“button”>Peringatan</button>  Aksi yang dapat dilakukan oleh button dapat diatur dengan menambahkan client- side scripting seperti Javascript atau VBScript.  Contoh button dengan label “Peringatan” dan menampilkan kotak dialog menggunakan bantuan fungsi alert dari Javascript ketika diklik: <button type=“button” onclick=“alert(‘Dilarang Menyontek!’)”> Peringatan </button>  Output: Setelah diklik Copyright 2015 STMIK Bumigora
  25. 25. HTML Atribut Placeholder  Digunakan untuk menentukan petunjuk singkat yang menjelaskan nilai yang diharapkan pada input field dengan tipe seperti text, search, url, tel, email dan password serta textarea.  Petunjuk singkat ditampilkan pada input field sebelum pengguna memasukkan nilai.  Dibuat dengan menambahkan atribut placeholder=“text” pada tag <input> dan <textarea>. Nilai text berupa petunjuk singkat yang ingin ditampilkan pada input field.  Contoh: <input placeholder=“Masukkan NIM Anda”> <textarea placeholder=“Masukkan catatan”></textarea>  Output: Copyright 2015 STMIK Bumigora
  26. 26. HTML Tag <label>  Digunakan untuk memberikan label pada form element.  Terdapat dua cara menggunakan tag <label> yaitu: 1. Menempatkan element di dalam tag pembuka dan penutup <label>. <label>NIM: <input type=“text” name=“txtnim” size=“15”> </label> 2. Menggunakan referensi atribut “id” dari element dengan menggunakan atribut for pada tag pembuka <label>. <label for=“txtnim”>NIM:</label> <input type=“text” name=“txtnim” id=“txtnim” size=“15”> Copyright 2015 STMIK Bumigora
  27. 27. HTML Tag <fieldset>  Digunakan untuk mengelompokkan element yang berkaitan di form.  Tag <fieldset> akan membuat kotak (box) mengelilingi element yang berkaitan. Tag <legend> dapat digunakan untuk membuat judul fieldset.  Atribut pada tag <fieldset>:  Contoh: Output: <form> <fieldset name="fslogin"> <legend>Form Pencarian</legend> <input type="text" name="txtcari"> <input type="submit"> </fieldset> </form> Copyright 2015 STMIK Bumigora Atribut Deskripsi name Menentukan nama pengenal untuk fieldset. disabled Menentukan sekelompok element yang berkaitan akan dinonaktifkan. Fieldset Legend
  28. 28. ADA PERTANYAAN? Copyright 2015 STMIK Bumigora
  29. 29. REFERENSI  http://www.w3.org  http://www.w3schools.com  http://www.tutorialspoint.com Copyright 2015 STMIK Bumigora
  30. 30. TERIMAKASIH Copyright 2015 STMIK Bumigora

×