Magic Adakabrada!

Mainan Web Design 2015: Form HTML

Mainan ini bisa Anda gunakan untuk latihan selama pekan Lebaran Qurban 2015. Perkuliahan dan materi akan disampaikan secara Online melalui blog ini. Berikut ini beberapa referensi materi mengenai Form yang bisa Anda ikuti,

  • Buku Learning Web Design, Chapter 9 “Form”, halaman 147.
  • Element Tag dasar untuk Form HTML : http://www.w3schools.com/html/html_forms.asp
  • Berbagai jenis Input Form : http://www.w3schools.com/html/html_form_input_types.asp
  • Attribute yang bisa digunakan pada Input Form : http://www.w3schools.com/html/html_form_attributes.asp
  • Info mengenai kompatibilitas Tag Form terhadap jenis Browser yang Anda pilih : http://www.wufoo.com/html5/
  • Bentuk form yang aneh, sesuai karakteristik inputan : http://html5doctor.com/html5-forms-introduction-and-new-attributes/

Form yang Anda buat harus menganut beberapa prinsip umum berikut ini,

  1. Tampilan input dibuat sesuai dengan karakteristik data yang akan diolah atau disimpan. Gunakan bentuk input text, number, option, single choice atau multiple, atau banyak lagi untuk mempermudah user dalam memberikan data inputan
  2. Pastikan ada petunjuk pengisian inputan, bisa dalam bentuk label nama input atau keterangan yang lebih detil
  3. Minimalisir kemungkinan User memberikan inputan data yang salah! misalnya pada kasus input data tanggal.
  4. Berikan pesan kesalahan atau validasi kesalahan, jika ternyata User tidak sesuai dalam memberikan data inputan. Misalnya ketika input harus/wajib diisi (tidak boleh kosong) maka tambahkan attribute required.
  5. Jangan lupa tambahkan button action pada akhir form, dan sesuaikan penamaannya

Berikut ini adalah contoh penggunaan beberapa tag Input pada form HTML,

<html>
<head>
 <title>Belajar HTML Form Registrasi Mahasiswa</title>
</head>
<body>
 <h1>Form Input Mahasiswa Baru</h1>
 <p>silahkan masukkan data Anda dengan benar dan lengkap </p>
 <form action="coba.html" method="" id="fregister" >
 <table>
 <tr>
 <td><label for="namadep">Nama Depan</label></td>
 <td></td>
 <td><input type="text" id="namadep" name="namadep" required /></td>
 </tr>
 <tr>
 <td><label for="namabel">Nama Belakang</label></td>
 <td></td>
 <td><input type="text" id="namabel" name="namabel" maxlength="5" /></td>
 </tr>
 <tr>
 <td><label for="tgllahir">Tanggal Lahir</label></td>
 <td></td>
 <td><input type="date" id="tgllahir" name="tgllahir" /></td>
 </tr>
 <tr>
 <td><label for="jk">Jenis Kelamin</label></td>
 <td></td>
 <td>
 <input type="radio" id="jk[1]" name="jk" value="1" /> Pria
 <input type="radio" id="jk[2]" name="jk" value="2" /> Wanita
 </td>
 </tr>
 <tr>
 <td><label for="prodi">Pilihan Prodi</label></td>
 <td></td>
 <td>
 <input type="checkbox" id="prodi[1]" name="prodi[1]" value="1" /> D3MI
 <input type="checkbox" id="prodi[2]" name="prodi[2]" value="1" /> D3TK
 <input type="checkbox" id="prodi[3]" name="prodi[3]" value="1" /> D3KA
 </td>
 </tr>
 <tr>
 <td><label for="pic">Upload Photo</label></td>
 <td></td>
 <td><input type="file" id="pic" name="pic" /></td>
 </tr>
 <tr>
 <td><label for="hobi">Hobi</label></td>
 <td></td>
 <td>
 <select id="hobi" name="hobi" multiple>
 <option value="mancing">Mancing</option>
 <option value="baca">Membaca Buku</option>
 <option value="nonton" selected>Nonton TV</option>
 <option value="games">Games</option>
 </select> 
 </td>
 </tr>
 <tr>
 <td><label for="keren">Tingkat Kekerenan</label></td>
 <td></td>
 <td>
 <input type="number" id="keren" name="keren" max="10" step="2" 
 />
 </td>
 </tr>
 <tr>
 <td><label for="warna">Warna Kesukaan</label></td>
 <td></td>
 <td>
 <input type="color" id="warna" name="warna" />
 </td>
 </tr>
 <tr>
 <td colspan="3" align="right">
 <input type="submit" value="Simpan" /> &nbsp;
 <input type="reset" > </td>
 </tr>
 </table>
 </form>
 
</body>
</html>

Tentunya masih banyak lagi jenis tipe input dan attribute yang harus Anda coba.

Mainan Form HTML?

Anda diminta untuk mengerjakan mainan berikut ini, sebagai bahan latihan dirumah. Mainan ini untuk menggantikan 2 pertemuan yang hilang pada pekan ini. Silahkan ikuti petunjuk permainan dibawah ini,

  1. Buatlah Form Input menggunakan HTML, Anda diminta membuatnya dengan design dan layout yang menarik, mudah dipahami dan sesuai karakteristik data.
  2. Untuk NIM (digit terakhir GENAP), buat form PENDAFTARAN SISWA SMA untuk menerima inputan :
    1. NIS (nomor induk siswa), terdiri dari 6 digit/karakter angka
    2. Nama Lengkap, harus terdiri dari 3 atau 50 karakter saja
    3. Tempat Lahir
    4. Tanggal Lahir
    5. Alamat Orang Tua, diisi dengan alamat lengkap
    6. Kecamatan (hanya untuk area bandung saja)
    7. Jenis Kelamin, hanya untuk pilihan Pria atau Wanita
    8. No. Telepon, sesuai dengan format nomer yang berlaku di Indonesia
    9. Hobi siswa, dalam bentuk pilihan Hobi
    10. Ukuran Baju, untuk pilihan S, M, L, XL
  3. Untuk NIM (digit terakhir GANJIL), buat form REKAP DATA BARANG untuk menerima inputan :
    1. Kode Barang, terdiri dari 5 digit/karakter
    2. Nama Barang, harus terdiri dari 3 atau 50 karakter saja
    3. Kategori Barang, sesuai dengan pilihan kategori (makanan, elektronik, obat, pakaian, minuman, dll)
    4. Tanggal Masuk
    5. Tanggal Kadaluarsa
    6. Area Penjualan, memilih beberapa target kota distribusi barang (misal bandung, jakarta, semarang, subang, dll)
    7. Harga Barang
    8. Upload Gambar Barang
    9. Alamat Distributor Resmi
    10. Jumlah Stok Barang
  4. Pastikan setiap Form Input yang Anda buat sesuai dengan karakteristik data yang telah disampaikan diatas (pada point 2 dan 3)
  5. Jangan lupa untuk memastikan setiap inputan harus diisi oleh user.

Cara bermain?

Kirim hasil mainan yang telah Anda buat, ke email tambunan. Kiriman file dalam bentuk HTML yang siap dijalankan. Kiriman diterima paling lambat sebelum hari Rabu 30 Oktober 2015.

Jika ada hal2 yang membingungkan, silahkan tanyakan lewat email atau komentar dibawah ini.

 

 

 

 

 

tambunan

, , ,

7 responses to “Mainan Web Design 2015: Form HTML”

  6. […] Lalu save dengan format .html untuk membuka atau menampilkan nya Klik kanan pada html yang telah di save tadi , lalu open with menggunakan browser anda ( Firefox,Chrome,Opera, dan Sejenis nya) Lalu lihat apa yang tampil, mudah bukan? Tentu nya mudah kan sebab ini dasar membuat html . Mungkin itu saja dlu yang dapat saya jelaskan, jika ada yang ingin ditanyakan dapat mengirim email ke [email protected] . Semlikum . Eh iya jika kalian ingin belajar lebih banyak dapat membuka referensi di : http://www.duniailkom.com Jika ingin belajar membuat form di html silahkan ke link berikut : http://tambunan.staff.telkomuniversity.ac.id/2015/09/16/mainan-web-design-2015-form-html/ […]

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *