informasi umum

HTML5 saat ini menjadi hal yang umum. Perlu diketahui fitur-futur utama dan bagaimana cara penggunaannya oleh developer. HTML5 tidak hanya berisi tambahan markup tapi juga API yang dapat dipanggil melalui JavaScript. Jika Anda belum terbiasa dengan HTML5, dalam tulisan ini saya paparkan fitur-fitur utama yang perlu diketahui. Anda akan belajar mengenai audio/suara, video, element kanvas, beberapa tipe masukan, berbagai macam fitur form dan atribut data.

Catatan:
Beberapa fitur seperti Web Sockets dan Web Storage biasa digunakan dalam HTML5 namun, fitur-fitur tersebut memiliki spesifikasi yang berbeda antara satu peramban dan peramban lainnya. Dalam tulisan kali ini fitur-fitur tersebut tidak dibahas.

Elemen Audio dan Video

HTML5 menawarkan dua elemen baru yaitu <audio> dan <video> untuk menempelkan berkas audio dan video dalam halaman web. Dengan demikian Anda tidak perlu menggunakan piranti tambahan (add-on) pihak ketiga atau plugin untuk memutar berkas audio dan video. Anda bisa memanfaatkan dukungan HTML5 yang sudah ada. Penggunaan elemen-elemen tersebut sangatlah mudah, sebagai contoh markup berikut:

<audio src="kalimba.mp3" controls loop="loop" autoplay="autoplay"></audio>
<video src="wildlife.webm" controls loop="loop" autoplay="autoplay"></video>

Baris pertama dari markup di atas adalah elemen <audio> untuk memutar berkas kalimba.mp3. Tampilan pada layar akan muncul tombol play/pause/volume. Atribute loop menandakan bahwa berkas akan diputar berulang-ulang. Dan atribut autoplay berarti berkas tersebut akan diputar segera setelah elemen berhasil dirender di peramban. Elemen <video> memiliki atribut yang sama dengan <audio> akan tetapi memutar berkas yang berbeda yaitu wildlife.webm. Gambar berikut menunjukkan tampilan elemen <audio> di peramban Chrome.

Tidak semua peramban mendukung format audio dan video yang sama, Anda perlu menyediakan mekanesme fallback jika peramban tidak mendukung format tertentu. Anda dapat menanganinya dengan memberikan beberapa format audio dan video seperti contoh berikut.

<video controls>
  <source src="wildlife.webm" />
  <source src="wildlife.mp4" />
</video>

Markup di atas menggunakan elemen <video> namun kali ini tidak menentukan nama berkas di atribut src melainkan menggunakan elemen <source> yang berada di dalamnya. Anda dapat memiliki rankaian elemen <source> untuk format media yang didukung (dalam contoh ini adalah webm dan mp4). Jika peramban tidak mendukung format maka akan diabaikan dan mencoba memutar format berikutnya.

Anda juga dapat mengendalikan elemen <audio> dan <video> secara program. Elemen <audio> dan <video> mengekspos method-method dan event-event yang dapat digunakan untuk menangani script di sisi klien. Sebagai contoh, Anda dapat membuat pemutar audio dan video sendiri yang memiliki tombol yang menarik dan merubah tampilan sesuai dengan keinginan. Kode jQuery berikut menunjukkan bagaimana berkas audio dapat diputar dan dihentikan secara pemprograman.

$(document).ready(function () {
    $("#btnPlay").click(function () {
        var audio = $("audio").get(0);
        audio.play();
    });

    $("#btnPause").click(function () {
        var audio = $("audio").get(0);
        audio.pause();
    });
});

Sebagaimana dapat Anda lihat, elemen DOM audio memiliki method play() dan pause() yang digunakan untuk memutar dan menghentikan perkas audio.

Elemen Canvas

Walaupun HTML dapat menampilkan gambar, namun terbatas pada gambar yang sudah ada. Dahulu, tidak memungkinkan untuk menggambar di dalam peramban secara pemprograman. Elemen <canvas> pada HTML5 menyediakan API yang cukup untuk menggambar di dalam peramban. Elemen <canvas> dapat digunakan untuk membuat permainan, menampilkan grafik/bagan, membuat pratayang gambar dan lain sebagainya berbasis HTML5. Elemen <canvas> pada dasarnya merupakan elemen yang sederhana, seperti contoh berikut:

<canvas height="500" width="500"></canvas>

Baris markup di atas mendefinisikan ukuran kanvas seluas 500 x 500 titik. Bagaimanapun juga markup di atas tidak berguna, sampai ada gambar yang ditorehkan di atasnya. Anda dapat menggambar garis, kurva, bentuk, tulisan dan gambar menggunakan API canvas. Sebagai contoh, kode di bawah menggambar tulisan pada sebuah canvas.

$(document).ready(function () {
    var canvas = $("canvas").get(0);
    var context = canvas.getContext("2d");
    context.fillStyle = "blue";
    context.font = "bold 30px Arial";
    context.fillText("Hello World!", 50, 100);
});

Kode di atas mengambil referensi ke elemen canvas. Method getContext() mengembalikan apa yang dinamakan sebagai drawing context – sebuah obyek yang digunakan untuk melakukan operasi gambar. Property fillStype dari obyek context diset warna biru menandakan warna dari tulisan. Property font diset sebagai Arian dengan ukuran 30px, dan bentuk tulisan tebal. Akhirnya, method fillText digunakan untuk menggambar string pada permukaan canvas pada koordinat (50, 100). Gambar di bawah menunjukkan canvas dengan tulisan sesuai dengan kode di atas.

Jenis Masukan Baru

Ketika membuat formulir HTML, sering kali berhubungan dengan jenis dan format data tertentu seperti tanggal, jam, warna, rentang nilai, URL, alamat sur-el, dan lain sebagainya. HTML5 menyediakan banyak jenis masukan baru untuk menyederhanakan pekerjaan Anda. Beberapa diantaranya adalah:

• number (angka)
• date / time (tanggal / jam)
• color (warna)
• range (rentang nilai)
• url
• email (sur-el)
• tel (telepon)

Tidak semua peramban mendukung jenis masukan tersebut sama persis. Sebagai contoh, setelah mengatur jenis masukan menjadi tanggal, pada Chrome akan tampak seperti gambar berikut.

Jenis masukan tersebut juga termasuk validasi format. Sebagai contoh, jika Anda mengetik string pada jenis masukan angka, pada Chrome akan menampilkan pesan galat seperti berikut.

Fitur-Fitur Form yang Lain

Sebagai tambahan jenis masukan baru, HTML5 menawarkan fitur-fitur yang menyederhanakan penanganan formulir dan masukan, diantaranya:

• Field masukan dapat ditandai sebagai wajib diisi dengan menambahkan atribut required.
• Field masukan dapat ditandai sebagai field yang difokuskan pertama kali saat formulir dimuat dengan menambahkan atribut autofocus.
• Field masukan dapat memiliki tanda air dengan menambahkan atribut placeholder.
• Action dan method formulir dapat diset di tombol submit dengan atribut formaction dan formmethod.

Walaupun kita tidak membahas fitur-fitur di atas secara mendalam, namun mari kita lihat beberapa contoh penggunaannya.

Banyak formulir data entri menginginkan beberapa data harus diisi. Untuk menanganinya, HTML5 menyediakan atribut required. Simak contoh berikut:

<input id="text1" type="text" required/>

Perhatikan contoh di atas, elemen masukan memiliki atribut required. Jika Anda tidak memasukkan nilai apapun ke text1, peramban akan menampilkan pesan galat dan menolak untuk mengirimkan data formulir ke server. Gambar berikut menunjukkan pesan galat tersebut.

Acap kali Anda ingin menampilkan informasi tanda air pada field masukan. Sebagai contoh pada kotak pencarian, Anda bisa menambahkan tanda air “Cari barang…”. Dengan HTML5 Anda cukup menambahkan atribut placeholder di elemen masukan.

<input id="text1" type="text" placeholder="Cari barang..." />

Jenis masukan baru HTML5 selain menyediakan format yang umum, juga menyediakan format khusus dengan pola yang dapat ditentukan sendiri. Sebagai contoh, untuk memvalidasi masukan kode pos, Anda dapat menggunakan regular expression. Berikut adalah contoh regular expression untuk kode pos Indonesia.

<input id="text1" type="text" pattern="^\s*([1-9][0-9]{4})\s*$" required />

Regular expression akan memvalidasi masukan diawali dengan satu digit angka 1-9 dan diikuti oleh empat digit angka 0-9. Jika data tidak valid, akan muncul pesan galat sebagai berikut.

Pada umumnya sebuah formulir akan dikirim ke alamat dan dengan method (GET/POST) yang tercantum pada elemen formulir. pada HTML5 memungkinkan Anda untuk menentukannya di masing-masing tombol. Perhatikan contoh berikut:

<input id="Submit1" type="submit" value="Submit" formaction="/home/processform" formmethod="post" />

Sebagaimana Anda lihat, atribut formaction akan mengirim data ke server dengan alamat /home/processform, meggunakan method POST sesuai dengan atribut formmethod.

Atribut-Atribut Data Kustom

Pada umumnya elemen HTML memiliki kumpulan atibut yang sudah baku (baik melalui markup ataupun script di sisi klien). Atribut Data Kustom (data-*) memungkinkan Anda mendefinisikan atribut Anda sendiri pada sebuah elemen HTML. Atribut-atribut kustom tersebut tidak berdampak pada tampilan, tapi Anda dapat mengakses dan mengubah nilainya menggunakan script di sisi klien. Atribut tersebut dimulai dengan data-*, di mana * dapat berisi apa saja, contohnya data-validationmessage. Contoh, beberapa plug-ins jQuery menggunakan atribut data-* untuk menentukan tooltip untuk elemen DOM. Beberapa pustaka validasi menggunakan atribut data-* untuk menentukan metadata seperti pesan galat dan jenisnya.

Contoh berikut menunjukkan bagaimana atribut data kustom digunakan.

<input type="text" id="text1" data-validationmessage="Invalid input!!!" />

Markup di atas berisi atribut data-validationmessage dengan nilai “Invalid input!!!”. Anda dapat membaca atribut tersebut melalui pemprograman sebagai berikut.

$(document).ready(function () {
    alert($("#text1").data("validationmessage"));
});

Contoh kode jQuery di atas menggunakan method data() untuk membaca atribut data-validationmessage. Sebagai catatan, Anda tidak perlu menambahkan data- di depannya ketika menggunakan method data(). Anda juga dapat menggunakan JavaScript murni tanpa jQuery untuk mengakses atribut-atribut data-*.

Rangkuman

HTML5 menawarkan banyak fitur. Tulisan ini hanya membahas beberapa fitur penting yang mungkin bermanfaat untuk Anda. Kita bahas elemen <audio>, <video>, dan <canvas>, serta jenis-jenis masukan baru. Selain itu dibahas juga pengembangan formulir dan atribut data kustom. Walaupun beberapa fitur tidak diterapkan sama persis untuk tiap-tiap peramban, Anda dapat memulainya sekarang. Website-website modern dan perkakas pengembang telah mencoba memanfaatkan fitur-fitur HTML5 dan memahami teknologi tersebut merupakan hal yang penting bagi pengembang web.