Saya baru-baru ini memposting bahwa saya telah memutuskan untuk menggunakan Opera dalam demonstrasi HTML5 saya untuk RMOUG Training Days 2011. Seperti yang saya nyatakan dalam posting itu, alasan utama untuk menambahkan browser web Opera ke set yang sedang didemonstrasikan adalah karena ia mendukung beberapa fitur HTML5 lebih baik dari browser lainnya. Posting ini akan mengilustrasikan salah satu kasus berikut: Pemilih Tanggal HTML5.
Salah satu hal kecil tapi menyenangkan tentang menggunakan Flex atau pustaka JavaScript seperti JQuery adalah ketersediaan mekanisme bawaan untuk kontrol masukan yang ramah pengguna. Secara khusus, pemilih tanggal yang baik selalu dihargai.
HTML5 saat ini dijadwalkan untuk menawarkan widget pemilih tanggal standar yang dapat digunakan dengan tag HTML. Dalam posting ini, saya melihat keadaan pemilih tanggal HTML5 di versi non-beta terbaru dari lima browser web populer (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8, dan Opera 11).
HTML mendukung berbagai bidang masukan melalui tag masukan. Berbagai jenis bidang masukan ditentukan melalui atribut inputelemen type. HTML5 secara dramatis meningkatkan jumlah yang tersedia typeyang dapat ditentukan. Beberapa dari nilai-nilai baru untuk typeatribut termasuk yang terkait dengan tanggal / waktu: date, datetime, datetime-local, month, week, dan time. Masing-masing diilustrasikan dalam cuplikan kode HTML berikut.
HTML5 Date Pickers Demonstrated
Input Type
Input Field
date
datetime
datetime-local
month
week
time
Dari lima web browser sebelumnya saya terdaftar, Opera menyediakan sejauh implementasi yang paling canggih dari tanggal / waktu types dari inputtag. Dimulai dengan yang positif, beberapa cuplikan layar pertama menunjukkan bagaimana HTML sederhana ini ditampilkan di Opera 11.
Opera 11 Rendering Awal Halaman
Opera 11 Masukkan Tag "tanggal" Atribut
Opera 11 Masukkan Tag "datetime" Atribut
Opera 11 Masukkan Tag Atribut "datetime-local"
Opera 11 Masukkan Tag "bulan" Atribut
Pelaksanaan Opera menyoroti seluruh bulan yang akan dipilih.
Opera 11 Masukkan Tag "minggu" Atribut
Opera menyoroti minggu yang akan dipilih.
Opera 11 Masukkan Tag "waktu" Atribut
Opera 11 - Semua Bidang Input Dipilih
Implementasi Opera di bidang input tanggal / waktu sangat mengesankan. Saya berharap hal yang sama dapat dikatakan untuk browser non-beta lainnya. Sayangnya, browser lain tidak memberikan dukungan untuk jenis bidang ini di mana pun yang mendekati elegan ini. Faktanya, saya rasa tidak ada gunanya memasukkan semua cuplikan layar mereka di sini. Sebagai gantinya, saya hanya menunjukkan snapshot layar dari masing-masing setelah mengisi semua bidang. Dalam kebanyakan kasus, browser hanya memperlakukan kolom ini sebagai kolom jenis "teks" sederhana.
Firefox 3.6 Pemilih Tanggal: Mereka Hanya Teks
Pemilih Tanggal Internet Explorer 8: Mereka Hanya Teks
Safari 5 Date Picker: Mereka Hanya Teks dengan Sorotan Fokus
Pemilih Tanggal Chrome 8: Tidak Cukup Ada
Meskipun tidak seanggun perawatan Opera untuk bidang tanggal / waktu, browser Chrome memperlakukan bidang ini lebih dari teks dan membatasi apa yang dapat dimasukkan ke dalam bidang. Sayangnya, tidak ada popup pilihan tanggal / waktu yang bagus seperti yang disediakan Opera. Namun, penyorotan bidang terfokus itu bagus dan fakta bahwa data yang dipilih agak tanggal / waktu seperti dalam format membantu.
Kesimpulan
Saya menantikan hari ketika browser utama secara konsisten mendukung kontrol tanggal / waktu standar sehingga tag "masukan" HTML sederhana dengan atribut yang sesuai akan menampilkan pemilih tanggal / waktu yang elegan dan bergaya di browser mana pun. Opera 11 saat ini memimpin paket dan memberikan ilustrasi terbaik tentang apa yang bisa dilakukan.
Artikel ini, "Pemetik Tanggal HTML5", awalnya diterbitkan oleh JavaWorld.
