Walaupun formulir HTML5 menawarkan jauh lebih banyak fungsi daripada pendahulunya, namun formulir tersebut tetap mudah untuk ditentukan.
HTML5 sebenarnya menawarkan banyak jenis field yang baru. Dukungan dari browser-browsa saat ini sudah cukup bagus. Namun, di sini saya hanya akan memperkenalkan jenis-jenis field yang praktis digunakan.
Pemilih Warna
Anda dapat memberikan pengunjung pilihan untuk memilih warna.
Saat mengklik field tersebut, akan terbuka pemilih warna yang khas.
Dengan itu, pengguna dapat memilih warna yang diinginkan. Pemilih warna seperti itu didefinisikan dengan <input type="color" />.
Pilih warna favorit anda: <input type="color" name="lf" />
Field tersebut selalu harus diberikan nilai. Jika nilai tersebut tidak ada atau tidak valid, secara otomatis akan dianggap #000 (atau hitam).
Tanggal dan Waktu
Terkait dengan jenis field untuk tanggal dan waktu, HTML5 memiliki banyak inovasi. Dan jenis-jenis field tersebut memiliki kemampuan yang tak kalah menarik. Pikirkan misalnya tentang langkah-langkah yang diperlukan saat ingin menawarkan field pilih tanggal kepada pengunjung anda. Biasanya hal tersebut tidak bisa dilakukan tanpa JavaScript (atau Flash). Namun, berkat HTML5, sekarang hal itu jauh lebih mudah. Anda hanya perlu menetapkan field input dengan tipe date.
<input type="date" />
Untuk tampilan dan implementasi kalender, sepenuhnya tanggung jawab browser. Browser diharapkan menampilkan widget yang sesuai untuk menampilkan kalender. Pada Google Chrome, aplikasinya terlihat seperti ini:
Dengan menggunakan date, sebuah kalender didefinisikan, melalui mana pengguna dapat memilih tanggal yang diinginkan. Setelah pemilihan, tanggal tersebut akan otomatis ditampilkan dalam field teks.
Juga mudah untuk menambahkan field waktu. Digunakan field dengan tipe time.
<input type="time" />
Dengan time, browser akan menampilkan kontrol untuk memilih waktu.
Serupa dengan itu, week berfungsi. Melalui ini, akan ditampilkan field untuk memilih minggu.
<input type="week" />
Anda juga bisa menampilkan field bulan.
<input type="month" />
Kedua jenis field tersebut menampilkan kontrol yang memungkinkan pengguna mengatur informasi yang diinginkan.
Sementara time dan date hanya memungkinkan pemilihan tanggal atau waktu, datetime dan datetime-local memungkinkan kombinasi dari kedua varian ini.
Pada datetime, field untuk tanggal dan field untuk pemilihan waktu akan ditampilkan berdampingan. (datetime saat ini hanya didukung oleh Safari dan Opera).
Telah disorot sebelumnya bahwa saat ini field formulir yang diperkenalkan pada bagian ini belum didukung oleh semua browser. Jika Anda tetap ingin menggunakannya, Anda bisa menggunakan solusi JavaScript yang sesuai. Framework JavaScript besar seperti jQuery dan Dojo menyediakan skrip yang cocok. Pada jQuery UI, tampilannya akan seperti berikut:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Dengan demikian, Anda akan tetap aman, meskipun browser tidak mendukung field klasik date.
Field untuk Angka
Melalui number, field ditawarkan khusus untuk memasukkan angka.
Pada kasus paling sederhana, definisi field number akan terlihat seperti ini:
<input type="number" />
Angka bisa dimasukkan ke dalam bidang seperti ini dengan dua cara:
• melalui keyboard
• melalui elemen kontrol
Dengan menentukan atribut tambahan, bidang number dapat dijelaskan dengan lebih detail. Pertama-tama, ada dua atribut min dan max, yang digunakan untuk menentukan rentang nilai bidang.
• min – nilai terkecil
• max – nilai terbesar
Namun, kedua atribut ini hanya memiliki pengaruh pada elemen kontrol browser. Input manual pengguna melalui keyboard tidak terpengaruh oleh atribut ini.
Nilai bulat dan desimal dapat ditetapkan untuk kedua atribut ini.
Melalui atribut step, langkah yang harus diikuti oleh elemen kontrol browser dapat ditentukan.
<input type="number" min="0" max="8" step="2" />
Dalam kasus ini, hanya nilai 0, 2, 4, 6 dan 8 dapat dipilih melalui elemen kontrol browser.
Schieberegler
Bidang dengan tipe range memungkinkan untuk memilih sebuah nilai dalam rentang nilai yang ditentukan.
Browser menginterpretasikan bidang range dengan menggunakan schieberegler.
<input type="range" min="0" max="10" step="2" value="6">
Nilai terkecil ditentukan melalui atribut min. Max menggambarkan nilai terbesar. Jika tidak ada atribut min dan max, browser akan menggunakan nilai 0 dan 100.
Melalui step, urutan langkah bisa ditentukan.
Menetapkan Bidang Pencarian
search pada dasarnya tidak memiliki fungsi. Sebaliknya, jenis bidang ini dipertimbangkan sebagai pelengkap dari kolom masukan teks klasik. Tujuan dari bidang search hanyalah membuatnya tampak berbeda dari kolom teks biasa. Biasanya, tampilan bidang search akan diatur oleh browser.
<input type="search" />
Cara implementasinya tergantung pada para produsen. Kombinasi yang baik adalah dengan menambahkan atribut results.
<input type="search" results="5" placeholder="Cari..." />
Dengan results, dapat ditentukan berapa banyak input pencarian sebelumnya yang harus ditampilkan dalam bidang.
Namun, perlu diingat: atribut results bukanlah bagian dari spesifikasi HTML5.
