Saat kita belajar dasar dasar pemrograman berbasis web, maka hal penting yang harus dikuasai adalah masalah input tipe dan validasinya. Dalam HTML versi sebelumnya, input hanya terbatas pada text,file,dan password. Lalu untuk memvalidasi misalkan input harus angka, kita harus menggunakan javascript, jQuery ataupun menggunakan teknik serverside programming. Dengan munculnya HTML5, input form diweb menjadi lebih kaya dan lebih mudah dipakai.
Dalam artikel kali ini, saya fokus ke dua hal; pertama, masalah attribute baru di input dan yang kedua tentang input baru di HTML5.
Attribute baru di HTML5 Form
Di Html5, ada 3 attribute baru yang bisa langsung dipakai dan sangat bermanfaat bagi user dan developer. Attribute itu adalah placeholder, autofocus dan required.
Placeholder.
Placeholder adalah text abu abu yang muncul di input form. Text ini hanya akan muncul jika input belum di isi, placeholder juga sangat bermanfaat untuk layar kecil karena placeholder bisa dijadikan pengganti label.
autofocus
Fitur HTML5 yang membuat input langsung tersorot saat membuka form, biasanya input pertama. Ini sangat bermanfaat sehingga user tidak perlu meletekan kursor secara manual di input form.
required
Fitur ini adalah fitur validasi dasar di HTML5, Jika sebuah attribute ditambah attribute required, maka jika input kosong, maka akan muncul pesan “Please fill this out” atau kalimat sejenis. Pesan error akan muncul berbeda tergantung browser.
Berikut ini contoh penggunakan 3 attribute tadi
<form class="pure-form pure-form-stacked"> <fieldset> <label for="name">Your Name</label> <input id="name" type="text" placeholder="Your Name" autofocus > <label for="email">Your Email</label> <input id="email" type="email" placeholder="Your Email" required> <label for="password">Your Password</label> <input id="password" type="password" placeholder="Your Password"> <button type="submit" class="pure-button"> Sign Up </button> </fieldset> </form>
Output tampilan kurang lebih seperti ini :
Input baru di HTML5
Selain 3 attribute diatas, HTML5 juga mempunyai banyak input baru.
Berikut ini adalah daftar input baru di HTML5
- color, input warna
- date, input tanggal, mirip dengan jquery UI date
- datetime, tanggal dan waktu
- datetime-local, tanggal dan waktu dengan format lokal.
- email, email input
- month, bulan
- number, angka
- range, slider nilai antara min sampai max.
- search , input pencarian
- tel, input nomor telepon
- time, input waktu (jam:menit:detik)
- url, input URL, website
- week, input week , minggu dalam satu tahun.
Hal penting disini, tidak semua browser mendukung semua input diatas. Jika browser tidak mendukung input baru di HTML5, maka input akan kembali kedafult yaitu input='text'
Jika anda ingin mengecek apakah browser anda mendukung, cek html5test.com.
Sample code
Berikut ini adalah contoh penggunaan HTML5 input di Form.
<form class="pure-form pure-form-stacked"> <fieldset> <label for="name">Nama event</label> <input id="name" type="text" placeholder="Nama event" autofocus required > <!-- input waktu --> <label for="jam">Jam </label> <input id="jam" type="time" placeholder="Your time"> <!--input warna--> <label for="warna">Warna pakaian </label> <input id="warna" type="color" placeholder="masukan warna"> <!-- input harus angka --> <label for="time">Maximal teman yang diajak</label> <input id="time" type="number" required placeholder="masukan jumlah teman"> <!-- input dalam format slider, misalkan nilai siswa antara 0-100. Jika nilai ingin ditampilkan saat slider digeser, tetap harus minta bantuan javascript --> <label for="tiket">Tiket</label> <input id="tiket" type="range" min='1' max='100' placeholder="Harga tiket"> <!--- ini yang keren, tanpa jquery UI calendar, sekarang kita bisa menampilkan calendar dengan mudah, cukup gunakan input date---> <label for="tanggal">Tanggal Masuk</label> <input id="tanggal" type="date" placeholder="Your tanggal" required> <button type="submit" class="pure-button"> Simpan </button> </fieldset> </form>
Contoh tampilan HTML5 date input di Google chrome
Bagian ini baru pengantar, dari pengantar ini tampak ada kekurangan diantarnya masalah validasi, bagaimana jika kalimat error yang muncul kita buat sendiri (custom validation), bagaimana saya mendeteksi format text yang benar? misalkan input kode post atau pattern tertentu, apakah HTML5 memvasilitasi hal tersebut? Silahkan baca artikel selanjutnya
Demo dan informasi lanjut bisa dilihat disini:
ternyata lebih gampang pake html5 dibanding jquery-ui
weleh weleh weleh
tank’s adakah kelebihan lainnya..
oke bos…trims tutorialnya bermanfaat
apakah HTML5 bisa digunakan untuk pembuatan aplikasi android?