Element Baru HTML5 untuk Form

Form adalah sebuah bagian penting dari sebuah situs agar lebih interaktif dengan pengunjung situs. Selain itu form juga dibutuhkan untuk pengambilan data dari pengunjung situs anda. Implementasi-nya banyak digunakan untuk form kontak, pendaftaran, berlangganan artikel, dll.

Tapi tidak banyak orang yang bisa memaksimalkan tag dan element form di HTML5 saat ini agar bisa lebih interaktif lagi dan lebih mempermudah user untuk mengisi form yang disediakan.

Dengan menggunakan semantic baru di HTML5 ini, form bisa lebih mudah di kostumisasi dan implementasi yang sangat detail untuk individual input nya. Tapi tidak semua browser saat ini bisa mendukung element HTML5 form.

Browser HTML5 untuk Element Form

	OPERA	FIREFOX			SAFARI		IE				CHROME
	10.63	3.6	4.03	5+	5	5.1	6	7	8	9	7	8	9+
Form:Search
Form:Phone
Form:URL
Form:Email
Form:DateTime
Form:Date
Form:Number
Form:Range

Note: Versi browser paling baru yang tidak ada dalam tabel ini mempunya kemungkinan besar untuk support semua tag ini.

Hanya browser baru saja yang mendukung tag HTML5, karena HTML5 terhitung baru dan belum semua element bisa di implementasikan di semua browser.

Form:Search

Form input search dapat dimodifikasi hinggal tahap design layaknya input search di mac os, apple, iphone, dan google chrome atau yang menggunakan engine webkit.

Tambahkan sedikit style kedalamnya:

input[type="search"] {
	display: block;
	padding: 3px 8px;
	outline: none;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border: 1px inset #333;
}

Memperlihatkan hasil pencarian sebelumnya dalam element result=x, dimana x jumlah hasil sebelumnya yang akan di perlihatkan:

Form:Phone

Implementasinya seperti ini:

Batasi input hanya untuk nomor saja dengan menggunakan pattern:

Pattern harus menggunakan regex, “[0-9]{10}” artinya hanya angka 0-9 berjumlah 10 digit angka yang akan di anggap valid.

Input type=tel terdeteksi di mobile device.

Form:Url

Implementasinya seperti ini:

Sama seperti input sebelumnya, jika tidak memasukkan alamat URL dengan benar, input akan memperingatkan bahwa hanya URL saja yang bisa di masukkan, selain itu akan invalid.

Input type=url terdeteksi di mobile device.

Form:Email

Implementasinya seperti ini:

tidak perlu menggunakan pattern lagi, input email akan otomatis mendeteksi alamat email yang valid (user@domain.tld).

Input type=email terdeteksi di mobile device.

Form:DateTime

Implementasinya seperti ini:

Input memudahkan dari sisi frontend dan juga backend untuk memproses data tanggal yang dimasukkan.

Form:Range

Implementasinya seperti ini:

berikut penjelasannya:
max= , digunakan untuk mebatasi jumlah maksimum.
min= , digunakan untuk awal mula perhitungan diterapkan.
step= , berisi unit yang akan digunakan sebagai acuan langkah kenaikan atau pengurangan nilai.
value= , menentukan jumlah default ketika element mulai dibaca.

Jika anda masih ragu untuk menggunakan tag element ini, dikarenakan kompatibilitas dengan element lain di situs anda, atau karna user anda kebanyakan tidak menggunakan modern browser yang telah menjadi standar. Masih ada alternatif untuk menggunakan element di HTML4.

Dalam artikel ini anda telah mempelajari cara untuk lebih mempermudah user anda ketika mengisi form, form yang terlalu rumit dan terlalu menghabiskan load server dikarenakan terlalu banyak membaca javascript di dalam form akan mengurangi kinerja form anda juga.