HTML Chapter 7 - HTML Form

Nah, bertemu lagi dikesempatan kali ini dengan cuaca yang cerah. Kesempatan kali ini kita masih akan membahas tentang HTML yaitu tentang Form dan HTML5. Langsung saja kita masuk ke materinya.

I. Latar Belakang

   HTML <form> elemen mendefinisikan bentuk yang digunakan untuk mengumpulkan input dari user. Tag <input> elemen adalah elemen bentuk yang paling penting. <Input> elemen dapat ditampilkan dalam beberapa cara, tergantung pada jenis atribut seperti dibawah ini.

• <Input type = "text"> : Mendefinisikan satu baris kolom input teks
• <Input type = "radio"> : Mendefinisikan sebuah tombol radio (untuk memilih salah satu dari banyak pilihan)
• <Input type = "submit"> : Mendefinisikan sebuah tombol submit (untuk mengirimkan formulir)

    Tag <select> elemen mendefinisikan daftar drop-down. Tag <option> elemen mendefinisikan opsi yang bisa dipilih. Secara default, item pertama dalam daftar drop-down yang dipilih. Untuk menentukan pilihan pra-dipilih, tambahkan dipilih atribut untuk opsi menggunakan selected setelah value.

    Tag <textarea> elemen mendefinisikan field input multi-line ( text area ). Tag texarea harus memerlukan atribut yaitu menentukan jumlah terlihat dari baris dalam area teks. Atribut Cols menentukan lebar terlihat dari area teks.

    Tag <button> elemen mendefinisikan diklik tombol. Jika kita ingin membuat nama yang kita masukkan tidak dapat diubah bisa menggunakan tag readonly.

    HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
     Yang paling menarik elemen HTML5 baru:

• New unsur semantik seperti <header>, <footer>, <article>, dan <section>.
• New atribut elemen bentuk seperti nomor, tanggal, waktu, kalender, dan jangkauan.
• New elemen grafis : <svg> dan <canvas>.
• New unsur multimedia : <audio yang> dan <video>.

     Sejarah HTML sejak awal dari World Wide Web (W3), ada banyak versi HTML :

• 1989  :   Tim Berners-Lee invented www
• 1991  :  Tim Berners-Lee invented HTML
• 1993  :   Dave Raggett drafted HTML+
• 1995  :   HTML Working Group defined HTML 2.0
• 1997  :   W3C Recommendation: HTML 3.2
• 1999  :   W3C Recommendation: HTML 4.01
• 2000  :   W3C Recommendation: XHTML 1.0
• 2008  :   WHATWG HTML5 First Public Draft
• 2012  :   WHATWG HTML5 Living Standard
• 2014  :   W3C Recommendation: HTML5
• 2016  :   W3C Candidate Recommendation: HTML 5.1

II. Alat dan Bahan 

• Laptop
• Software Sublime Text
• OS Linux
• W3S

III. Tujuan 

      Yaitu untuk mempelajari dan memperdalam pemahaman dari HTML dasar.

IV. Tahap Pelaksanaan

     A. Form 

• Masukkan coding dibawah ini untuk membua form yang berisi komponen select, button, input, radio, textarea, password beserta atributnya.

•  Keterangan :
• Select : terdapat di line ke 10 sampai 17. Pada tag <select> ini harus menggunakan option yang digunakan untuk memilih dan memberi efek drop-down.
• Button : terdapat di line ke 20 dan 21. Ke 3 button tersebut berbeda, button line 20 menggunakan atribut onclik yang berfungsi jika kita tekan langsung akan tampil hasilnya. Sedangkan line 21 ada 2 button yaitu bertype submit dan reset. Submit ini digunakan untuk menuju ke proses selanjutnya bisa juga untuk menyimpan jika ada penyimpanannya. Reset digunakan untuk menghapus seluruh data yang diinputkan user. 
• Input : terdapat di line ke 1 dan 2. Pada line 1 hanya menggunakan type text untuk tempat user memasukkan inputan. Yang line ke 2 menggunakan readonly yang muncul ditampilan hanya dapat dibaca saja oleh user dan tidak dapat diganti. 
• Radio : terdapat di line ke 9 sampai line 11. Didalam tag radio harus menggunakan type="radio" yang digunakan untuk mengidentifikasi type apa yang kita pilih. Pada line 10 terdapat atribut tambahan yaitu checked yang berfungsi untuk membuat tampilan awal saat kita membuka file, radio langsung otomatis terisi sesuai checked yang kita masukkan dimana.
• Textarea : terdapat di line ke 20 dan 21. Saat kita membuat textarea harus merubah cols dan rows nya terlebih dahulu. Kita memerlukan berapa cols dan rows sesuai kebutuhan kita.
• Password : pada password ini menggunakan input type="password" jika kita memasukkan password tidak akan terlihat dan akan digantikan dengan bullet.

Hasil dari coding diatas seperti gambar diatas.

• Keterangan : 
• Input yang berwarna abu-abu tersebut berarti disable dan readonly. Disable itu kita masih bisa memasukkan kursor kedalam input sedangkan readonly kita hanya bisa membacanya tanpa kita bisa memasukkan kursor kedalam input.
• Pada tahun lahir jika kita tekan panah kecil yang ada disebelah kanan tersebut akan menghasilkan efek drop-down dan kita bisa memilih tahun lahir kita.

     B. HTML5

     - Contoh Sederhana HTML5 dan unsurnya

• Masukkan coding dibawah ini untuk membuat program sederhana HTML5

Hasil dari coding diatas. Meta itu hanya digunakan untuk melengkapi coding dari HTML 5.

    - Menambah elemen baru ke halaman HTML dan HTML5Shiv

• Masukkan coding dibawah ini untuk membuat elemen baru dan HTML5shiv untuk menyediakan kompitabilitas untuk IE broser tua dari IE 9.

• Keterangan :
• Line 9-16 merupakan Add New element untuk HTML menggunakan unsur css didalamnya. Tag <myHero> menunjukkan elemen baru ke halaman HTML.
• Line 5-7 merupakan sebuah komentar yang didalamnya terdapat Shiv.  Jika kita tidak dapat mendownload dan menyimpan HTML5 Shiv di dalam situs.

Hasil dari coding diatas yang didalanya terdapat Add new HTML dan HTMLShiv

- HTML5 Semantic

• Silahkan masukkan coding dibawah ini untuk membuat Semantic pada HTML5. Semantic jelas menggambarkan artinya untuk kedua browser dan pengembang. 

• Hasilnya keseluruhan akan seperti dibawah ini beserta penjelasan hasilnya.

Gambar A

Gambar B

• Keterangan :

Gambar 1. Menggambarkan penerapan fungsi section yang terjadi

Gambar 2. Menggambarkan peneraan fungsi dari Article, Header dan Nav(Facebook, Twitter, W3Schools)

Gambar 3. Menggambarkan penerapan fungsi dari figure (Gambar Peta Indonesia) dan figcaption (* Gambar Peta Nusantara)

Gambar 4. Menggambarkan penerapan fungsi dari Aside untuk beberapa konten selain dari konten itu ditempatkan.

Gambar 5. Menggambarkan penerapan fungsi dari footer

    - Migrasi HTML5

• Masukkan coding dibawah ini untuk membuktikan perbedaan sintaks dari HTML4 dan HTML5.

 

Gambar 1. Sintaks dengan HTML5

 

Gambar 2. Lanjutan sintaks HTML5

 

Gambar 3. Sintaks dengan HTML 4. Letak Perbedaannya terletak di Line 1.

 

Gambar 4. Hasil dari kedua sintaks diatas. Walaupun berbeda versi tapi hasilnya sama. Akan tetapi HTML5 memiliki banyak fitur terbaru dibandingkan HTML 4.

V. Kesimpulan

    Dari sharing yang kita bahas diatas dapat disimpulkan bahwa form terderi dari banyak komponen pendukung yaitu select, button, input, textarea, radio, penggunaan atribut password, penggunaan atribut yang readonly dan disable pada input. Dan versi baru dari HTML5 yang memiliki komponen-komponen terbaru yang dapat mendukung semua browser modern. 

VI. Referensi

• http://www.w3schools.com
• https://id.wikipedia.org/wiki/HTML5

Sekian dan Terimakasih.

SMK Bisa !!

Wasalamu'alaikum wr.wb.