HTML5 adalah spesifikasi terbaru untuk HTML, bahasa yang dibaca browser web untuk menampilkan halaman web. HTML5 memiliki banyak fitur baru yang dimaksudkan untuk mempermudah pembuatan situs web dan pengalaman orang-orang dalam menggunakan situs web tersebut dengan lebih baik. Di antara fitur-fitur tersebut terdapat banyak peningkatan pada formulir web
Dukungan untuk fitur formulir web HTML5 meningkat, tetapi tidak semua browser web mendukung fitur HTML5 dengan cara yang sama. Halaman ini dimaksudkan untuk menjelajahi fitur baru tersebut dan membantu Anda memahami browser mana yang mendukung fitur mana dan sejauh mana. Secara keseluruhan, ini mewakili keadaan formulir HTML5 saat ini. Namun, meskipun Anda masih perlu mendukung browser lama yang tidak mendukung semua fitur baru, sadari bahwa Formulir Web HTML5 adalah penyempurnaan. Anda dapat menggunakan semua jenis atribut dan input baru, dan formulir Anda akan tetap berfungsi di browser kuno
Bagan di bawah mencantumkan versi terbaru dari setiap browser utama. Halaman individual (mis. g. halaman untuk placeholder) menunjukkan dukungan browser sebelumnya
Dukungan Browser untuk Jenis Input HTML5 Baru
Firefox
Safari
Safari
Chrome
Opera
IE
AndroidEmail4+5+3.1+6+/10+10.6+10+4+Tel4+5+3.1+6+10.6+10+2.3+Url4+5+3.1+6+/10+10.6+10+2.3+Search4+5+4+6+10.6+9/10+4+Color29+8+8-20+11+11-4.4+Number29+5+3.2+7+9+10+2.3+Range23+4+5+6+11+10+4.2+Date32-7-5+20+9+11+4.4+TextAllAllAllAllAllAllAllButtonAllAllAllAllAllAllAllHiddenAllAllAllAllAllAllAllPasswordAllAllAllAllAllAllAllCheckboxAllAllAllAllAllAllAllRadioAllAllAllAllAllAllAllFileAllAllAllAllAllAllAllSubmitAllAllAllAllAllAllAllResetAllAllAllAllAllAllAll
Semua jenis input baru didukung di semua browser karena mereka akan mengirimkan datanya seolah-olah itu adalah input "teks". Penilaian ini didasarkan pada apakah mereka melakukan sesuatu di atas dan di luar dan/atau memvalidasi terhadap jenis data yang relevan bagi mereka
Dukungan Browser untuk Atribut Input HTML5 Baru
Dukungan Browser untuk Elemen Formulir HTML5 Baru
Firefox
Safari
Safari
Chrome
Opera
IE
AndroidMeter16+5.2+8-8+11+11-4.4+Progress6+5.2+7+6+10.6+10+4.4+Output4+5.1+5+10+11+10+2.3+Keygen3.6+4+7-6+10.6+11-2.3+Datalist4+8-8-20+9+10+4.4+OptionAllAllAllAllAllAllAllLabelAllAllAllAllAllAllAll
Formulir JavaScript dan HTML5
Pengujian untuk Dukungan
Jika Anda bermaksud menulis JavaScript untuk meniru fungsionalitas formulir HTML5, Anda mungkin ingin terlebih dahulu menguji kemampuan browser saat ini dan menulis JavaScript sebagai cadangan. Di bawah ini adalah bagaimana Anda dapat menguji dukungan atribut. Pengujian fitur yang lebih akurat dapat dilakukan melalui library JavaScript Modernizr yang sangat baik
// Function to test for attribute support function elSupportsAttr(el, attr) { return attr in document.createElement(el); } // Usage if (!elSupportsAttr("textarea", "placeholder")) { // your custom fallback }Pesan Validitas Kustom
Anda dapat mengganti pesan kesalahan validitas default melalui JavaScript
Lebih Menyenangkan JavaScript
HTML5 memiliki sejumlah metode JavaScript yang berguna untuk memanipulasi formulir
// increase value by n input.stepUp(n) // decrease value by n input.stepDown(n) // return value as number instead of string input.valueAsNumber // return value in date format instead of string input.valueAsDateFormulir CSS dan HTML5
Kelas semu
CSS3 memiliki sejumlah kelas semu baru yang dapat memilih elemen formulir yang berada di status tertentu
Itu. not() pemilih tidak khusus untuk formulir, tetapi berguna untuk penyeleksi seperti. not([type=submit]) untuk memilih semua input selain tombol kirim
Itu. pemilih semu yang valid akan memilih elemen legenda dari kumpulan bidang yang berisi input yang valid di Safari 5
:required { } :optional { } :valid { } :invalid { } :default { } :in-range { } :out-of-range { } :not()_Pemilih atribut
Pemilih atribut membantu memilih elemen yang berisi atribut tertentu. Karena formulir HTML5 memiliki banyak atribut input baru, ini berguna untuk menargetkannya
[autofocus] { } [autocomplete] { } [list] { } [placeholder] { } [type=range] { /* and other types */ } [multiple]Penataan Gaya Khusus Vendor
Ada beberapa aspek visual dari formulir HTML5 yang mungkin tidak jelas bagaimana gaya dengan CSS. Misalnya teks placeholder, atau cara melawan gaya WebKit default dari pencarian. Beberapa potongan seperti itu di sebelah kanan