A Look Into HTML5 Forms Jenis Input Tanggal, Warna dan Rentang

Formulir ditemukan di mana-mana di situs web. Facebook, Twitter, Google - hanya untuk beberapa nama - mengharuskan kami untuk masuk atau mendaftar ke situs melalui formulir, bahkan kami juga menggunakan formulir untuk tweet dan memperbarui status di situs sosial. Pendeknya, formulir adalah bagian yang sangat penting untuk dapat berinteraksi dengan situs web.

Formulir web dibangun dengan input, di masa lalu, kami hanya memiliki beberapa opsi untuk jenis input; seperti teks, kata sandi, radio, kotak centang dan menyerahkan. Sekarang, HTML5 hadir dengan perbaikan besar dan memperkenalkan banyak tipe input baru dalam spesifikasi.

Jadi, dalam posting ini kita akan menggali beberapa bagian baru yang menarik dari Formulir HTML5 bahwa kami pikir Anda harus mencobanya; mari kita periksa.

Pemilih Tanggal

Hal pertama yang ingin kita lihat adalah pemilih tanggal. Memilih tanggal adalah hal umum yang dapat Anda temukan dalam formulir pendaftaran, terutama di beberapa situs atau aplikasi seperti penerbangan dan pemesanan hotel.

Ada banyak Perpustakaan JavaScript untuk membuat pemilih tanggal. Sekarang, kita juga dapat membuat satu dengan cara yang jauh lebih mudah dengan input HTML5 tanggal, sebagai berikut;

Itu pemilih tanggal di HTML5 pada dasarnya bekerja sangat mirip dengan yang dilakukan Perpustakaan JavaScript; ketika kita fokus pada bidang, kalender akan muncul, dan kemudian kita bisa menavigasi bulan dan tahun untuk memilih tanggal.

Namun, setiap browser yang saat ini mendukung tanggal tipe input yaitu Chrome, Opera, dan Safari menampilkan tipe input ini sedikit berbeda yang berpotensi menyebabkan masalah ketidakkonsistenan dalam pengalaman pengguna, dan berikut ini tampilannya;

Beberapa perbedaan penting yang dapat Anda lihat sekilas dari tangkapan layar di atas; Opera menggunakan singkatan tiga huruf Inggris untuk nama hari - Sun, Mon, Thu, dan sebagainya, sedangkan Chrome menggunakan bahasa lokal saya, Safari - di sisi lain - bekerja agak aneh, tidak menunjukkan kalender sama sekali.

Ada juga yang baru memasukkan jenis ke pilih tanggal atau waktu lebih khusus; bulan, minggu, waktu, tanggal Waktu dan datetime-local, yang kami yakin bahwa kata kunci itu sendiri cukup desiptif untuk mengatakan apa fungsinya.

Anda dapat melihat semuanya dalam aksi dari tautan di bawah, tetapi pastikan Anda melihatnya di Opera 11 dan di atasnya, karena, pada saat penulisan, ini adalah satu-satunya browser yang mendukung semua jenis input tersebut..

Demo Datepicker

Pemilih warna

Pemilih warna sering dibutuhkan dalam aplikasi berbasis web tertentu, seperti generator gradien CSS3 ini, tetapi selama ini pengembang web juga masih mengandalkan JavaScript Library, seperti jsColor, untuk melakukan pekerjaan itu. Tapi sekarang kita bisa membuat pemilih warna peramban asli dengan HTML5 warna tipe masukan;

Sekali lagi, browser, dalam hal ini Chrome dan Opera, membuat jenis input ini sedikit berbeda;

Opera pertama menampilkan opsi warna dasar pada klik serta format hex dari warna yang dipilih saat ini dalam dropdown, sedangkan Chrome akan langsung memunculkan palet warna di jendela baru ketika diklik..

Selanjutnya, kita juga dapat mengatur warna default dengan nilai atribut, sebagai berikut;

Dengan begitu, ketika dilihat di browser yang tidak didukung, the memasukkan akan menurunkan dalam bidang teks dan nilai default akan terlihat yang dapat memberikan semacam petunjuk bagi pengguna apa yang harus dimasukkan di bidang.

Tampilkan Nilai Warna

Daripada membuka Photoshop hanya untuk menyalin hex format warna, Anda benar-benar dapat membuat alat sederhana pada tipe input ini untuk melakukan pekerjaan, karena warna yang dihasilkan sudah dalam heksadesimal ini akan sangat mudah;

Pertama, kami menambahkan id pemilih warna ke input dan kami juga menambahkan kosong div dengan id hexcolor di sebelahnya mengandung nilai.

Kami membutuhkan jQuery yang ditautkan di kepala dokumen kami. Lalu kami menyimpan nilai warna dan yang baru ditambahkan div dalam sebuah variabel, seperti itu;

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

Dapatkan nilai awal dari #pemilih warna;

 hexcolor.html (warna);

... dan terakhir mengubah nilainya ketika warna yang dipilih juga berubah;

 $ ('# colorpicker'). on ('change', function () hexcolor.html (this.value););

Itu dia; sekarang mari kita melihatnya dalam aksi.

Demo Colorpicker

Jarak

Itu jarak tipe input memungkinkan kita untuk menambahkan slider di browser untuk memilih nomor dalam rentang yang juga bisa kita temukan di jQuery UI.

Cuplikan di atas adalah dasar implementasi jarak tipe masukan. Kami juga dapat mengubah orientasi slider ke vertikal menggunakan CSS, sebagai berikut;

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

Selain itu, kita dapat mengatur min dan maks rentang angka, misalnya;

Dalam cuplikan di bawah ini kami mengatur min ke nol dan 225 untuk maksimum. Ketika mereka tidak ditentukan secara eksplisit, secara default browser akan mengambil 0 untuk minimum 100 untuk maksimum.

Tampilkan Nomornya

Ada satu kendala meskipun, jumlahnya tidak terlihat, kita tidak bisa melihat angka / nilai yang dihasilkan dari slider di browser. Untuk menampilkan nomor, kita perlu menambahkan sedikit JavaScript atau jQuery, dan inilah cara kita melakukannya;

Pertama kita tambahkan yang kosong div di sebelah input, beri gaya div cukup sehingga terlihat seperti kotak.

Kemudian masukkan kode berikut yang akan melakukan hal yang sama seperti kode di atas dalam pemetik warna kuat, kecuali kita sekarang mendapatkan nilai dari slider.

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

Sekarang, Anda dapat melihat demo. Sebagai pengingat, lihat demo di browser ini - Chrome, Opera dan Safari, karena Firefox dan IE tidak mendukungnya jarak ketik input saat ini.

Rentang Demo

Kata-kata terakhir

Jelas bahwa HTML5 membuat hidup kita jauh lebih mudah dengan memperkenalkan banyak tipe input baru. Tetapi seperti fitur HTML5 lainnya, dukungannya sangat terbatas, terutama di browser lama, jadi kita harus menggunakan fitur baru ini dengan hati-hati, terutama tipe input baru yang telah kita bahas dalam posting ini; Tanggal, Warna, dan Rentang.

Tetapi pada akhirnya kami berharap bahwa sekarang Anda memiliki wawasan lebih lanjut Formulir HTML5. Terima kasih telah membaca posting ini, dan kami harap Anda menikmatinya.

Demo
Sumber Unduhan

Bacaan lebih lanjut

Di bawah ini adalah beberapa tautan bermanfaat bagi Anda untuk menggali lebih jauh ke dalam Formulir HTML.

Fitur formulir baru di HTML5 - Opera Dev.
Keadaan Saat Bentuk HTML5 - Wufoo
Atribut Formulir HTML5 - w3school.org
Kapan saya bisa menggunakan formulir HTML5? - CanIUse.com