HTML5

Tidak ada istilah web form 1.0 ataupun 2.0, istilah ini hanya menunjukkan penambahan dan perbaikan pada HTML5 tentang bentuk form. Sebenarnya ada banyak fitur-fitur standar yang ditawarkan HTML5 yang dapat anda baca pada link ini. Namun dalam artikel ini, penulis hanya memberikan beberapa atribut field form yang ditawarkan HTML5. Menggunakan atribut-atribut ini akan sangat memudahkan developer daripada membuat script-script Javascript untuk melakukannya. Sebagai contoh Anda dapat memberikan atribut autofocus pada input field daripada menuliskan script $(elemen).focus() pada dokumen Anda.

Ada beberapa atribut dan tipe field form baru yang ditawarkan HTML5 diantaranya adalah:

Placeholder

Jika Anda pernah lihat teks dalam sebuah field yang ditampilkan lebih lighter daripada teks yang Anda masukkan maka itulah teks placeholder. Teks placeholder berbeda dengan nilai default field, dia biasanya hanya berfungsi menggantikan label field.

Didalam HTML5 anda dapat dengan mudah membuat teks placeholder dengan cara seperti ini

1 2 3

<label for="hobbies">Your hobbies</label>   <input id="hobbies" name="hobbies" type="text" placeholder="Hobbies">

Tampilan Teks Placeholder

Fungsi placeholder ini melakukan beberapa hal sebagai berikut:

1. Ketika field form tidak memiliki value, maka teks placeholder akan diciptakan
2. Ketika user fokus pada field form itu, maka teks placeholder akan dihapus
3. Jika user meninggalkan field form itu dalam keadaan kosong, maka teks placeholder kembali diciptakan

Autofocus

Mendefinisikan atribut ini pada sebuah field, akan menjadikan field tersebut mendapatkan fokus saat dokumen terload. Atribut ini tidak hanya bekerja pada field input, tapi juga pada textarea dan select.

1 2 3

<label for="status">What's happening?</label>   <input id="status" name="status" type="text" autofocus>

Pada DOM Scripting, Anda dapat memanfaatkan fungsi focus() untuk memberikan fokus pada sebuah field tertentu.

Require

Biasa dipakai untuk urusan validasi. Dengan menambahkan atribut ini, Anda tidak perlu menambahkan script untuk mengecek inputan user. Browser akan mengeluarkan peringatan jika user tidak mengisi field ini.

1 2 3

<label for="pass">Your password</label>   <input id="pass" name="pass" type="password" required>

Autocomplete

Ada beberapa browser yang menyimpan value dari masukan user, yang kemudian memunculkannya dalam bentuk autocomplete saat user kembali. Bagi user fitur ini akan sangat memudahkan, tapi adakalanya user tidak menginginkan value yang dia berikan tersimpan karena urusan keamanan seperti informasi rekening bank. Masalah ini dapat diselesaikan dengan mendefinisikan atribut autocomplete pada sebuah field. Nilai atribut ini bukan boolean seperti atribut autofocus dan required diatas, tapi Anda dapat memberikan nilai “on” atau “off”.

1	<input type="text" name="token" autocomplete="off">

Anda juga bisa menuliskan seperti dibawah ini untuk memastikan bahwa setiap komponen form tidak akan menampilkan value user.

1	<form action="/" autocomplete="off">

Datalist

Atribut ini menyediakan beberapa opsi alternatif yang disarankan oleh aplikasi kepada user saat mengetikkan pada field form tertentu. Contoh penggunaannya bisa Anda lihat seperti ini:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<label for="homeworld">Your home planet</label>   <input type="text" name="homeworld" id="homeworld" list="planets">   <datalist id="planets">   <option value="Mercury">   <option value="Venus">   <option value="Earth">   <option value="Mars">   <option value="Jupiter">   <option value="Saturn">   <option value="Uranus">   <option value="Neptune">   </datalist>

Opsi alternatif akan muncul dalam bentuk autocomplete dan akan diperbarui sesuai value yang diberikan user pada field.

Tampilan Datalist

Input types

Ada beberapa input tipe baru yang diperkenalkan oleh HTML 5, antara lain:

1. Search:  Tipe ini digunakan pada formpencarian
   

   Tampilan Search
2. Email: Field dengan tipe ini mengharuskan user memasukkan alamat email dengan valid.
3. Url: Field tipe ini mengharuskan user memasukkan alamat URL dengan valid
4. Tel: Field tipe ini akan sangat tampak perbedaannya dengan tipe “text” saat web diakses lewat mobile device. Keypad mobile device akan berbentuk angka.
   
   

   Tampilan Tel
5. Range: User hanya cukup menggeser slider untuk mengubah nilai dari field.
   
   

   Tampilan Range
6. Spinner: User dapat menambahkan atau mengurangi nilai yang sudah ada pada field.
   
   

   Tampilan Spinner
7. Color : Tipe ini akan mengeluarkan color pickers. Memudahkan user untuk memilih warna yang diinginkan.
   
   

   Tampilan Color
8. Date: Tipe ini akan sangat memudahkan user untuk memilih tanggal yang diinginkan.
   
   

   Tampilan Date
9. Pattern: Dengan mendefinisikan tipe ini, Anda dapat menentukan sendiri pola teks yang harus dimasukkan oleh user.
   

   1	<input id="zip" name="zip" pattern="[\d]{5}(-[\d]{4})">

Kesimpulan

Banyak perbaikan yang dilakukan HTML5, diantaranya penambahan atribut pada bentuk form seperti yang sudah Penulis sebutkan diatas. Dengan memanfaatkan atribut-atribut ini, tentunya akan sangat memudahkan kerja Anda dalam membangun sebuah form website. Jika Anda memiliki pengetahuan tentang penambahan ataupun pembaruan form HTML5 yang tidak disebutkan diatas, Penulis harap Anda bisa berbagi pada halaman komentar.