A Look Into Forms HTML5 Jenis Input Tarikh, Warna dan Julat

Borang didapati di mana-mana di laman web. Facebook, Twitter, Google - hanya untuk menamakan beberapa - memerlukan kami untuk log masuk atau mendaftar ke laman web ini melalui borang, malah kami juga menggunakan borang untuk tweet dan mengemas kini status di laman sosial. Pendek kata, borang itu adalah bahagian yang sangat penting untuk dapat berinteraksi ke laman web.

Borang web dibina dengan input, pada masa lalu, kami hanya mempunyai beberapa pilihan untuk jenis input; seperti teks, kata laluan, radio, kotak semak dan mengemukakan. Sekarang, HTML5 datang dengan peningkatan hebat dan memperkenalkan banyak jenis input baharu dalam spec tersebut.

Oleh itu, dalam jawatan ini kita akan menggali beberapa bahagian menarik baru dari Borang HTML5 bahawa kami fikir anda harus mencubanya; mari kita periksa mereka.

Pemilih Tarikh

Perkara pertama yang ingin kita lihat ialah pemilih tarikh. Tarikh pemilihan adalah perkara biasa yang mungkin anda dapati dalam borang pendaftaran, terutamanya di sesetengah laman web atau aplikasi seperti tempahan penerbangan dan hotel.

Terdapat banyak Perpustakaan JavaScript untuk mencipta pemetik tarikh. Sekarang, kita juga boleh membuat satu dengan cara yang lebih mudah dengan input HTML5 Tarikh, seperti berikut;

The pemetik tarikh dalam HTML5 pada dasarnya berfungsi sangat mirip dengan bagaimana Perpustakaan JavaScript lakukan; apabila kita memberi tumpuan kepada bidang, kalendar akan muncul, dan kemudian kita dapat menavigasi bulan dan tahun untuk memilih tarikh.

Walau bagaimanapun, setiap penyemak imbas yang pada masa ini menyokongnya Tarikh Jenis input iaitu Chrome, Opera, dan Safari memaparkan jenis input ini sedikit berbeza yang berpotensi membawa kepada isu ketidakkonsistenan dalam pengalaman pengguna, dan di sini adalah bagaimana ia kelihatan seperti;

Beberapa perbezaan yang ketara yang anda dapat lihat sekilas dari tangkapan di atas; Opera menggunakan singkatan tiga huruf Inggeris untuk nama hari - Sun, Mon, Thu, dan sebagainya, manakala Chrome menggunakan bahasa setempat saya, Safari - sebaliknya - berfungsi agak aneh, ia tidak menunjukkan kalendar sama sekali.

Ada juga yang baru input jenis untuk pilih tarikh atau masa yang lebih khusus; bulan, minggu, masa, masa tarikh dan datetime-local, yang kami yakin bahawa kata kunci itu sendiri adalah desctiptive untuk memberitahu apa yang dilakukannya.

Anda boleh melihat semua daripada mereka dalam tindakan dari pautan di bawah, tetapi pastikan anda melihatnya di Opera 11 dan ke atas, kerana, pada tulisan itu, ia adalah satu-satunya penyemak imbas yang menyokong semua jenis input tersebut.

Demo Datepicker

Pemetik Warna

Pemetik warna sering diperlukan dalam aplikasi berasaskan web tertentu, seperti penjana kecerunan CSS3 ini, tetapi semua pemaju web masa ini juga masih bergantung pada Perpustakaan JavaScript, seperti jsColor, untuk melakukan pekerjaan itu. Tetapi sekarang kita boleh membuat penanda warna pelayar asli dengan HTML5 warna jenis input;

Sekali lagi, penyemak imbas, dalam kes ini Chrome dan Opera, memberikan jenis input ini sedikit berbeza;

Opera pertama kali memaparkan pilihan warna asas pada klik serta format hex warna semasa yang dipilih dalam dropdown, sementara Chrome akan terus memaparkan palet warna dalam tetingkap baru apabila diklik.

Tambahan pula, kita juga boleh menetapkan warna lalai dengan nilai atribut, seperti berikut;

Dengan cara itu, apabila ia dilihat dalam penyemak imbas yang tidak disokong, yang input akan merosakkan dalam medan teks dan nilai lalai akan dapat dilihat yang dapat memberikan petunjuk kepada pengguna apa yang perlu dimasukkan dalam medan.

Paparkan Nilai Warna

Daripada membuka Photoshop hanya untuk menyalin hex format warna, anda sebenarnya boleh membuat alat mudah apabila jenis input ini melakukan tugas, kerana warna yang dihasilkan sudah dalam heksadesimal ini akan sangat mudah;

Pertama, kami tambahkan id colorpicker untuk input dan kami juga menambah kosong div dengan id hexcolor di sebelahnya mengandungi nilai.

Kami memerlukan jQuery yang dipautkan di kepala dokumen kami. Kemudian kami menyimpan nilai warna dan yang baru ditambah div dalam pembolehubah, seperti itu;

 var color = $ ('# colorpicker'). val (); hexcolor = $ ('# hexcolor');

Dapatkan nilai awal dari #colorpicker;

 hexcolor.html (warna);

... dan akhirnya menukar nilai apabila warna yang dipilih juga berubah;

 $ ('# colorpicker'). pada ('ubah', fungsi () hexcolor.html (this.value););

Itu sahaja; kini mari kita melihatnya dalam tindakan.

Demo Colorpicker

Julat

The pelbagai jenis input membolehkan kami menambah slider dalam pelayar untuk memilih nombor dalam julat yang kami juga boleh temukan dalam jQuery UI.

Potongan di atas adalah asas pelaksanaan pelbagai jenis input. Kita juga boleh menukar orientasi slider ke menegak menggunakan CSS, seperti berikut;

 input [type = range] width: 20px; ketinggian: 200px; -webkit-penampilan: slider-vertical;

Di samping itu, kami boleh menetapkan min dan maks julat nombor, contohnya;

Dalam coretan di bawah, kami tetapkan min kepada sifar dan 225 untuk maksimum. Apabila mereka tidak dinyatakan dengan jelas, secara lalai pelayar akan mengambil 0 untuk minimum ke 100 untuk maksimum.

Paparkan Nombor

Terdapat satu kekangan walaupun, bilangannya tidak dapat dilihat, kita tidak dapat melihat bilangan / nilai yang dijana daripada slider dalam penyemak imbas. Untuk memaparkan nombor yang kami perlukan untuk menambah sedikit JavaScript atau jQuery, dan inilah cara kami melakukannya;

Pertama kita menambah kosong div bersebelahan input, gaya yang div cukup jadi ia kelihatan seperti kotak.

Kemudian letakkan kod berikut yang akan melakukan sama dengan kod di atas dalam pemilih warna, kecuali kita kini mendapat nilai dari gelangsar.

 $ (function () var val = $ ('slider'). val (); output = $ ('# output'); output.html (val); $ ('# slider' ) output.html (this.value);););

Sekarang, anda boleh melihat demo itu. Hanya peringatan, lihat demo dalam pelayar ini - Chrome, Opera dan Safari, sebagai Firefox dan IE tidak menyokong pelbagai jenis input pada masa ini.

Demo Julat

Perkataan Akhir

Adalah jelas bahawa HTML5 menjadikan kehidupan kita lebih mudah dengan memperkenalkan banyak jenis input baru. Tetapi seperti mana-mana ciri HTML5 yang lain, sokongannya sangat terhad, terutamanya dalam pelayar lama, jadi kita harus menggunakan ciri-ciri baru dengan berhati-hati, terutamanya jenis input baru yang telah kita bahas dalam siaran ini; Tarikh, Warna dan Julat.

Tetapi pada akhirnya kami berharap bahawa sekarang anda mempunyai lebih banyak wawasan Borang HTML5. Terima kasih kerana membaca tulisan ini, dan kami berharap anda menikmatinya.

Demo
Muat turun Sumber

Bacaan lanjut

Berikut adalah pautan yang berguna untuk anda menggali lebih lanjut ke dalam Borang HTML.

Ciri bentuk baharu dalam HTML5 - Opera Dev.
Negeri Semasa Borang HTML5 - Wufoo
Atribut Form HTML5 - w3school.org
Bilakah saya boleh menggunakan borang HTML5? - CanIUse.com