Bagaimana cara agar browser saya mendukung html5?

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

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

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

var emailField = document.getElementById("emailField");
	emailField.setCustomValidity("testing");

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.valueAsDate

Formulir 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

Bagaimana cara mengaktifkan HTML5 di Chrome?

Bagaimana cara mengaktifkan HTML5 di browser saya?

Apakah saya perlu mengubah browser untuk mendukung HTML5?

Bagaimana saya tahu jika browser saya mendukung HTML5?