Fitur-fitur HTML5 yang Bagus Tapi Jarang Digunakan

HTML5 adalah penyempurnaan dari HTML versi sebelumnya. Fitur-fitur baru yang hadir semakin memudahkan developer dalam mengembangkan aplikasi web lebih cepat. Namun dari sekian banyak fitur yang dibawa oleh HTML5, belum banyak yang benar-benar memanfaatkannya. Alasan paling umum adalah terkait kompatibilitas browser. Meskipun hari ini umumnya semua browser besar sudah menerapkan fitur-fitur HTML5, tapi sebagian developer masih mempertimbangkan target pengguna aplikasi mereka yang boleh jadi masih ada yang menggunakan browser versi lawas. Sehingga wajar bila fitur-fitur penting dalam sebuah aplikasi web masih mengandalkan dukungan penuh JavaScript dan plugin lainnya.

Baca juga: Pengenalan HTML5

Namun bila Kamu developer web dan Kamu yakin rata-rata pengguna aplikasimu sudah menggunakan browser terbaru (misalnya, tidak ada lagi yang pakai browser IE6-7 :P), Kamu bisa pertimbangkan untuk mulai memberdayakan kekuatan HTML5. Berikut ini kami hadirkan beberapa fitur bawaan HTML5 yang bermanfaat yang umumnya belum banyak digunakan.

1.ATRIBUT REQUIRED DAN AUTOFOKUS

Required adalah fitur validasi dasar di HTML5. Jika sebuah elemen input memiliki atribut required, maka jika elemen tersebut kosong saat form disubmit akan muncul pesan “Please fill this out” atau kalimat sejenis lainya. Pesan error akan muncul berbeda tergantung browser. Pada contoh di bawah ini saya menggunakan browser Mozila Firefox.

Dalam kasus diatas jika user lupa mengisi semua form input yang ada dan langsung mengklik tombol submit dan yang terjadi muncul peringatan seperti gambar diatas.

AutoFokus adalah fitur HTML5 yang membuat input langsung tersorot saat membuka form, biasanya elemen input pertama. Ini sangat bermanfaat sehingga pengguna tidak perlu meletakan kursor secara manual di input form.

Pada ilustrasi di atas ketika halaman form tampil, kursor akan otomatis aktif pada kolom input tersebut tanpa pengguna perlu menggeserkan kursor ke arah form input tersebut.

2.CONTENT EDIT TABLE

Sesuai dengan namanya, fitur ini memungkinkan pengguna untuk mengedit table pada sebuah content secara langsung dengan menggunakan media penyimpanan lokal.

Dengan fitur ini kita bebas mengedit konten tanpa harus merubah codinganya. Lebih lengkap teknisnya silakan kunjungi referensi DISINI

3.LOCAL STORAGE

Fitur ini akan menyimpan data string ke dalam localstorage browser, dan akan tetap tersimpan meskipun kita menutup Tab browser atau menutup browser. Sebelumnya mungkin Kamu pernah mendengar Google Gears, sebuah plugin tambahan untuk browser yang memungkinkan developer menyimpan data sementara. Kemudian ada juga Flash to Javascript dan Dojo Toolkit yang fungsinya sama. Namun kesemua teknologi storage tersebut terkadang merepotkan pengembang dalam pembuatan aplikasi karena API yang berbeda-beda.

HTML5 punya jawabannya! dari permasalahan tersebut dalam fitur ini munculah terobosan baru dalam penyimpanan data, data akan disimpan secara lokal tanpa mempengaruhi kinerja website tentunya.

contoh diatas hanya sebagian kecil dari implementasi LocalStorage sendiri,kalian bisa mencobanya, referensinya DISINI

4.EMAIL INPUT VALIDATION

Seperti contoh di atas kalian dapat mengetahui dengan jelas bahwa fitur ini merupakan fitur validasi ketika kita memasukan alamat email tidak sesuai dengan aturan alamat email maka akan muncul peringatan. Caranya mudah, disamping kita menggunakan pengecekan di sisi server kita juga dapat memanfaatkan fitur ini cukup dengan mengeset atribut typenya dengan "email". Referensinya dapat dilihat disini

5.REGULAR EXPRESSION

RegularExpression atau yang biasa disebut pattern merupakan sebuah teknik yang digunakan untuk mencocokan string teks berdasarkan pola tertentu. Contohnya kita akan membuat validasi input agar inputan hanya boleh berupa huruf kapital dan huruf kecil tanpa spasi. Validasi ini adalah validasi pattern tingkat lanjut di dalam HTML5. Jika Kamu terbiasa dengan regex, Kamu bisa membuat validasi input dengan sangat mudah tanpa bantuan jQuery.

coba cermati sourcecode berikut ini dengan notifikasi tersebut.

pattern ini dapat disesuaikan dengan kebutuhan kalian, dengan kombinasi kompleks lainya.

5.ELEMENT MARK

Element Mark atau yang disebut tag mark digunakan untuk menandai sebuah teks atau menyorot suatu teks yang akan ditandai.

Kodenya pun sangat sederhana.

6.ELEMENT OUTPUT

ElementOutput merupakan hasil dari perhitungan atau proses yang kemudian ditampilkan seperti ini.

7.INPUT RANGE

Sebenarnya input ini sama dengan input type number, hanya beda tampilannya saja dan cara penggunaanya. Pada input type number ketika kita ingin menginputnya kita harus mengetiknya di dalam inputan tersebut, tapi pada input type range kita hanya perlu menggesernya saja. Contoh dan sourceodenya sama seperti pada bagian ELEMENT OUTPUT di atas.

8.ATRIBUT DATA

Atribut Data memungkinkan kita menerapkan data yang dibutuhkan ke sebuah elemen. Sebelum adanya HTML5 dalam menetapkan data kita sangat mengandalkan penggunaan atribut 'class' atau 'rel' untuk menyimpan cuplikan kecil data yang dapat kita gunakan di situs web kita. Intinya fitur ini dapat menyimpan data lain di luar atribut yang sudah tersedia pada suatu elemen secara pribadi ke halaman atau aplikasi.

Referensi: https://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520