Tujuan dari fitur HTML5 baru adalah untuk meningkatkan dukungan dari penyematan, seperti video dan audio, dan memberikan pengembang dan pengguna akhir pemrograman sederhana dan pengalaman pengguna yang lebih baik. Sekarang dunia internet sedang menunggu, dan browser dapat mendukung versi baru HTML5 saat diperbarui. HTML5 telah didukung oleh banyak browser, seperti Safari, Chrome, Firefox, Opera, IE9. Ini kompatibel ke belakang, tetapi browser saat ini tidak dapat sepenuhnya kompatibel dengan HTML5.
Meningkatkan situs web ke HTML5 cukup mudah karena kompatibel dengan HTML4. Anda hanya perlu memodifikasi Doctype Anda. Pembaruan baru ini membantu membuat segalanya menjadi sederhana, sehingga Anda sekarang dapat memperbarui semua situs web Anda dan tidak akan macet karena semua tag HTML4 masih 100% didukung di HTML5.
Formulir HTML5 menentukan lebih dari selusin jenis dan fitur input baru, dan elemen -elemen baru ini memungkinkan pemrogram untuk lebih mudah diprogram. Mari kita bicara tentang fitur -fitur baru di bawah ini.
1. Placeholder kotak input
Di HTML4, pengembang menggunakan JavaScript dan JQuery sebagai placeholder kotak input, sementara di HTML5, pengembang dapat dengan mudah menampilkan placeholder. Apa itu placeholder? Placeholder adalah teks cepat yang muncul di kotak input. Saat Anda mengklik pada bidang input, itu akan secara otomatis menghilang. Anda dapat meminta sampel teks yang harus dimasukkan pengguna di kotak teks. Sebaliknya, ada kotak input email di mana Anda dapat mengatur placeholders [email protected] dan itu akan hilang ketika Anda mengkliknya.
IE ff safari chrome opera iphone android
- 3.7+ 4+ 4+ 11+ 4+ -
2. Acara Fokus Otomatis
HTML5 Cukup memuat halaman web, dan halaman web akan secara otomatis memindahkan fokus ke kotak input tertentu, seperti JavaScript. Apa bedanya? Karena ini hanya tag HTML sekarang, pengguna dapat dengan mudah menonaktifkan properti ini di browser mereka. Tidak semua browser mendukung fokus otomatis, tetapi browser tidak hanya mengabaikan properti ini. Jika Anda ingin semua browser berfungsi, cukup tambahkan properti autofocus HTML5 baru dan kemudian periksa apakah browser mendukung fokus otomatis. Jika Anda bisa, Anda tidak perlu menggunakan skrip fokus otomatis. Jika Anda tidak memilikinya, Anda perlu menambahkan skrip fokus otomatis.
FF IE Safari Chrome Opera iPhone Android
- 4+ 4+ 3+ 10+ - -
3. HTML Jenis input yang baru didefinisikan
1. Email
Kotak input pertama yang akan saya katakan adalah alamat email. Browser yang lebih tua yang tidak mendukung jenis baru juga hanya memperlakukan mereka sebagai kotak teks, dan 99% pengguna tidak akan melihat perubahan ini sampai mereka mengirimkan formulir (akan ada validasi formulir saat ini).
2. Situs web
Mari kita bicara tentang kotak input URL. Jika Anda perlu memasukkan URL, Anda berharap untuk memasukkannya seperti http://www.vevb.com. Sekarang di kotak input tipe URL, keyboard virtual variabel akan muncul seperti di iPhone. Pengguna dapat dengan mudah memasukkan Slash dan .com. Demikian pula, pengguna tidak mengetahui hal ini sebelum mengirimkan formulir.
3. Angka
Untuk mendapatkan nomor yang cocok di HTML4, Anda harus menggunakan skrip jQuery untuk membantu verifikasi. HTML5 menambahkan tipe numerik. Beberapa properti tambahan (opsional): Min: Menentukan nomor input minimum yang dapat diterima oleh kotak input. Max: adalah angka maksimum yang diizinkan untuk masuk. Langkah: Interval hukum untuk domain input atribut, standarnya adalah 1.
Seperti yang ditunjukkan pada gambar di atas, hanya angka yang diizinkan (dalam kebanyakan kasus, ini tidak akan diperhatikan sampai kesalahan diminta saat menyerahkan), hanya 0, 2, 4 yang legal (6 adalah ilegal karena langkah 10, dan legal adalah 0, 10, 20 ...).
4. Slider Digital
HTML5 memungkinkan Anda menggunakan jenis baru yang disebut rentang, dan kotak input menjadi slider. Formulir situs web Anda dapat menggunakan slider. Tag atributnya sama dengan tipe angka, cukup ubah tipe type type = 'number' ke type = 'range'.
5. Kalender
Penambahan baru terbaik hingga saat ini, tipe pemilih tanggal yang disebutkan tanggal dan datetime (ada jenis tanggal/waktu tambahan lainnya seperti kalender waktu, minggu, bulan, dan lokal). Banyak kerangka kerja JavaScript seperti JQuery UI dan Yiu sudah memiliki kontrol ini, tetapi menambahkan pemilih kalender cukup menjengkelkan. HTML5 mendefinisikan pemilih tanggal lokal baru yang tidak harus memasukkan menggunakan skrip pada halaman. Sampai sekarang, Opera adalah satu -satunya yang sepenuhnya mendukung fitur ini, dan untuk browser lainnya, Anda dapat melakukan skrip alternatif jika browser tidak mendukungnya. Namun, pada akhirnya, semua browser akan diperbarui.
6. Cari
HTML5 menambahkan jenis kotak input pencarian. Ini bukan apa -apa, tetapi ini adalah perubahan yang baik untuk beberapa pengguna. Ini dapat dengan mudah mengelilingi tepi kotak input secara otomatis, dan ketika Anda mulai mengetik, akan ada x kecil di sebelah kanan. Tidak semua browser saat ini mendukungnya.
7. Warna
HTML5 juga mendefinisikan warna jenis, yang memungkinkan Anda memilih warna dan mengembalikan nilai heksademis. Opera11 adalah satu -satunya browser yang mendukung jenis browser ini. Namun, seharusnya tidak ada banyak orang yang menggunakan jenis ini, jadi bukan masalah besar untuk tidak mendukungnya.
8. Verifikasi bentuk
Fitur baru yang paling menarik adalah verifikasi formulir. Sebagian besar pengembang melakukan validasi formulir, baik klien atau server. Mungkin validator formulir HTML5 mungkin tidak menggantikan verifikasi sisi server Anda, tetapi pada akhirnya akan menggantikan verifikasi sisi klien Anda. Masalah dengan verifikasi JavaScript adalah mudah bagi pengguna untuk memotongnya, itu dapat dengan mudah dilewati hanya dengan menonaktifkan JavaScript. Sekarang HTML5 prihatin, Anda tidak perlu khawatir tentang ini. Kesalahannya adalah semua prompt HTML5 asli dan JavaScript tidak digunakan.
IE ff safari chrome opera iphone android
- 4+ 5+ 10+ 9+ - -
9. bidang yang diperlukan
Validasi formulir HTML5 tidak terbatas pada jenis bidang verifikasi, itu juga memungkinkan tag tambahan baru dipanggil, diperlukan. Properti baru ini memungkinkan pengembang untuk memverifikasi bahwa kotak input diisi tanpa menggunakan JavaScript.
Ringkasan: Pembaruan di atas sangat penting untuk mempersingkat siklus pengembangan dan meningkatkan pengalaman pengguna. Setelah semua browser menerima HTML5, generasi situs web berikutnya akan melebihi harapan siapa pun. HTML5 bukan kerumitan, itu akan sangat membantu pengembang dan meningkatkan pengalaman pengguna.